diff --git a/src/components/Button/button3.vue b/src/components/Button/button3.vue
new file mode 100644
index 0000000..973aa02
--- /dev/null
+++ b/src/components/Button/button3.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 地图上方
+ * @Author: 王晓颖
+ * @Date: 2020-09-18 09:10:39
+ -->
+<template>
+  <div :class="select?'button-select':'button-no-select'" class="button" @click="change">
+    <span :style="{'font-size':size+'px'}" class="button-text"><slot/>{{ name }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Button2',
+  model: {
+    prop: 'select',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: '18'
+    }, // 文字大小
+    select: {
+      type: Boolean,
+      required: true
+    }// 选择状态
+  },
+  methods: {
+    change() {
+      console.log('button2 click')
+      // 选中则通知上级，二次点击不予处理
+      // if (this.select) {
+      this.$emit('click')
+      // }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .button{
+    cursor: pointer;
+    color: #fff;
+    padding:8px 10px;
+    height:36px;
+    /*background: url("../../assets/images/button/button_blue.png") no-repeat;*/
+    background-size: 100% 100%;
+    margin-right: 5px;
+    text-align: center;
+  }
+  .button-no-select{
+    background: url("../../assets/button_images/button2_blue.png") no-repeat;
+    background-size: 100% 100%;
+    color:#00bdff;
+  }
+  @keyframes bounce {
+    0%,
+    7%,
+    25%,
+    36%,
+    45%,
+    50% {
+      animation-timing-function: ease-out;
+      transform: translate3d(0, 0, 0);
+    }
+
+    15%,
+    16% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -30px, 0);
+    }
+
+    30% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -16px, 0);
+    }
+
+    41% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -8px, 0);
+    }
+
+    47% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -3px, 0);
+    }
+  }
+  .button-select{
+    background: url("../../assets/button_images/button2_yellow.png") no-repeat;
+    color: #fccd14;
+    background-size: 100% 100%;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .button-text{
+    font-weight: bolder;
+  }
+</style>

diff --git a/src/components/Button/button3.vue b/src/components/Button/button3.vue
new file mode 100644
index 0000000..973aa02
--- /dev/null
+++ b/src/components/Button/button3.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 地图上方
+ * @Author: 王晓颖
+ * @Date: 2020-09-18 09:10:39
+ -->
+<template>
+  <div :class="select?'button-select':'button-no-select'" class="button" @click="change">
+    <span :style="{'font-size':size+'px'}" class="button-text"><slot/>{{ name }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Button2',
+  model: {
+    prop: 'select',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: '18'
+    }, // 文字大小
+    select: {
+      type: Boolean,
+      required: true
+    }// 选择状态
+  },
+  methods: {
+    change() {
+      console.log('button2 click')
+      // 选中则通知上级，二次点击不予处理
+      // if (this.select) {
+      this.$emit('click')
+      // }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .button{
+    cursor: pointer;
+    color: #fff;
+    padding:8px 10px;
+    height:36px;
+    /*background: url("../../assets/images/button/button_blue.png") no-repeat;*/
+    background-size: 100% 100%;
+    margin-right: 5px;
+    text-align: center;
+  }
+  .button-no-select{
+    background: url("../../assets/button_images/button2_blue.png") no-repeat;
+    background-size: 100% 100%;
+    color:#00bdff;
+  }
+  @keyframes bounce {
+    0%,
+    7%,
+    25%,
+    36%,
+    45%,
+    50% {
+      animation-timing-function: ease-out;
+      transform: translate3d(0, 0, 0);
+    }
+
+    15%,
+    16% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -30px, 0);
+    }
+
+    30% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -16px, 0);
+    }
+
+    41% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -8px, 0);
+    }
+
+    47% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -3px, 0);
+    }
+  }
+  .button-select{
+    background: url("../../assets/button_images/button2_yellow.png") no-repeat;
+    color: #fccd14;
+    background-size: 100% 100%;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .button-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue
index 3528987..eb4d420 100644
--- a/src/components/Map/MarsMap.vue
+++ b/src/components/Map/MarsMap.vue
@@ -4,7 +4,7 @@
     ref="map"
     :id="`mars3d-container${mapKey}`"
     :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]">
-  <slot/>
+    <slot/>
   </div>
 </template>
 
@@ -37,6 +37,10 @@
         return {}
       }
     },
+    labelShow: {
+      type: Boolean,
+      default: true
+    }, // 地块上文字是否显示
     // 是否分屏显示
     compare: {
       type: Boolean,
@@ -51,7 +55,17 @@
     customClass: {
       type: String,
       default: ''
-    }
+    },
+    colorful: {
+      type: Boolean,
+      default: false
+    },
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#2F50F3', '#417EE0', '#1D2EB7', '#2E5EA8', '#386ADE', '#2D5BA7', '#4991DB', '#4991DB', '#4C96E6', '#2F50F3', '#0385BD', '#4A94DC']
+      }
+    }// 地块使用的颜色列表
   },
   data() {
     return {
@@ -93,9 +107,7 @@
       var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
       this.map = map
       this[`map${this.mapKey}`] = map
-
       console.log('>>>>> 地图创建成功 >>>>', map)
-
       // 挂载到全局对象下，所有组件通过 this.map 访问
       // Vue.prototype[`map${this.mapKey}`] = map
 
@@ -111,10 +123,8 @@
       map._viewer.scene.backgroundColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor.alpha = 0
+      // 添加各市地块
       this.addProvincePolygon()
-      // this.addLine()
-      this.addPipe()
-      // this.addPipe2()
       this.map.fixedLight = true
       // 抛出事件
       this.$emit('onload', map)
@@ -138,36 +148,6 @@
             width: 5, // 宽度
             height: 20000,
             clampToGround: false
-            // label: {
-            //   // 面中心点，显示文字的配置
-            //   text: '{name}', // 对应的属性名称
-            //   opacity: 1,
-            //   font_size: 20,
-            //   color: '#ffffff',
-            //
-            //   font_family: '楷体',
-            //   outline: true,
-            //   outlineColor: '#ffffff',
-            //   outlineWidth: 1,
-            //
-            //   background: false,
-            //   backgroundColor: '#000000',
-            //   backgroundOpacity: 0.1,
-            //
-            //   font_weight: 'normal',
-            //   font_style: 'normal',
-            //
-            //   scaleByDistance: true,
-            //   scaleByDistance_far: 20000000,
-            //   scaleByDistance_farValue: 0.1,
-            //   scaleByDistance_near: 1000,
-            //   scaleByDistance_nearValue: 1,
-            //
-            //   distanceDisplayCondition: false,
-            //   distanceDisplayCondition_far: 10000,
-            //   distanceDisplayCondition_near: 0,
-            //   visibleDepth: false
-            // }
           }
         },
         flyTo: true
@@ -281,7 +261,7 @@
     },
     // 添加省地块
     addProvincePolygon() {
-      const { mars3d } = this
+      const { mars3d, colorful, colorList } = this
       var graphicLayer = new mars3d.layer.DivLayer()
       this.polygonLayer = graphicLayer
       this.map.addLayer(graphicLayer)
@@ -292,6 +272,7 @@
             const coordinates = (features[i].geometry.coordinates[0][0]).map(item => {
               return [item[0], item[1], 0]
             })
+            const color = colorful ? colorList[i] : '#3a77da'
             const graphic = new mars3d.graphic.PolygonEntity({
               positions: coordinates,
               style: {
@@ -299,16 +280,16 @@
                 // heightReference: mars3d.Cesium.HeightReference.RELATIVE_TO_GROUND,
                 hasShadows: true,
                 diffHeight: 10000.0,
-                color: '#3a77da',
+                color: color,
                 opacity: 1,
-                outline: true,
+                outline: colorful ? false : true,
                 outlineColor: '#4764c9',
                 outlineWidth: 3,
                 outlineOpacity: 1,
                 arcType: mars3d.Cesium.ArcType.GEODESIC,
                 label: {
                   // 面中心点，显示文字的配置
-                  text: features[i].properties.name, // 对应的属性名称
+                  text: this.labelShow ? features[i].properties.name : '', // 对应的属性名称
                   opacity: 1,
                   font_size: 20,
                   color: '#ffffff',

diff --git a/src/components/Button/button3.vue b/src/components/Button/button3.vue
new file mode 100644
index 0000000..973aa02
--- /dev/null
+++ b/src/components/Button/button3.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 地图上方
+ * @Author: 王晓颖
+ * @Date: 2020-09-18 09:10:39
+ -->
+<template>
+  <div :class="select?'button-select':'button-no-select'" class="button" @click="change">
+    <span :style="{'font-size':size+'px'}" class="button-text"><slot/>{{ name }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Button2',
+  model: {
+    prop: 'select',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: '18'
+    }, // 文字大小
+    select: {
+      type: Boolean,
+      required: true
+    }// 选择状态
+  },
+  methods: {
+    change() {
+      console.log('button2 click')
+      // 选中则通知上级，二次点击不予处理
+      // if (this.select) {
+      this.$emit('click')
+      // }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .button{
+    cursor: pointer;
+    color: #fff;
+    padding:8px 10px;
+    height:36px;
+    /*background: url("../../assets/images/button/button_blue.png") no-repeat;*/
+    background-size: 100% 100%;
+    margin-right: 5px;
+    text-align: center;
+  }
+  .button-no-select{
+    background: url("../../assets/button_images/button2_blue.png") no-repeat;
+    background-size: 100% 100%;
+    color:#00bdff;
+  }
+  @keyframes bounce {
+    0%,
+    7%,
+    25%,
+    36%,
+    45%,
+    50% {
+      animation-timing-function: ease-out;
+      transform: translate3d(0, 0, 0);
+    }
+
+    15%,
+    16% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -30px, 0);
+    }
+
+    30% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -16px, 0);
+    }
+
+    41% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -8px, 0);
+    }
+
+    47% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -3px, 0);
+    }
+  }
+  .button-select{
+    background: url("../../assets/button_images/button2_yellow.png") no-repeat;
+    color: #fccd14;
+    background-size: 100% 100%;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .button-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue
index 3528987..eb4d420 100644
--- a/src/components/Map/MarsMap.vue
+++ b/src/components/Map/MarsMap.vue
@@ -4,7 +4,7 @@
     ref="map"
     :id="`mars3d-container${mapKey}`"
     :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]">
-  <slot/>
+    <slot/>
   </div>
 </template>
 
@@ -37,6 +37,10 @@
         return {}
       }
     },
+    labelShow: {
+      type: Boolean,
+      default: true
+    }, // 地块上文字是否显示
     // 是否分屏显示
     compare: {
       type: Boolean,
@@ -51,7 +55,17 @@
     customClass: {
       type: String,
       default: ''
-    }
+    },
+    colorful: {
+      type: Boolean,
+      default: false
+    },
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#2F50F3', '#417EE0', '#1D2EB7', '#2E5EA8', '#386ADE', '#2D5BA7', '#4991DB', '#4991DB', '#4C96E6', '#2F50F3', '#0385BD', '#4A94DC']
+      }
+    }// 地块使用的颜色列表
   },
   data() {
     return {
@@ -93,9 +107,7 @@
       var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
       this.map = map
       this[`map${this.mapKey}`] = map
-
       console.log('>>>>> 地图创建成功 >>>>', map)
-
       // 挂载到全局对象下，所有组件通过 this.map 访问
       // Vue.prototype[`map${this.mapKey}`] = map
 
@@ -111,10 +123,8 @@
       map._viewer.scene.backgroundColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor.alpha = 0
+      // 添加各市地块
       this.addProvincePolygon()
-      // this.addLine()
-      this.addPipe()
-      // this.addPipe2()
       this.map.fixedLight = true
       // 抛出事件
       this.$emit('onload', map)
@@ -138,36 +148,6 @@
             width: 5, // 宽度
             height: 20000,
             clampToGround: false
-            // label: {
-            //   // 面中心点，显示文字的配置
-            //   text: '{name}', // 对应的属性名称
-            //   opacity: 1,
-            //   font_size: 20,
-            //   color: '#ffffff',
-            //
-            //   font_family: '楷体',
-            //   outline: true,
-            //   outlineColor: '#ffffff',
-            //   outlineWidth: 1,
-            //
-            //   background: false,
-            //   backgroundColor: '#000000',
-            //   backgroundOpacity: 0.1,
-            //
-            //   font_weight: 'normal',
-            //   font_style: 'normal',
-            //
-            //   scaleByDistance: true,
-            //   scaleByDistance_far: 20000000,
-            //   scaleByDistance_farValue: 0.1,
-            //   scaleByDistance_near: 1000,
-            //   scaleByDistance_nearValue: 1,
-            //
-            //   distanceDisplayCondition: false,
-            //   distanceDisplayCondition_far: 10000,
-            //   distanceDisplayCondition_near: 0,
-            //   visibleDepth: false
-            // }
           }
         },
         flyTo: true
@@ -281,7 +261,7 @@
     },
     // 添加省地块
     addProvincePolygon() {
-      const { mars3d } = this
+      const { mars3d, colorful, colorList } = this
       var graphicLayer = new mars3d.layer.DivLayer()
       this.polygonLayer = graphicLayer
       this.map.addLayer(graphicLayer)
@@ -292,6 +272,7 @@
             const coordinates = (features[i].geometry.coordinates[0][0]).map(item => {
               return [item[0], item[1], 0]
             })
+            const color = colorful ? colorList[i] : '#3a77da'
             const graphic = new mars3d.graphic.PolygonEntity({
               positions: coordinates,
               style: {
@@ -299,16 +280,16 @@
                 // heightReference: mars3d.Cesium.HeightReference.RELATIVE_TO_GROUND,
                 hasShadows: true,
                 diffHeight: 10000.0,
-                color: '#3a77da',
+                color: color,
                 opacity: 1,
-                outline: true,
+                outline: colorful ? false : true,
                 outlineColor: '#4764c9',
                 outlineWidth: 3,
                 outlineOpacity: 1,
                 arcType: mars3d.Cesium.ArcType.GEODESIC,
                 label: {
                   // 面中心点，显示文字的配置
-                  text: features[i].properties.name, // 对应的属性名称
+                  text: this.labelShow ? features[i].properties.name : '', // 对应的属性名称
                   opacity: 1,
                   font_size: 20,
                   color: '#ffffff',
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
new file mode 100644
index 0000000..e7efdc1
--- /dev/null
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description: 管理站图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 10:34:41
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getEarthquakeList } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'EarthquakeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    scale: {
+      type: Number,
+      default: 1
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    size: {
+      type: Number,
+      default: 70
+    }, // 图片尺寸
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, Cesium, layer, height, size } = this
+      const date = getToday()
+      getEarthquakeList(date).then((res) => {
+        if (res.data.length === 0) {
+          this.$message.info('今日无地震')
+        } else {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD53_09'],
+              lng: parseFloat(item['WD53_05'].trim()),
+              lat: parseFloat(item['WD53_06'].trim()),
+              level: item['WD53_07'].trim(),
+              deep: item['WD53_08'].trim(),
+              time: item['WD53_04'].trim()
+            }
+          })
+          for (const item of data) {
+            const img = 'static/images/map/earthquake.png'
+            const graphic = new mars3d.graphic.BillboardEntity({
+              name: '地震',
+              position: [item.lng, item.lat, height],
+              style: {
+                image: img,
+                width: size,
+                height: size,
+                scale: 0.5,
+                clampToGround: true,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+              }
+            })
+            var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
+                        <div style="color:#FFB861">震级：${item.level} 级</div>
+                        <div style="color:#FFB861">震源深度：${item.deep} km</div>
+                        <div style="color:#63AEFF">时间：${item.time}</div>
+                        </div>`
+            graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

diff --git a/src/components/Button/button3.vue b/src/components/Button/button3.vue
new file mode 100644
index 0000000..973aa02
--- /dev/null
+++ b/src/components/Button/button3.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 地图上方
+ * @Author: 王晓颖
+ * @Date: 2020-09-18 09:10:39
+ -->
+<template>
+  <div :class="select?'button-select':'button-no-select'" class="button" @click="change">
+    <span :style="{'font-size':size+'px'}" class="button-text"><slot/>{{ name }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Button2',
+  model: {
+    prop: 'select',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: '18'
+    }, // 文字大小
+    select: {
+      type: Boolean,
+      required: true
+    }// 选择状态
+  },
+  methods: {
+    change() {
+      console.log('button2 click')
+      // 选中则通知上级，二次点击不予处理
+      // if (this.select) {
+      this.$emit('click')
+      // }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .button{
+    cursor: pointer;
+    color: #fff;
+    padding:8px 10px;
+    height:36px;
+    /*background: url("../../assets/images/button/button_blue.png") no-repeat;*/
+    background-size: 100% 100%;
+    margin-right: 5px;
+    text-align: center;
+  }
+  .button-no-select{
+    background: url("../../assets/button_images/button2_blue.png") no-repeat;
+    background-size: 100% 100%;
+    color:#00bdff;
+  }
+  @keyframes bounce {
+    0%,
+    7%,
+    25%,
+    36%,
+    45%,
+    50% {
+      animation-timing-function: ease-out;
+      transform: translate3d(0, 0, 0);
+    }
+
+    15%,
+    16% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -30px, 0);
+    }
+
+    30% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -16px, 0);
+    }
+
+    41% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -8px, 0);
+    }
+
+    47% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -3px, 0);
+    }
+  }
+  .button-select{
+    background: url("../../assets/button_images/button2_yellow.png") no-repeat;
+    color: #fccd14;
+    background-size: 100% 100%;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .button-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue
index 3528987..eb4d420 100644
--- a/src/components/Map/MarsMap.vue
+++ b/src/components/Map/MarsMap.vue
@@ -4,7 +4,7 @@
     ref="map"
     :id="`mars3d-container${mapKey}`"
     :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]">
-  <slot/>
+    <slot/>
   </div>
 </template>
 
@@ -37,6 +37,10 @@
         return {}
       }
     },
+    labelShow: {
+      type: Boolean,
+      default: true
+    }, // 地块上文字是否显示
     // 是否分屏显示
     compare: {
       type: Boolean,
@@ -51,7 +55,17 @@
     customClass: {
       type: String,
       default: ''
-    }
+    },
+    colorful: {
+      type: Boolean,
+      default: false
+    },
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#2F50F3', '#417EE0', '#1D2EB7', '#2E5EA8', '#386ADE', '#2D5BA7', '#4991DB', '#4991DB', '#4C96E6', '#2F50F3', '#0385BD', '#4A94DC']
+      }
+    }// 地块使用的颜色列表
   },
   data() {
     return {
@@ -93,9 +107,7 @@
       var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
       this.map = map
       this[`map${this.mapKey}`] = map
-
       console.log('>>>>> 地图创建成功 >>>>', map)
-
       // 挂载到全局对象下，所有组件通过 this.map 访问
       // Vue.prototype[`map${this.mapKey}`] = map
 
@@ -111,10 +123,8 @@
       map._viewer.scene.backgroundColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor.alpha = 0
+      // 添加各市地块
       this.addProvincePolygon()
-      // this.addLine()
-      this.addPipe()
-      // this.addPipe2()
       this.map.fixedLight = true
       // 抛出事件
       this.$emit('onload', map)
@@ -138,36 +148,6 @@
             width: 5, // 宽度
             height: 20000,
             clampToGround: false
-            // label: {
-            //   // 面中心点，显示文字的配置
-            //   text: '{name}', // 对应的属性名称
-            //   opacity: 1,
-            //   font_size: 20,
-            //   color: '#ffffff',
-            //
-            //   font_family: '楷体',
-            //   outline: true,
-            //   outlineColor: '#ffffff',
-            //   outlineWidth: 1,
-            //
-            //   background: false,
-            //   backgroundColor: '#000000',
-            //   backgroundOpacity: 0.1,
-            //
-            //   font_weight: 'normal',
-            //   font_style: 'normal',
-            //
-            //   scaleByDistance: true,
-            //   scaleByDistance_far: 20000000,
-            //   scaleByDistance_farValue: 0.1,
-            //   scaleByDistance_near: 1000,
-            //   scaleByDistance_nearValue: 1,
-            //
-            //   distanceDisplayCondition: false,
-            //   distanceDisplayCondition_far: 10000,
-            //   distanceDisplayCondition_near: 0,
-            //   visibleDepth: false
-            // }
           }
         },
         flyTo: true
@@ -281,7 +261,7 @@
     },
     // 添加省地块
     addProvincePolygon() {
-      const { mars3d } = this
+      const { mars3d, colorful, colorList } = this
       var graphicLayer = new mars3d.layer.DivLayer()
       this.polygonLayer = graphicLayer
       this.map.addLayer(graphicLayer)
@@ -292,6 +272,7 @@
             const coordinates = (features[i].geometry.coordinates[0][0]).map(item => {
               return [item[0], item[1], 0]
             })
+            const color = colorful ? colorList[i] : '#3a77da'
             const graphic = new mars3d.graphic.PolygonEntity({
               positions: coordinates,
               style: {
@@ -299,16 +280,16 @@
                 // heightReference: mars3d.Cesium.HeightReference.RELATIVE_TO_GROUND,
                 hasShadows: true,
                 diffHeight: 10000.0,
-                color: '#3a77da',
+                color: color,
                 opacity: 1,
-                outline: true,
+                outline: colorful ? false : true,
                 outlineColor: '#4764c9',
                 outlineWidth: 3,
                 outlineOpacity: 1,
                 arcType: mars3d.Cesium.ArcType.GEODESIC,
                 label: {
                   // 面中心点，显示文字的配置
-                  text: features[i].properties.name, // 对应的属性名称
+                  text: this.labelShow ? features[i].properties.name : '', // 对应的属性名称
                   opacity: 1,
                   font_size: 20,
                   color: '#ffffff',
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
new file mode 100644
index 0000000..e7efdc1
--- /dev/null
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description: 管理站图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 10:34:41
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getEarthquakeList } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'EarthquakeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    scale: {
+      type: Number,
+      default: 1
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    size: {
+      type: Number,
+      default: 70
+    }, // 图片尺寸
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, Cesium, layer, height, size } = this
+      const date = getToday()
+      getEarthquakeList(date).then((res) => {
+        if (res.data.length === 0) {
+          this.$message.info('今日无地震')
+        } else {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD53_09'],
+              lng: parseFloat(item['WD53_05'].trim()),
+              lat: parseFloat(item['WD53_06'].trim()),
+              level: item['WD53_07'].trim(),
+              deep: item['WD53_08'].trim(),
+              time: item['WD53_04'].trim()
+            }
+          })
+          for (const item of data) {
+            const img = 'static/images/map/earthquake.png'
+            const graphic = new mars3d.graphic.BillboardEntity({
+              name: '地震',
+              position: [item.lng, item.lat, height],
+              style: {
+                image: img,
+                width: size,
+                height: size,
+                scale: 0.5,
+                clampToGround: true,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+              }
+            })
+            var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
+                        <div style="color:#FFB861">震级：${item.level} 级</div>
+                        <div style="color:#FFB861">震源深度：${item.deep} km</div>
+                        <div style="color:#63AEFF">时间：${item.time}</div>
+                        </div>`
+            graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
new file mode 100644
index 0000000..6845b93
--- /dev/null
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Description: 液化工厂图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:39:31
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'LiquidFactoryLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/liquidFactory.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data[0].data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              url: 'static/gltf/output/yehuagongchang.gltf',
+              style: {
+                scale: 3,
+                heading: 0,
+                minimumPixelSize: 30,
+                clampToGround: true
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

diff --git a/src/components/Button/button3.vue b/src/components/Button/button3.vue
new file mode 100644
index 0000000..973aa02
--- /dev/null
+++ b/src/components/Button/button3.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 地图上方
+ * @Author: 王晓颖
+ * @Date: 2020-09-18 09:10:39
+ -->
+<template>
+  <div :class="select?'button-select':'button-no-select'" class="button" @click="change">
+    <span :style="{'font-size':size+'px'}" class="button-text"><slot/>{{ name }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Button2',
+  model: {
+    prop: 'select',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: '18'
+    }, // 文字大小
+    select: {
+      type: Boolean,
+      required: true
+    }// 选择状态
+  },
+  methods: {
+    change() {
+      console.log('button2 click')
+      // 选中则通知上级，二次点击不予处理
+      // if (this.select) {
+      this.$emit('click')
+      // }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .button{
+    cursor: pointer;
+    color: #fff;
+    padding:8px 10px;
+    height:36px;
+    /*background: url("../../assets/images/button/button_blue.png") no-repeat;*/
+    background-size: 100% 100%;
+    margin-right: 5px;
+    text-align: center;
+  }
+  .button-no-select{
+    background: url("../../assets/button_images/button2_blue.png") no-repeat;
+    background-size: 100% 100%;
+    color:#00bdff;
+  }
+  @keyframes bounce {
+    0%,
+    7%,
+    25%,
+    36%,
+    45%,
+    50% {
+      animation-timing-function: ease-out;
+      transform: translate3d(0, 0, 0);
+    }
+
+    15%,
+    16% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -30px, 0);
+    }
+
+    30% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -16px, 0);
+    }
+
+    41% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -8px, 0);
+    }
+
+    47% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -3px, 0);
+    }
+  }
+  .button-select{
+    background: url("../../assets/button_images/button2_yellow.png") no-repeat;
+    color: #fccd14;
+    background-size: 100% 100%;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .button-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue
index 3528987..eb4d420 100644
--- a/src/components/Map/MarsMap.vue
+++ b/src/components/Map/MarsMap.vue
@@ -4,7 +4,7 @@
     ref="map"
     :id="`mars3d-container${mapKey}`"
     :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]">
-  <slot/>
+    <slot/>
   </div>
 </template>
 
@@ -37,6 +37,10 @@
         return {}
       }
     },
+    labelShow: {
+      type: Boolean,
+      default: true
+    }, // 地块上文字是否显示
     // 是否分屏显示
     compare: {
       type: Boolean,
@@ -51,7 +55,17 @@
     customClass: {
       type: String,
       default: ''
-    }
+    },
+    colorful: {
+      type: Boolean,
+      default: false
+    },
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#2F50F3', '#417EE0', '#1D2EB7', '#2E5EA8', '#386ADE', '#2D5BA7', '#4991DB', '#4991DB', '#4C96E6', '#2F50F3', '#0385BD', '#4A94DC']
+      }
+    }// 地块使用的颜色列表
   },
   data() {
     return {
@@ -93,9 +107,7 @@
       var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
       this.map = map
       this[`map${this.mapKey}`] = map
-
       console.log('>>>>> 地图创建成功 >>>>', map)
-
       // 挂载到全局对象下，所有组件通过 this.map 访问
       // Vue.prototype[`map${this.mapKey}`] = map
 
@@ -111,10 +123,8 @@
       map._viewer.scene.backgroundColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor.alpha = 0
+      // 添加各市地块
       this.addProvincePolygon()
-      // this.addLine()
-      this.addPipe()
-      // this.addPipe2()
       this.map.fixedLight = true
       // 抛出事件
       this.$emit('onload', map)
@@ -138,36 +148,6 @@
             width: 5, // 宽度
             height: 20000,
             clampToGround: false
-            // label: {
-            //   // 面中心点，显示文字的配置
-            //   text: '{name}', // 对应的属性名称
-            //   opacity: 1,
-            //   font_size: 20,
-            //   color: '#ffffff',
-            //
-            //   font_family: '楷体',
-            //   outline: true,
-            //   outlineColor: '#ffffff',
-            //   outlineWidth: 1,
-            //
-            //   background: false,
-            //   backgroundColor: '#000000',
-            //   backgroundOpacity: 0.1,
-            //
-            //   font_weight: 'normal',
-            //   font_style: 'normal',
-            //
-            //   scaleByDistance: true,
-            //   scaleByDistance_far: 20000000,
-            //   scaleByDistance_farValue: 0.1,
-            //   scaleByDistance_near: 1000,
-            //   scaleByDistance_nearValue: 1,
-            //
-            //   distanceDisplayCondition: false,
-            //   distanceDisplayCondition_far: 10000,
-            //   distanceDisplayCondition_near: 0,
-            //   visibleDepth: false
-            // }
           }
         },
         flyTo: true
@@ -281,7 +261,7 @@
     },
     // 添加省地块
     addProvincePolygon() {
-      const { mars3d } = this
+      const { mars3d, colorful, colorList } = this
       var graphicLayer = new mars3d.layer.DivLayer()
       this.polygonLayer = graphicLayer
       this.map.addLayer(graphicLayer)
@@ -292,6 +272,7 @@
             const coordinates = (features[i].geometry.coordinates[0][0]).map(item => {
               return [item[0], item[1], 0]
             })
+            const color = colorful ? colorList[i] : '#3a77da'
             const graphic = new mars3d.graphic.PolygonEntity({
               positions: coordinates,
               style: {
@@ -299,16 +280,16 @@
                 // heightReference: mars3d.Cesium.HeightReference.RELATIVE_TO_GROUND,
                 hasShadows: true,
                 diffHeight: 10000.0,
-                color: '#3a77da',
+                color: color,
                 opacity: 1,
-                outline: true,
+                outline: colorful ? false : true,
                 outlineColor: '#4764c9',
                 outlineWidth: 3,
                 outlineOpacity: 1,
                 arcType: mars3d.Cesium.ArcType.GEODESIC,
                 label: {
                   // 面中心点，显示文字的配置
-                  text: features[i].properties.name, // 对应的属性名称
+                  text: this.labelShow ? features[i].properties.name : '', // 对应的属性名称
                   opacity: 1,
                   font_size: 20,
                   color: '#ffffff',
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
new file mode 100644
index 0000000..e7efdc1
--- /dev/null
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description: 管理站图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 10:34:41
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getEarthquakeList } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'EarthquakeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    scale: {
+      type: Number,
+      default: 1
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    size: {
+      type: Number,
+      default: 70
+    }, // 图片尺寸
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, Cesium, layer, height, size } = this
+      const date = getToday()
+      getEarthquakeList(date).then((res) => {
+        if (res.data.length === 0) {
+          this.$message.info('今日无地震')
+        } else {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD53_09'],
+              lng: parseFloat(item['WD53_05'].trim()),
+              lat: parseFloat(item['WD53_06'].trim()),
+              level: item['WD53_07'].trim(),
+              deep: item['WD53_08'].trim(),
+              time: item['WD53_04'].trim()
+            }
+          })
+          for (const item of data) {
+            const img = 'static/images/map/earthquake.png'
+            const graphic = new mars3d.graphic.BillboardEntity({
+              name: '地震',
+              position: [item.lng, item.lat, height],
+              style: {
+                image: img,
+                width: size,
+                height: size,
+                scale: 0.5,
+                clampToGround: true,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+              }
+            })
+            var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
+                        <div style="color:#FFB861">震级：${item.level} 级</div>
+                        <div style="color:#FFB861">震源深度：${item.deep} km</div>
+                        <div style="color:#63AEFF">时间：${item.time}</div>
+                        </div>`
+            graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
new file mode 100644
index 0000000..6845b93
--- /dev/null
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Description: 液化工厂图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:39:31
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'LiquidFactoryLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/liquidFactory.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data[0].data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              url: 'static/gltf/output/yehuagongchang.gltf',
+              style: {
+                scale: 3,
+                heading: 0,
+                minimumPixelSize: 30,
+                clampToGround: true
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
new file mode 100644
index 0000000..c0aff38
--- /dev/null
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -0,0 +1,117 @@
+<!--
+ * @Description: 管理处图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-03 11:07:09
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'ManageStationLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/manageStation.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                // label: {
+                //   text: station.name,
+                //   font_family: '微软雅黑',
+                //   font_size: 15,
+                //   pixelOffsetY: 10
+                // },
+                url: 'static/gltf/output/guanlizhan.gltf',
+                scale: 5,
+                heading: 90,
+                minimumPixelSize: 30
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

diff --git a/src/components/Button/button3.vue b/src/components/Button/button3.vue
new file mode 100644
index 0000000..973aa02
--- /dev/null
+++ b/src/components/Button/button3.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 地图上方
+ * @Author: 王晓颖
+ * @Date: 2020-09-18 09:10:39
+ -->
+<template>
+  <div :class="select?'button-select':'button-no-select'" class="button" @click="change">
+    <span :style="{'font-size':size+'px'}" class="button-text"><slot/>{{ name }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Button2',
+  model: {
+    prop: 'select',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: '18'
+    }, // 文字大小
+    select: {
+      type: Boolean,
+      required: true
+    }// 选择状态
+  },
+  methods: {
+    change() {
+      console.log('button2 click')
+      // 选中则通知上级，二次点击不予处理
+      // if (this.select) {
+      this.$emit('click')
+      // }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .button{
+    cursor: pointer;
+    color: #fff;
+    padding:8px 10px;
+    height:36px;
+    /*background: url("../../assets/images/button/button_blue.png") no-repeat;*/
+    background-size: 100% 100%;
+    margin-right: 5px;
+    text-align: center;
+  }
+  .button-no-select{
+    background: url("../../assets/button_images/button2_blue.png") no-repeat;
+    background-size: 100% 100%;
+    color:#00bdff;
+  }
+  @keyframes bounce {
+    0%,
+    7%,
+    25%,
+    36%,
+    45%,
+    50% {
+      animation-timing-function: ease-out;
+      transform: translate3d(0, 0, 0);
+    }
+
+    15%,
+    16% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -30px, 0);
+    }
+
+    30% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -16px, 0);
+    }
+
+    41% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -8px, 0);
+    }
+
+    47% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -3px, 0);
+    }
+  }
+  .button-select{
+    background: url("../../assets/button_images/button2_yellow.png") no-repeat;
+    color: #fccd14;
+    background-size: 100% 100%;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .button-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue
index 3528987..eb4d420 100644
--- a/src/components/Map/MarsMap.vue
+++ b/src/components/Map/MarsMap.vue
@@ -4,7 +4,7 @@
     ref="map"
     :id="`mars3d-container${mapKey}`"
     :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]">
-  <slot/>
+    <slot/>
   </div>
 </template>
 
@@ -37,6 +37,10 @@
         return {}
       }
     },
+    labelShow: {
+      type: Boolean,
+      default: true
+    }, // 地块上文字是否显示
     // 是否分屏显示
     compare: {
       type: Boolean,
@@ -51,7 +55,17 @@
     customClass: {
       type: String,
       default: ''
-    }
+    },
+    colorful: {
+      type: Boolean,
+      default: false
+    },
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#2F50F3', '#417EE0', '#1D2EB7', '#2E5EA8', '#386ADE', '#2D5BA7', '#4991DB', '#4991DB', '#4C96E6', '#2F50F3', '#0385BD', '#4A94DC']
+      }
+    }// 地块使用的颜色列表
   },
   data() {
     return {
@@ -93,9 +107,7 @@
       var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
       this.map = map
       this[`map${this.mapKey}`] = map
-
       console.log('>>>>> 地图创建成功 >>>>', map)
-
       // 挂载到全局对象下，所有组件通过 this.map 访问
       // Vue.prototype[`map${this.mapKey}`] = map
 
@@ -111,10 +123,8 @@
       map._viewer.scene.backgroundColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor.alpha = 0
+      // 添加各市地块
       this.addProvincePolygon()
-      // this.addLine()
-      this.addPipe()
-      // this.addPipe2()
       this.map.fixedLight = true
       // 抛出事件
       this.$emit('onload', map)
@@ -138,36 +148,6 @@
             width: 5, // 宽度
             height: 20000,
             clampToGround: false
-            // label: {
-            //   // 面中心点，显示文字的配置
-            //   text: '{name}', // 对应的属性名称
-            //   opacity: 1,
-            //   font_size: 20,
-            //   color: '#ffffff',
-            //
-            //   font_family: '楷体',
-            //   outline: true,
-            //   outlineColor: '#ffffff',
-            //   outlineWidth: 1,
-            //
-            //   background: false,
-            //   backgroundColor: '#000000',
-            //   backgroundOpacity: 0.1,
-            //
-            //   font_weight: 'normal',
-            //   font_style: 'normal',
-            //
-            //   scaleByDistance: true,
-            //   scaleByDistance_far: 20000000,
-            //   scaleByDistance_farValue: 0.1,
-            //   scaleByDistance_near: 1000,
-            //   scaleByDistance_nearValue: 1,
-            //
-            //   distanceDisplayCondition: false,
-            //   distanceDisplayCondition_far: 10000,
-            //   distanceDisplayCondition_near: 0,
-            //   visibleDepth: false
-            // }
           }
         },
         flyTo: true
@@ -281,7 +261,7 @@
     },
     // 添加省地块
     addProvincePolygon() {
-      const { mars3d } = this
+      const { mars3d, colorful, colorList } = this
       var graphicLayer = new mars3d.layer.DivLayer()
       this.polygonLayer = graphicLayer
       this.map.addLayer(graphicLayer)
@@ -292,6 +272,7 @@
             const coordinates = (features[i].geometry.coordinates[0][0]).map(item => {
               return [item[0], item[1], 0]
             })
+            const color = colorful ? colorList[i] : '#3a77da'
             const graphic = new mars3d.graphic.PolygonEntity({
               positions: coordinates,
               style: {
@@ -299,16 +280,16 @@
                 // heightReference: mars3d.Cesium.HeightReference.RELATIVE_TO_GROUND,
                 hasShadows: true,
                 diffHeight: 10000.0,
-                color: '#3a77da',
+                color: color,
                 opacity: 1,
-                outline: true,
+                outline: colorful ? false : true,
                 outlineColor: '#4764c9',
                 outlineWidth: 3,
                 outlineOpacity: 1,
                 arcType: mars3d.Cesium.ArcType.GEODESIC,
                 label: {
                   // 面中心点，显示文字的配置
-                  text: features[i].properties.name, // 对应的属性名称
+                  text: this.labelShow ? features[i].properties.name : '', // 对应的属性名称
                   opacity: 1,
                   font_size: 20,
                   color: '#ffffff',
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
new file mode 100644
index 0000000..e7efdc1
--- /dev/null
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description: 管理站图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 10:34:41
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getEarthquakeList } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'EarthquakeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    scale: {
+      type: Number,
+      default: 1
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    size: {
+      type: Number,
+      default: 70
+    }, // 图片尺寸
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, Cesium, layer, height, size } = this
+      const date = getToday()
+      getEarthquakeList(date).then((res) => {
+        if (res.data.length === 0) {
+          this.$message.info('今日无地震')
+        } else {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD53_09'],
+              lng: parseFloat(item['WD53_05'].trim()),
+              lat: parseFloat(item['WD53_06'].trim()),
+              level: item['WD53_07'].trim(),
+              deep: item['WD53_08'].trim(),
+              time: item['WD53_04'].trim()
+            }
+          })
+          for (const item of data) {
+            const img = 'static/images/map/earthquake.png'
+            const graphic = new mars3d.graphic.BillboardEntity({
+              name: '地震',
+              position: [item.lng, item.lat, height],
+              style: {
+                image: img,
+                width: size,
+                height: size,
+                scale: 0.5,
+                clampToGround: true,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+              }
+            })
+            var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
+                        <div style="color:#FFB861">震级：${item.level} 级</div>
+                        <div style="color:#FFB861">震源深度：${item.deep} km</div>
+                        <div style="color:#63AEFF">时间：${item.time}</div>
+                        </div>`
+            graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
new file mode 100644
index 0000000..6845b93
--- /dev/null
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Description: 液化工厂图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:39:31
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'LiquidFactoryLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/liquidFactory.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data[0].data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              url: 'static/gltf/output/yehuagongchang.gltf',
+              style: {
+                scale: 3,
+                heading: 0,
+                minimumPixelSize: 30,
+                clampToGround: true
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
new file mode 100644
index 0000000..c0aff38
--- /dev/null
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -0,0 +1,117 @@
+<!--
+ * @Description: 管理处图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-03 11:07:09
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'ManageStationLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/manageStation.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                // label: {
+                //   text: station.name,
+                //   font_family: '微软雅黑',
+                //   font_size: 15,
+                //   pixelOffsetY: 10
+                // },
+                url: 'static/gltf/output/guanlizhan.gltf',
+                scale: 5,
+                heading: 90,
+                minimumPixelSize: 30
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
new file mode 100644
index 0000000..64142a7
--- /dev/null
+++ b/src/components/Map/components/pipeLayer.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 管线图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:55:15
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+export default {
+  name: 'PipeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    glowPower: {
+      type: Number,
+      default: 0.02
+    }, // 发光强度
+    opacity: {
+      type: Number,
+      default: 0.9
+    }, // 透明度
+    width: {
+      type: Number,
+      default: 10
+    }, // 线宽度
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    color: {
+      type: String,
+      default: '#92ffdf'
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.initLayer()
+      } else {
+        this.removeLayer()
+      }
+    }
+  },
+  methods: {
+    load() {
+      if (this.show) {
+        this.initLayer()
+      }
+    },
+    initLayer() {
+      const { mars3d, map, color, width, glowPower, opacity } = this
+      if (map) {
+        if (this.show && this.layer) { // 如果已经有图层了，先移除
+          this.removeLayer()
+        }
+        this.layer = new mars3d.layer.GeoJsonLayer({
+          type: 'geojson',
+          url: 'static/geojson/pipe.json',
+          symbol: {
+            styleOptions: {
+              materialType: 'PolylineGlow',
+              glowPower: glowPower, // 发光强度
+              width: width, // 线宽
+              color: color,
+              opacity: opacity,
+              clampToGround: false
+            }
+          },
+          show: true
+        })
+        map.addLayer(this.layer)
+        this.loadData()
+      }
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

diff --git a/src/components/Button/button3.vue b/src/components/Button/button3.vue
new file mode 100644
index 0000000..973aa02
--- /dev/null
+++ b/src/components/Button/button3.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 地图上方
+ * @Author: 王晓颖
+ * @Date: 2020-09-18 09:10:39
+ -->
+<template>
+  <div :class="select?'button-select':'button-no-select'" class="button" @click="change">
+    <span :style="{'font-size':size+'px'}" class="button-text"><slot/>{{ name }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Button2',
+  model: {
+    prop: 'select',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: '18'
+    }, // 文字大小
+    select: {
+      type: Boolean,
+      required: true
+    }// 选择状态
+  },
+  methods: {
+    change() {
+      console.log('button2 click')
+      // 选中则通知上级，二次点击不予处理
+      // if (this.select) {
+      this.$emit('click')
+      // }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .button{
+    cursor: pointer;
+    color: #fff;
+    padding:8px 10px;
+    height:36px;
+    /*background: url("../../assets/images/button/button_blue.png") no-repeat;*/
+    background-size: 100% 100%;
+    margin-right: 5px;
+    text-align: center;
+  }
+  .button-no-select{
+    background: url("../../assets/button_images/button2_blue.png") no-repeat;
+    background-size: 100% 100%;
+    color:#00bdff;
+  }
+  @keyframes bounce {
+    0%,
+    7%,
+    25%,
+    36%,
+    45%,
+    50% {
+      animation-timing-function: ease-out;
+      transform: translate3d(0, 0, 0);
+    }
+
+    15%,
+    16% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -30px, 0);
+    }
+
+    30% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -16px, 0);
+    }
+
+    41% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -8px, 0);
+    }
+
+    47% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -3px, 0);
+    }
+  }
+  .button-select{
+    background: url("../../assets/button_images/button2_yellow.png") no-repeat;
+    color: #fccd14;
+    background-size: 100% 100%;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .button-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue
index 3528987..eb4d420 100644
--- a/src/components/Map/MarsMap.vue
+++ b/src/components/Map/MarsMap.vue
@@ -4,7 +4,7 @@
     ref="map"
     :id="`mars3d-container${mapKey}`"
     :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]">
-  <slot/>
+    <slot/>
   </div>
 </template>
 
@@ -37,6 +37,10 @@
         return {}
       }
     },
+    labelShow: {
+      type: Boolean,
+      default: true
+    }, // 地块上文字是否显示
     // 是否分屏显示
     compare: {
       type: Boolean,
@@ -51,7 +55,17 @@
     customClass: {
       type: String,
       default: ''
-    }
+    },
+    colorful: {
+      type: Boolean,
+      default: false
+    },
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#2F50F3', '#417EE0', '#1D2EB7', '#2E5EA8', '#386ADE', '#2D5BA7', '#4991DB', '#4991DB', '#4C96E6', '#2F50F3', '#0385BD', '#4A94DC']
+      }
+    }// 地块使用的颜色列表
   },
   data() {
     return {
@@ -93,9 +107,7 @@
       var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
       this.map = map
       this[`map${this.mapKey}`] = map
-
       console.log('>>>>> 地图创建成功 >>>>', map)
-
       // 挂载到全局对象下，所有组件通过 this.map 访问
       // Vue.prototype[`map${this.mapKey}`] = map
 
@@ -111,10 +123,8 @@
       map._viewer.scene.backgroundColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor.alpha = 0
+      // 添加各市地块
       this.addProvincePolygon()
-      // this.addLine()
-      this.addPipe()
-      // this.addPipe2()
       this.map.fixedLight = true
       // 抛出事件
       this.$emit('onload', map)
@@ -138,36 +148,6 @@
             width: 5, // 宽度
             height: 20000,
             clampToGround: false
-            // label: {
-            //   // 面中心点，显示文字的配置
-            //   text: '{name}', // 对应的属性名称
-            //   opacity: 1,
-            //   font_size: 20,
-            //   color: '#ffffff',
-            //
-            //   font_family: '楷体',
-            //   outline: true,
-            //   outlineColor: '#ffffff',
-            //   outlineWidth: 1,
-            //
-            //   background: false,
-            //   backgroundColor: '#000000',
-            //   backgroundOpacity: 0.1,
-            //
-            //   font_weight: 'normal',
-            //   font_style: 'normal',
-            //
-            //   scaleByDistance: true,
-            //   scaleByDistance_far: 20000000,
-            //   scaleByDistance_farValue: 0.1,
-            //   scaleByDistance_near: 1000,
-            //   scaleByDistance_nearValue: 1,
-            //
-            //   distanceDisplayCondition: false,
-            //   distanceDisplayCondition_far: 10000,
-            //   distanceDisplayCondition_near: 0,
-            //   visibleDepth: false
-            // }
           }
         },
         flyTo: true
@@ -281,7 +261,7 @@
     },
     // 添加省地块
     addProvincePolygon() {
-      const { mars3d } = this
+      const { mars3d, colorful, colorList } = this
       var graphicLayer = new mars3d.layer.DivLayer()
       this.polygonLayer = graphicLayer
       this.map.addLayer(graphicLayer)
@@ -292,6 +272,7 @@
             const coordinates = (features[i].geometry.coordinates[0][0]).map(item => {
               return [item[0], item[1], 0]
             })
+            const color = colorful ? colorList[i] : '#3a77da'
             const graphic = new mars3d.graphic.PolygonEntity({
               positions: coordinates,
               style: {
@@ -299,16 +280,16 @@
                 // heightReference: mars3d.Cesium.HeightReference.RELATIVE_TO_GROUND,
                 hasShadows: true,
                 diffHeight: 10000.0,
-                color: '#3a77da',
+                color: color,
                 opacity: 1,
-                outline: true,
+                outline: colorful ? false : true,
                 outlineColor: '#4764c9',
                 outlineWidth: 3,
                 outlineOpacity: 1,
                 arcType: mars3d.Cesium.ArcType.GEODESIC,
                 label: {
                   // 面中心点，显示文字的配置
-                  text: features[i].properties.name, // 对应的属性名称
+                  text: this.labelShow ? features[i].properties.name : '', // 对应的属性名称
                   opacity: 1,
                   font_size: 20,
                   color: '#ffffff',
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
new file mode 100644
index 0000000..e7efdc1
--- /dev/null
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description: 管理站图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 10:34:41
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getEarthquakeList } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'EarthquakeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    scale: {
+      type: Number,
+      default: 1
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    size: {
+      type: Number,
+      default: 70
+    }, // 图片尺寸
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, Cesium, layer, height, size } = this
+      const date = getToday()
+      getEarthquakeList(date).then((res) => {
+        if (res.data.length === 0) {
+          this.$message.info('今日无地震')
+        } else {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD53_09'],
+              lng: parseFloat(item['WD53_05'].trim()),
+              lat: parseFloat(item['WD53_06'].trim()),
+              level: item['WD53_07'].trim(),
+              deep: item['WD53_08'].trim(),
+              time: item['WD53_04'].trim()
+            }
+          })
+          for (const item of data) {
+            const img = 'static/images/map/earthquake.png'
+            const graphic = new mars3d.graphic.BillboardEntity({
+              name: '地震',
+              position: [item.lng, item.lat, height],
+              style: {
+                image: img,
+                width: size,
+                height: size,
+                scale: 0.5,
+                clampToGround: true,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+              }
+            })
+            var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
+                        <div style="color:#FFB861">震级：${item.level} 级</div>
+                        <div style="color:#FFB861">震源深度：${item.deep} km</div>
+                        <div style="color:#63AEFF">时间：${item.time}</div>
+                        </div>`
+            graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
new file mode 100644
index 0000000..6845b93
--- /dev/null
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Description: 液化工厂图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:39:31
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'LiquidFactoryLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/liquidFactory.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data[0].data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              url: 'static/gltf/output/yehuagongchang.gltf',
+              style: {
+                scale: 3,
+                heading: 0,
+                minimumPixelSize: 30,
+                clampToGround: true
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
new file mode 100644
index 0000000..c0aff38
--- /dev/null
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -0,0 +1,117 @@
+<!--
+ * @Description: 管理处图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-03 11:07:09
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'ManageStationLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/manageStation.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                // label: {
+                //   text: station.name,
+                //   font_family: '微软雅黑',
+                //   font_size: 15,
+                //   pixelOffsetY: 10
+                // },
+                url: 'static/gltf/output/guanlizhan.gltf',
+                scale: 5,
+                heading: 90,
+                minimumPixelSize: 30
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
new file mode 100644
index 0000000..64142a7
--- /dev/null
+++ b/src/components/Map/components/pipeLayer.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 管线图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:55:15
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+export default {
+  name: 'PipeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    glowPower: {
+      type: Number,
+      default: 0.02
+    }, // 发光强度
+    opacity: {
+      type: Number,
+      default: 0.9
+    }, // 透明度
+    width: {
+      type: Number,
+      default: 10
+    }, // 线宽度
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    color: {
+      type: String,
+      default: '#92ffdf'
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.initLayer()
+      } else {
+        this.removeLayer()
+      }
+    }
+  },
+  methods: {
+    load() {
+      if (this.show) {
+        this.initLayer()
+      }
+    },
+    initLayer() {
+      const { mars3d, map, color, width, glowPower, opacity } = this
+      if (map) {
+        if (this.show && this.layer) { // 如果已经有图层了，先移除
+          this.removeLayer()
+        }
+        this.layer = new mars3d.layer.GeoJsonLayer({
+          type: 'geojson',
+          url: 'static/geojson/pipe.json',
+          symbol: {
+            styleOptions: {
+              materialType: 'PolylineGlow',
+              glowPower: glowPower, // 发光强度
+              width: width, // 线宽
+              color: color,
+              opacity: opacity,
+              clampToGround: false
+            }
+          },
+          show: true
+        })
+        map.addLayer(this.layer)
+        this.loadData()
+      }
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
new file mode 100644
index 0000000..203bd89
--- /dev/null
+++ b/src/components/Map/components/routeLayer.vue
@@ -0,0 +1,133 @@
+<!--
+ * @Description: 巡线图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 09:09:15
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getRoutesData } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'RouteLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 颜色类型：single单色柱，multi多色柱
+    height: {
+      type: Number,
+      default: 10
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [], // 完整数据
+      filteredData: [] // 过滤后的数据
+    }
+  },
+  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.DivLayer()
+        this.layer = graphicLayer
+        map.addLayer(graphicLayer)
+        this.loadData()
+      }
+    },
+    loadData() {
+      const { mars3d, Cesium, layer, height } = this
+      const date = getToday()
+      getRoutesData(date).then((res) => {
+        if (res.status === 200) {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD60_03'],
+              lng: parseFloat(item['WD60_05']),
+              lat: parseFloat(item['WD60_06']),
+              locationdate: item['WD60_04'],
+              time: new Date(item['WD60_04']),
+              duty: item['WD60_11'],
+              sex: item['WD60_09'],
+              phone: item['WD60_10'],
+              idcard: item['WD60_12'],
+              unitname: item['WD60_08']
+            }
+          })
+          this.filteredData = []
+          // 遍历所有数据，去除重复数据
+          for (const route of data) {
+            // 去filteredData里查找是否有同一个人
+            const result = this.filteredData.findIndex(item => item.name == route.name && item.phone == route.phone)
+            if (result === -1) { // 查找不到直接添加
+              this.filteredData.push(route)
+            } else { // 查找到，对比时间，时间大则替换
+              if (this.filteredData[result].time < route.time) {
+                this.filteredData.splice(result, 1, route)
+              }
+            }
+          }
+          // 遍历过滤后的数据，添加到地图
+          for (const route of this.filteredData) {
+            const graphic = new mars3d.graphic.DivGraphic({
+              position: [route.lng, route.lat, height],
+              style: {
+                html: '<img src="static/images/map/pe02.gif" style="width:25px;height:25px;" ></img>',
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000), // 按视距距离显示
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                attr: route
+              },
+              attr: route,
+              pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

diff --git a/src/components/Button/button3.vue b/src/components/Button/button3.vue
new file mode 100644
index 0000000..973aa02
--- /dev/null
+++ b/src/components/Button/button3.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 地图上方
+ * @Author: 王晓颖
+ * @Date: 2020-09-18 09:10:39
+ -->
+<template>
+  <div :class="select?'button-select':'button-no-select'" class="button" @click="change">
+    <span :style="{'font-size':size+'px'}" class="button-text"><slot/>{{ name }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Button2',
+  model: {
+    prop: 'select',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: '18'
+    }, // 文字大小
+    select: {
+      type: Boolean,
+      required: true
+    }// 选择状态
+  },
+  methods: {
+    change() {
+      console.log('button2 click')
+      // 选中则通知上级，二次点击不予处理
+      // if (this.select) {
+      this.$emit('click')
+      // }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .button{
+    cursor: pointer;
+    color: #fff;
+    padding:8px 10px;
+    height:36px;
+    /*background: url("../../assets/images/button/button_blue.png") no-repeat;*/
+    background-size: 100% 100%;
+    margin-right: 5px;
+    text-align: center;
+  }
+  .button-no-select{
+    background: url("../../assets/button_images/button2_blue.png") no-repeat;
+    background-size: 100% 100%;
+    color:#00bdff;
+  }
+  @keyframes bounce {
+    0%,
+    7%,
+    25%,
+    36%,
+    45%,
+    50% {
+      animation-timing-function: ease-out;
+      transform: translate3d(0, 0, 0);
+    }
+
+    15%,
+    16% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -30px, 0);
+    }
+
+    30% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -16px, 0);
+    }
+
+    41% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -8px, 0);
+    }
+
+    47% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -3px, 0);
+    }
+  }
+  .button-select{
+    background: url("../../assets/button_images/button2_yellow.png") no-repeat;
+    color: #fccd14;
+    background-size: 100% 100%;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .button-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue
index 3528987..eb4d420 100644
--- a/src/components/Map/MarsMap.vue
+++ b/src/components/Map/MarsMap.vue
@@ -4,7 +4,7 @@
     ref="map"
     :id="`mars3d-container${mapKey}`"
     :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]">
-  <slot/>
+    <slot/>
   </div>
 </template>
 
@@ -37,6 +37,10 @@
         return {}
       }
     },
+    labelShow: {
+      type: Boolean,
+      default: true
+    }, // 地块上文字是否显示
     // 是否分屏显示
     compare: {
       type: Boolean,
@@ -51,7 +55,17 @@
     customClass: {
       type: String,
       default: ''
-    }
+    },
+    colorful: {
+      type: Boolean,
+      default: false
+    },
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#2F50F3', '#417EE0', '#1D2EB7', '#2E5EA8', '#386ADE', '#2D5BA7', '#4991DB', '#4991DB', '#4C96E6', '#2F50F3', '#0385BD', '#4A94DC']
+      }
+    }// 地块使用的颜色列表
   },
   data() {
     return {
@@ -93,9 +107,7 @@
       var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
       this.map = map
       this[`map${this.mapKey}`] = map
-
       console.log('>>>>> 地图创建成功 >>>>', map)
-
       // 挂载到全局对象下，所有组件通过 this.map 访问
       // Vue.prototype[`map${this.mapKey}`] = map
 
@@ -111,10 +123,8 @@
       map._viewer.scene.backgroundColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor.alpha = 0
+      // 添加各市地块
       this.addProvincePolygon()
-      // this.addLine()
-      this.addPipe()
-      // this.addPipe2()
       this.map.fixedLight = true
       // 抛出事件
       this.$emit('onload', map)
@@ -138,36 +148,6 @@
             width: 5, // 宽度
             height: 20000,
             clampToGround: false
-            // label: {
-            //   // 面中心点，显示文字的配置
-            //   text: '{name}', // 对应的属性名称
-            //   opacity: 1,
-            //   font_size: 20,
-            //   color: '#ffffff',
-            //
-            //   font_family: '楷体',
-            //   outline: true,
-            //   outlineColor: '#ffffff',
-            //   outlineWidth: 1,
-            //
-            //   background: false,
-            //   backgroundColor: '#000000',
-            //   backgroundOpacity: 0.1,
-            //
-            //   font_weight: 'normal',
-            //   font_style: 'normal',
-            //
-            //   scaleByDistance: true,
-            //   scaleByDistance_far: 20000000,
-            //   scaleByDistance_farValue: 0.1,
-            //   scaleByDistance_near: 1000,
-            //   scaleByDistance_nearValue: 1,
-            //
-            //   distanceDisplayCondition: false,
-            //   distanceDisplayCondition_far: 10000,
-            //   distanceDisplayCondition_near: 0,
-            //   visibleDepth: false
-            // }
           }
         },
         flyTo: true
@@ -281,7 +261,7 @@
     },
     // 添加省地块
     addProvincePolygon() {
-      const { mars3d } = this
+      const { mars3d, colorful, colorList } = this
       var graphicLayer = new mars3d.layer.DivLayer()
       this.polygonLayer = graphicLayer
       this.map.addLayer(graphicLayer)
@@ -292,6 +272,7 @@
             const coordinates = (features[i].geometry.coordinates[0][0]).map(item => {
               return [item[0], item[1], 0]
             })
+            const color = colorful ? colorList[i] : '#3a77da'
             const graphic = new mars3d.graphic.PolygonEntity({
               positions: coordinates,
               style: {
@@ -299,16 +280,16 @@
                 // heightReference: mars3d.Cesium.HeightReference.RELATIVE_TO_GROUND,
                 hasShadows: true,
                 diffHeight: 10000.0,
-                color: '#3a77da',
+                color: color,
                 opacity: 1,
-                outline: true,
+                outline: colorful ? false : true,
                 outlineColor: '#4764c9',
                 outlineWidth: 3,
                 outlineOpacity: 1,
                 arcType: mars3d.Cesium.ArcType.GEODESIC,
                 label: {
                   // 面中心点，显示文字的配置
-                  text: features[i].properties.name, // 对应的属性名称
+                  text: this.labelShow ? features[i].properties.name : '', // 对应的属性名称
                   opacity: 1,
                   font_size: 20,
                   color: '#ffffff',
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
new file mode 100644
index 0000000..e7efdc1
--- /dev/null
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description: 管理站图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 10:34:41
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getEarthquakeList } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'EarthquakeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    scale: {
+      type: Number,
+      default: 1
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    size: {
+      type: Number,
+      default: 70
+    }, // 图片尺寸
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, Cesium, layer, height, size } = this
+      const date = getToday()
+      getEarthquakeList(date).then((res) => {
+        if (res.data.length === 0) {
+          this.$message.info('今日无地震')
+        } else {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD53_09'],
+              lng: parseFloat(item['WD53_05'].trim()),
+              lat: parseFloat(item['WD53_06'].trim()),
+              level: item['WD53_07'].trim(),
+              deep: item['WD53_08'].trim(),
+              time: item['WD53_04'].trim()
+            }
+          })
+          for (const item of data) {
+            const img = 'static/images/map/earthquake.png'
+            const graphic = new mars3d.graphic.BillboardEntity({
+              name: '地震',
+              position: [item.lng, item.lat, height],
+              style: {
+                image: img,
+                width: size,
+                height: size,
+                scale: 0.5,
+                clampToGround: true,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+              }
+            })
+            var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
+                        <div style="color:#FFB861">震级：${item.level} 级</div>
+                        <div style="color:#FFB861">震源深度：${item.deep} km</div>
+                        <div style="color:#63AEFF">时间：${item.time}</div>
+                        </div>`
+            graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
new file mode 100644
index 0000000..6845b93
--- /dev/null
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Description: 液化工厂图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:39:31
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'LiquidFactoryLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/liquidFactory.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data[0].data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              url: 'static/gltf/output/yehuagongchang.gltf',
+              style: {
+                scale: 3,
+                heading: 0,
+                minimumPixelSize: 30,
+                clampToGround: true
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
new file mode 100644
index 0000000..c0aff38
--- /dev/null
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -0,0 +1,117 @@
+<!--
+ * @Description: 管理处图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-03 11:07:09
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'ManageStationLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/manageStation.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                // label: {
+                //   text: station.name,
+                //   font_family: '微软雅黑',
+                //   font_size: 15,
+                //   pixelOffsetY: 10
+                // },
+                url: 'static/gltf/output/guanlizhan.gltf',
+                scale: 5,
+                heading: 90,
+                minimumPixelSize: 30
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
new file mode 100644
index 0000000..64142a7
--- /dev/null
+++ b/src/components/Map/components/pipeLayer.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 管线图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:55:15
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+export default {
+  name: 'PipeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    glowPower: {
+      type: Number,
+      default: 0.02
+    }, // 发光强度
+    opacity: {
+      type: Number,
+      default: 0.9
+    }, // 透明度
+    width: {
+      type: Number,
+      default: 10
+    }, // 线宽度
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    color: {
+      type: String,
+      default: '#92ffdf'
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.initLayer()
+      } else {
+        this.removeLayer()
+      }
+    }
+  },
+  methods: {
+    load() {
+      if (this.show) {
+        this.initLayer()
+      }
+    },
+    initLayer() {
+      const { mars3d, map, color, width, glowPower, opacity } = this
+      if (map) {
+        if (this.show && this.layer) { // 如果已经有图层了，先移除
+          this.removeLayer()
+        }
+        this.layer = new mars3d.layer.GeoJsonLayer({
+          type: 'geojson',
+          url: 'static/geojson/pipe.json',
+          symbol: {
+            styleOptions: {
+              materialType: 'PolylineGlow',
+              glowPower: glowPower, // 发光强度
+              width: width, // 线宽
+              color: color,
+              opacity: opacity,
+              clampToGround: false
+            }
+          },
+          show: true
+        })
+        map.addLayer(this.layer)
+        this.loadData()
+      }
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
new file mode 100644
index 0000000..203bd89
--- /dev/null
+++ b/src/components/Map/components/routeLayer.vue
@@ -0,0 +1,133 @@
+<!--
+ * @Description: 巡线图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 09:09:15
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getRoutesData } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'RouteLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 颜色类型：single单色柱，multi多色柱
+    height: {
+      type: Number,
+      default: 10
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [], // 完整数据
+      filteredData: [] // 过滤后的数据
+    }
+  },
+  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.DivLayer()
+        this.layer = graphicLayer
+        map.addLayer(graphicLayer)
+        this.loadData()
+      }
+    },
+    loadData() {
+      const { mars3d, Cesium, layer, height } = this
+      const date = getToday()
+      getRoutesData(date).then((res) => {
+        if (res.status === 200) {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD60_03'],
+              lng: parseFloat(item['WD60_05']),
+              lat: parseFloat(item['WD60_06']),
+              locationdate: item['WD60_04'],
+              time: new Date(item['WD60_04']),
+              duty: item['WD60_11'],
+              sex: item['WD60_09'],
+              phone: item['WD60_10'],
+              idcard: item['WD60_12'],
+              unitname: item['WD60_08']
+            }
+          })
+          this.filteredData = []
+          // 遍历所有数据，去除重复数据
+          for (const route of data) {
+            // 去filteredData里查找是否有同一个人
+            const result = this.filteredData.findIndex(item => item.name == route.name && item.phone == route.phone)
+            if (result === -1) { // 查找不到直接添加
+              this.filteredData.push(route)
+            } else { // 查找到，对比时间，时间大则替换
+              if (this.filteredData[result].time < route.time) {
+                this.filteredData.splice(result, 1, route)
+              }
+            }
+          }
+          // 遍历过滤后的数据，添加到地图
+          for (const route of this.filteredData) {
+            const graphic = new mars3d.graphic.DivGraphic({
+              position: [route.lng, route.lat, height],
+              style: {
+                html: '<img src="static/images/map/pe02.gif" style="width:25px;height:25px;" ></img>',
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000), // 按视距距离显示
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                attr: route
+              },
+              attr: route,
+              pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/stationLayer.vue b/src/components/Map/components/stationLayer.vue
new file mode 100644
index 0000000..444c7d1
--- /dev/null
+++ b/src/components/Map/components/stationLayer.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Description: 站场图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 12:01:36
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'StationLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/station.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                label: station.name,
+                url: 'static/gltf/output/zhanchang.gltf',
+                scale: 5,
+                heading: 90,
+                minimumPixelSize: 30
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

diff --git a/src/components/Button/button3.vue b/src/components/Button/button3.vue
new file mode 100644
index 0000000..973aa02
--- /dev/null
+++ b/src/components/Button/button3.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 地图上方
+ * @Author: 王晓颖
+ * @Date: 2020-09-18 09:10:39
+ -->
+<template>
+  <div :class="select?'button-select':'button-no-select'" class="button" @click="change">
+    <span :style="{'font-size':size+'px'}" class="button-text"><slot/>{{ name }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Button2',
+  model: {
+    prop: 'select',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: '18'
+    }, // 文字大小
+    select: {
+      type: Boolean,
+      required: true
+    }// 选择状态
+  },
+  methods: {
+    change() {
+      console.log('button2 click')
+      // 选中则通知上级，二次点击不予处理
+      // if (this.select) {
+      this.$emit('click')
+      // }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .button{
+    cursor: pointer;
+    color: #fff;
+    padding:8px 10px;
+    height:36px;
+    /*background: url("../../assets/images/button/button_blue.png") no-repeat;*/
+    background-size: 100% 100%;
+    margin-right: 5px;
+    text-align: center;
+  }
+  .button-no-select{
+    background: url("../../assets/button_images/button2_blue.png") no-repeat;
+    background-size: 100% 100%;
+    color:#00bdff;
+  }
+  @keyframes bounce {
+    0%,
+    7%,
+    25%,
+    36%,
+    45%,
+    50% {
+      animation-timing-function: ease-out;
+      transform: translate3d(0, 0, 0);
+    }
+
+    15%,
+    16% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -30px, 0);
+    }
+
+    30% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -16px, 0);
+    }
+
+    41% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -8px, 0);
+    }
+
+    47% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -3px, 0);
+    }
+  }
+  .button-select{
+    background: url("../../assets/button_images/button2_yellow.png") no-repeat;
+    color: #fccd14;
+    background-size: 100% 100%;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .button-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue
index 3528987..eb4d420 100644
--- a/src/components/Map/MarsMap.vue
+++ b/src/components/Map/MarsMap.vue
@@ -4,7 +4,7 @@
     ref="map"
     :id="`mars3d-container${mapKey}`"
     :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]">
-  <slot/>
+    <slot/>
   </div>
 </template>
 
@@ -37,6 +37,10 @@
         return {}
       }
     },
+    labelShow: {
+      type: Boolean,
+      default: true
+    }, // 地块上文字是否显示
     // 是否分屏显示
     compare: {
       type: Boolean,
@@ -51,7 +55,17 @@
     customClass: {
       type: String,
       default: ''
-    }
+    },
+    colorful: {
+      type: Boolean,
+      default: false
+    },
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#2F50F3', '#417EE0', '#1D2EB7', '#2E5EA8', '#386ADE', '#2D5BA7', '#4991DB', '#4991DB', '#4C96E6', '#2F50F3', '#0385BD', '#4A94DC']
+      }
+    }// 地块使用的颜色列表
   },
   data() {
     return {
@@ -93,9 +107,7 @@
       var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
       this.map = map
       this[`map${this.mapKey}`] = map
-
       console.log('>>>>> 地图创建成功 >>>>', map)
-
       // 挂载到全局对象下，所有组件通过 this.map 访问
       // Vue.prototype[`map${this.mapKey}`] = map
 
@@ -111,10 +123,8 @@
       map._viewer.scene.backgroundColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor.alpha = 0
+      // 添加各市地块
       this.addProvincePolygon()
-      // this.addLine()
-      this.addPipe()
-      // this.addPipe2()
       this.map.fixedLight = true
       // 抛出事件
       this.$emit('onload', map)
@@ -138,36 +148,6 @@
             width: 5, // 宽度
             height: 20000,
             clampToGround: false
-            // label: {
-            //   // 面中心点，显示文字的配置
-            //   text: '{name}', // 对应的属性名称
-            //   opacity: 1,
-            //   font_size: 20,
-            //   color: '#ffffff',
-            //
-            //   font_family: '楷体',
-            //   outline: true,
-            //   outlineColor: '#ffffff',
-            //   outlineWidth: 1,
-            //
-            //   background: false,
-            //   backgroundColor: '#000000',
-            //   backgroundOpacity: 0.1,
-            //
-            //   font_weight: 'normal',
-            //   font_style: 'normal',
-            //
-            //   scaleByDistance: true,
-            //   scaleByDistance_far: 20000000,
-            //   scaleByDistance_farValue: 0.1,
-            //   scaleByDistance_near: 1000,
-            //   scaleByDistance_nearValue: 1,
-            //
-            //   distanceDisplayCondition: false,
-            //   distanceDisplayCondition_far: 10000,
-            //   distanceDisplayCondition_near: 0,
-            //   visibleDepth: false
-            // }
           }
         },
         flyTo: true
@@ -281,7 +261,7 @@
     },
     // 添加省地块
     addProvincePolygon() {
-      const { mars3d } = this
+      const { mars3d, colorful, colorList } = this
       var graphicLayer = new mars3d.layer.DivLayer()
       this.polygonLayer = graphicLayer
       this.map.addLayer(graphicLayer)
@@ -292,6 +272,7 @@
             const coordinates = (features[i].geometry.coordinates[0][0]).map(item => {
               return [item[0], item[1], 0]
             })
+            const color = colorful ? colorList[i] : '#3a77da'
             const graphic = new mars3d.graphic.PolygonEntity({
               positions: coordinates,
               style: {
@@ -299,16 +280,16 @@
                 // heightReference: mars3d.Cesium.HeightReference.RELATIVE_TO_GROUND,
                 hasShadows: true,
                 diffHeight: 10000.0,
-                color: '#3a77da',
+                color: color,
                 opacity: 1,
-                outline: true,
+                outline: colorful ? false : true,
                 outlineColor: '#4764c9',
                 outlineWidth: 3,
                 outlineOpacity: 1,
                 arcType: mars3d.Cesium.ArcType.GEODESIC,
                 label: {
                   // 面中心点，显示文字的配置
-                  text: features[i].properties.name, // 对应的属性名称
+                  text: this.labelShow ? features[i].properties.name : '', // 对应的属性名称
                   opacity: 1,
                   font_size: 20,
                   color: '#ffffff',
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
new file mode 100644
index 0000000..e7efdc1
--- /dev/null
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description: 管理站图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 10:34:41
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getEarthquakeList } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'EarthquakeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    scale: {
+      type: Number,
+      default: 1
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    size: {
+      type: Number,
+      default: 70
+    }, // 图片尺寸
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, Cesium, layer, height, size } = this
+      const date = getToday()
+      getEarthquakeList(date).then((res) => {
+        if (res.data.length === 0) {
+          this.$message.info('今日无地震')
+        } else {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD53_09'],
+              lng: parseFloat(item['WD53_05'].trim()),
+              lat: parseFloat(item['WD53_06'].trim()),
+              level: item['WD53_07'].trim(),
+              deep: item['WD53_08'].trim(),
+              time: item['WD53_04'].trim()
+            }
+          })
+          for (const item of data) {
+            const img = 'static/images/map/earthquake.png'
+            const graphic = new mars3d.graphic.BillboardEntity({
+              name: '地震',
+              position: [item.lng, item.lat, height],
+              style: {
+                image: img,
+                width: size,
+                height: size,
+                scale: 0.5,
+                clampToGround: true,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+              }
+            })
+            var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
+                        <div style="color:#FFB861">震级：${item.level} 级</div>
+                        <div style="color:#FFB861">震源深度：${item.deep} km</div>
+                        <div style="color:#63AEFF">时间：${item.time}</div>
+                        </div>`
+            graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
new file mode 100644
index 0000000..6845b93
--- /dev/null
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Description: 液化工厂图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:39:31
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'LiquidFactoryLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/liquidFactory.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data[0].data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              url: 'static/gltf/output/yehuagongchang.gltf',
+              style: {
+                scale: 3,
+                heading: 0,
+                minimumPixelSize: 30,
+                clampToGround: true
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
new file mode 100644
index 0000000..c0aff38
--- /dev/null
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -0,0 +1,117 @@
+<!--
+ * @Description: 管理处图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-03 11:07:09
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'ManageStationLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/manageStation.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                // label: {
+                //   text: station.name,
+                //   font_family: '微软雅黑',
+                //   font_size: 15,
+                //   pixelOffsetY: 10
+                // },
+                url: 'static/gltf/output/guanlizhan.gltf',
+                scale: 5,
+                heading: 90,
+                minimumPixelSize: 30
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
new file mode 100644
index 0000000..64142a7
--- /dev/null
+++ b/src/components/Map/components/pipeLayer.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 管线图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:55:15
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+export default {
+  name: 'PipeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    glowPower: {
+      type: Number,
+      default: 0.02
+    }, // 发光强度
+    opacity: {
+      type: Number,
+      default: 0.9
+    }, // 透明度
+    width: {
+      type: Number,
+      default: 10
+    }, // 线宽度
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    color: {
+      type: String,
+      default: '#92ffdf'
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.initLayer()
+      } else {
+        this.removeLayer()
+      }
+    }
+  },
+  methods: {
+    load() {
+      if (this.show) {
+        this.initLayer()
+      }
+    },
+    initLayer() {
+      const { mars3d, map, color, width, glowPower, opacity } = this
+      if (map) {
+        if (this.show && this.layer) { // 如果已经有图层了，先移除
+          this.removeLayer()
+        }
+        this.layer = new mars3d.layer.GeoJsonLayer({
+          type: 'geojson',
+          url: 'static/geojson/pipe.json',
+          symbol: {
+            styleOptions: {
+              materialType: 'PolylineGlow',
+              glowPower: glowPower, // 发光强度
+              width: width, // 线宽
+              color: color,
+              opacity: opacity,
+              clampToGround: false
+            }
+          },
+          show: true
+        })
+        map.addLayer(this.layer)
+        this.loadData()
+      }
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
new file mode 100644
index 0000000..203bd89
--- /dev/null
+++ b/src/components/Map/components/routeLayer.vue
@@ -0,0 +1,133 @@
+<!--
+ * @Description: 巡线图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 09:09:15
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getRoutesData } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'RouteLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 颜色类型：single单色柱，multi多色柱
+    height: {
+      type: Number,
+      default: 10
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [], // 完整数据
+      filteredData: [] // 过滤后的数据
+    }
+  },
+  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.DivLayer()
+        this.layer = graphicLayer
+        map.addLayer(graphicLayer)
+        this.loadData()
+      }
+    },
+    loadData() {
+      const { mars3d, Cesium, layer, height } = this
+      const date = getToday()
+      getRoutesData(date).then((res) => {
+        if (res.status === 200) {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD60_03'],
+              lng: parseFloat(item['WD60_05']),
+              lat: parseFloat(item['WD60_06']),
+              locationdate: item['WD60_04'],
+              time: new Date(item['WD60_04']),
+              duty: item['WD60_11'],
+              sex: item['WD60_09'],
+              phone: item['WD60_10'],
+              idcard: item['WD60_12'],
+              unitname: item['WD60_08']
+            }
+          })
+          this.filteredData = []
+          // 遍历所有数据，去除重复数据
+          for (const route of data) {
+            // 去filteredData里查找是否有同一个人
+            const result = this.filteredData.findIndex(item => item.name == route.name && item.phone == route.phone)
+            if (result === -1) { // 查找不到直接添加
+              this.filteredData.push(route)
+            } else { // 查找到，对比时间，时间大则替换
+              if (this.filteredData[result].time < route.time) {
+                this.filteredData.splice(result, 1, route)
+              }
+            }
+          }
+          // 遍历过滤后的数据，添加到地图
+          for (const route of this.filteredData) {
+            const graphic = new mars3d.graphic.DivGraphic({
+              position: [route.lng, route.lat, height],
+              style: {
+                html: '<img src="static/images/map/pe02.gif" style="width:25px;height:25px;" ></img>',
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000), // 按视距距离显示
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                attr: route
+              },
+              attr: route,
+              pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/stationLayer.vue b/src/components/Map/components/stationLayer.vue
new file mode 100644
index 0000000..444c7d1
--- /dev/null
+++ b/src/components/Map/components/stationLayer.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Description: 站场图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 12:01:36
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'StationLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/station.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                label: station.name,
+                url: 'static/gltf/output/zhanchang.gltf',
+                scale: 5,
+                heading: 90,
+                minimumPixelSize: 30
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/valveLayer.vue b/src/components/Map/components/valveLayer.vue
new file mode 100644
index 0000000..5dff411
--- /dev/null
+++ b/src/components/Map/components/valveLayer.vue
@@ -0,0 +1,111 @@
+<!--
+ * @Description: 阀室图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:37:22
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'ValveLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/valveChamber.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                url: 'static/gltf/output/fashi.gltf',
+                scale: 4,
+                heading: 0,
+                minimumPixelSize: 15
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

diff --git a/src/components/Button/button3.vue b/src/components/Button/button3.vue
new file mode 100644
index 0000000..973aa02
--- /dev/null
+++ b/src/components/Button/button3.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 地图上方
+ * @Author: 王晓颖
+ * @Date: 2020-09-18 09:10:39
+ -->
+<template>
+  <div :class="select?'button-select':'button-no-select'" class="button" @click="change">
+    <span :style="{'font-size':size+'px'}" class="button-text"><slot/>{{ name }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Button2',
+  model: {
+    prop: 'select',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: '18'
+    }, // 文字大小
+    select: {
+      type: Boolean,
+      required: true
+    }// 选择状态
+  },
+  methods: {
+    change() {
+      console.log('button2 click')
+      // 选中则通知上级，二次点击不予处理
+      // if (this.select) {
+      this.$emit('click')
+      // }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .button{
+    cursor: pointer;
+    color: #fff;
+    padding:8px 10px;
+    height:36px;
+    /*background: url("../../assets/images/button/button_blue.png") no-repeat;*/
+    background-size: 100% 100%;
+    margin-right: 5px;
+    text-align: center;
+  }
+  .button-no-select{
+    background: url("../../assets/button_images/button2_blue.png") no-repeat;
+    background-size: 100% 100%;
+    color:#00bdff;
+  }
+  @keyframes bounce {
+    0%,
+    7%,
+    25%,
+    36%,
+    45%,
+    50% {
+      animation-timing-function: ease-out;
+      transform: translate3d(0, 0, 0);
+    }
+
+    15%,
+    16% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -30px, 0);
+    }
+
+    30% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -16px, 0);
+    }
+
+    41% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -8px, 0);
+    }
+
+    47% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -3px, 0);
+    }
+  }
+  .button-select{
+    background: url("../../assets/button_images/button2_yellow.png") no-repeat;
+    color: #fccd14;
+    background-size: 100% 100%;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .button-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue
index 3528987..eb4d420 100644
--- a/src/components/Map/MarsMap.vue
+++ b/src/components/Map/MarsMap.vue
@@ -4,7 +4,7 @@
     ref="map"
     :id="`mars3d-container${mapKey}`"
     :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]">
-  <slot/>
+    <slot/>
   </div>
 </template>
 
@@ -37,6 +37,10 @@
         return {}
       }
     },
+    labelShow: {
+      type: Boolean,
+      default: true
+    }, // 地块上文字是否显示
     // 是否分屏显示
     compare: {
       type: Boolean,
@@ -51,7 +55,17 @@
     customClass: {
       type: String,
       default: ''
-    }
+    },
+    colorful: {
+      type: Boolean,
+      default: false
+    },
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#2F50F3', '#417EE0', '#1D2EB7', '#2E5EA8', '#386ADE', '#2D5BA7', '#4991DB', '#4991DB', '#4C96E6', '#2F50F3', '#0385BD', '#4A94DC']
+      }
+    }// 地块使用的颜色列表
   },
   data() {
     return {
@@ -93,9 +107,7 @@
       var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
       this.map = map
       this[`map${this.mapKey}`] = map
-
       console.log('>>>>> 地图创建成功 >>>>', map)
-
       // 挂载到全局对象下，所有组件通过 this.map 访问
       // Vue.prototype[`map${this.mapKey}`] = map
 
@@ -111,10 +123,8 @@
       map._viewer.scene.backgroundColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor.alpha = 0
+      // 添加各市地块
       this.addProvincePolygon()
-      // this.addLine()
-      this.addPipe()
-      // this.addPipe2()
       this.map.fixedLight = true
       // 抛出事件
       this.$emit('onload', map)
@@ -138,36 +148,6 @@
             width: 5, // 宽度
             height: 20000,
             clampToGround: false
-            // label: {
-            //   // 面中心点，显示文字的配置
-            //   text: '{name}', // 对应的属性名称
-            //   opacity: 1,
-            //   font_size: 20,
-            //   color: '#ffffff',
-            //
-            //   font_family: '楷体',
-            //   outline: true,
-            //   outlineColor: '#ffffff',
-            //   outlineWidth: 1,
-            //
-            //   background: false,
-            //   backgroundColor: '#000000',
-            //   backgroundOpacity: 0.1,
-            //
-            //   font_weight: 'normal',
-            //   font_style: 'normal',
-            //
-            //   scaleByDistance: true,
-            //   scaleByDistance_far: 20000000,
-            //   scaleByDistance_farValue: 0.1,
-            //   scaleByDistance_near: 1000,
-            //   scaleByDistance_nearValue: 1,
-            //
-            //   distanceDisplayCondition: false,
-            //   distanceDisplayCondition_far: 10000,
-            //   distanceDisplayCondition_near: 0,
-            //   visibleDepth: false
-            // }
           }
         },
         flyTo: true
@@ -281,7 +261,7 @@
     },
     // 添加省地块
     addProvincePolygon() {
-      const { mars3d } = this
+      const { mars3d, colorful, colorList } = this
       var graphicLayer = new mars3d.layer.DivLayer()
       this.polygonLayer = graphicLayer
       this.map.addLayer(graphicLayer)
@@ -292,6 +272,7 @@
             const coordinates = (features[i].geometry.coordinates[0][0]).map(item => {
               return [item[0], item[1], 0]
             })
+            const color = colorful ? colorList[i] : '#3a77da'
             const graphic = new mars3d.graphic.PolygonEntity({
               positions: coordinates,
               style: {
@@ -299,16 +280,16 @@
                 // heightReference: mars3d.Cesium.HeightReference.RELATIVE_TO_GROUND,
                 hasShadows: true,
                 diffHeight: 10000.0,
-                color: '#3a77da',
+                color: color,
                 opacity: 1,
-                outline: true,
+                outline: colorful ? false : true,
                 outlineColor: '#4764c9',
                 outlineWidth: 3,
                 outlineOpacity: 1,
                 arcType: mars3d.Cesium.ArcType.GEODESIC,
                 label: {
                   // 面中心点，显示文字的配置
-                  text: features[i].properties.name, // 对应的属性名称
+                  text: this.labelShow ? features[i].properties.name : '', // 对应的属性名称
                   opacity: 1,
                   font_size: 20,
                   color: '#ffffff',
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
new file mode 100644
index 0000000..e7efdc1
--- /dev/null
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description: 管理站图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 10:34:41
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getEarthquakeList } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'EarthquakeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    scale: {
+      type: Number,
+      default: 1
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    size: {
+      type: Number,
+      default: 70
+    }, // 图片尺寸
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, Cesium, layer, height, size } = this
+      const date = getToday()
+      getEarthquakeList(date).then((res) => {
+        if (res.data.length === 0) {
+          this.$message.info('今日无地震')
+        } else {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD53_09'],
+              lng: parseFloat(item['WD53_05'].trim()),
+              lat: parseFloat(item['WD53_06'].trim()),
+              level: item['WD53_07'].trim(),
+              deep: item['WD53_08'].trim(),
+              time: item['WD53_04'].trim()
+            }
+          })
+          for (const item of data) {
+            const img = 'static/images/map/earthquake.png'
+            const graphic = new mars3d.graphic.BillboardEntity({
+              name: '地震',
+              position: [item.lng, item.lat, height],
+              style: {
+                image: img,
+                width: size,
+                height: size,
+                scale: 0.5,
+                clampToGround: true,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+              }
+            })
+            var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
+                        <div style="color:#FFB861">震级：${item.level} 级</div>
+                        <div style="color:#FFB861">震源深度：${item.deep} km</div>
+                        <div style="color:#63AEFF">时间：${item.time}</div>
+                        </div>`
+            graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
new file mode 100644
index 0000000..6845b93
--- /dev/null
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Description: 液化工厂图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:39:31
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'LiquidFactoryLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/liquidFactory.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data[0].data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              url: 'static/gltf/output/yehuagongchang.gltf',
+              style: {
+                scale: 3,
+                heading: 0,
+                minimumPixelSize: 30,
+                clampToGround: true
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
new file mode 100644
index 0000000..c0aff38
--- /dev/null
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -0,0 +1,117 @@
+<!--
+ * @Description: 管理处图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-03 11:07:09
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'ManageStationLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/manageStation.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                // label: {
+                //   text: station.name,
+                //   font_family: '微软雅黑',
+                //   font_size: 15,
+                //   pixelOffsetY: 10
+                // },
+                url: 'static/gltf/output/guanlizhan.gltf',
+                scale: 5,
+                heading: 90,
+                minimumPixelSize: 30
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
new file mode 100644
index 0000000..64142a7
--- /dev/null
+++ b/src/components/Map/components/pipeLayer.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 管线图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:55:15
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+export default {
+  name: 'PipeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    glowPower: {
+      type: Number,
+      default: 0.02
+    }, // 发光强度
+    opacity: {
+      type: Number,
+      default: 0.9
+    }, // 透明度
+    width: {
+      type: Number,
+      default: 10
+    }, // 线宽度
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    color: {
+      type: String,
+      default: '#92ffdf'
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.initLayer()
+      } else {
+        this.removeLayer()
+      }
+    }
+  },
+  methods: {
+    load() {
+      if (this.show) {
+        this.initLayer()
+      }
+    },
+    initLayer() {
+      const { mars3d, map, color, width, glowPower, opacity } = this
+      if (map) {
+        if (this.show && this.layer) { // 如果已经有图层了，先移除
+          this.removeLayer()
+        }
+        this.layer = new mars3d.layer.GeoJsonLayer({
+          type: 'geojson',
+          url: 'static/geojson/pipe.json',
+          symbol: {
+            styleOptions: {
+              materialType: 'PolylineGlow',
+              glowPower: glowPower, // 发光强度
+              width: width, // 线宽
+              color: color,
+              opacity: opacity,
+              clampToGround: false
+            }
+          },
+          show: true
+        })
+        map.addLayer(this.layer)
+        this.loadData()
+      }
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
new file mode 100644
index 0000000..203bd89
--- /dev/null
+++ b/src/components/Map/components/routeLayer.vue
@@ -0,0 +1,133 @@
+<!--
+ * @Description: 巡线图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 09:09:15
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getRoutesData } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'RouteLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 颜色类型：single单色柱，multi多色柱
+    height: {
+      type: Number,
+      default: 10
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [], // 完整数据
+      filteredData: [] // 过滤后的数据
+    }
+  },
+  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.DivLayer()
+        this.layer = graphicLayer
+        map.addLayer(graphicLayer)
+        this.loadData()
+      }
+    },
+    loadData() {
+      const { mars3d, Cesium, layer, height } = this
+      const date = getToday()
+      getRoutesData(date).then((res) => {
+        if (res.status === 200) {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD60_03'],
+              lng: parseFloat(item['WD60_05']),
+              lat: parseFloat(item['WD60_06']),
+              locationdate: item['WD60_04'],
+              time: new Date(item['WD60_04']),
+              duty: item['WD60_11'],
+              sex: item['WD60_09'],
+              phone: item['WD60_10'],
+              idcard: item['WD60_12'],
+              unitname: item['WD60_08']
+            }
+          })
+          this.filteredData = []
+          // 遍历所有数据，去除重复数据
+          for (const route of data) {
+            // 去filteredData里查找是否有同一个人
+            const result = this.filteredData.findIndex(item => item.name == route.name && item.phone == route.phone)
+            if (result === -1) { // 查找不到直接添加
+              this.filteredData.push(route)
+            } else { // 查找到，对比时间，时间大则替换
+              if (this.filteredData[result].time < route.time) {
+                this.filteredData.splice(result, 1, route)
+              }
+            }
+          }
+          // 遍历过滤后的数据，添加到地图
+          for (const route of this.filteredData) {
+            const graphic = new mars3d.graphic.DivGraphic({
+              position: [route.lng, route.lat, height],
+              style: {
+                html: '<img src="static/images/map/pe02.gif" style="width:25px;height:25px;" ></img>',
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000), // 按视距距离显示
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                attr: route
+              },
+              attr: route,
+              pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/stationLayer.vue b/src/components/Map/components/stationLayer.vue
new file mode 100644
index 0000000..444c7d1
--- /dev/null
+++ b/src/components/Map/components/stationLayer.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Description: 站场图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 12:01:36
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'StationLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/station.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                label: station.name,
+                url: 'static/gltf/output/zhanchang.gltf',
+                scale: 5,
+                heading: 90,
+                minimumPixelSize: 30
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/valveLayer.vue b/src/components/Map/components/valveLayer.vue
new file mode 100644
index 0000000..5dff411
--- /dev/null
+++ b/src/components/Map/components/valveLayer.vue
@@ -0,0 +1,111 @@
+<!--
+ * @Description: 阀室图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:37:22
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'ValveLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/valveChamber.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                url: 'static/gltf/output/fashi.gltf',
+                scale: 4,
+                heading: 0,
+                minimumPixelSize: 15
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index ad444ae..98afe91 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -20,7 +20,7 @@
     size: {
       type: String,
       default: ''
-    }, // 颜色类型：single单色柱，multi多色柱
+    }, // 大小
     scale: {
       type: Number,
       default: 1

diff --git a/src/components/Button/button3.vue b/src/components/Button/button3.vue
new file mode 100644
index 0000000..973aa02
--- /dev/null
+++ b/src/components/Button/button3.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 地图上方
+ * @Author: 王晓颖
+ * @Date: 2020-09-18 09:10:39
+ -->
+<template>
+  <div :class="select?'button-select':'button-no-select'" class="button" @click="change">
+    <span :style="{'font-size':size+'px'}" class="button-text"><slot/>{{ name }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Button2',
+  model: {
+    prop: 'select',
+    event: 'change'
+  },
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    size: {
+      type: String,
+      default: '18'
+    }, // 文字大小
+    select: {
+      type: Boolean,
+      required: true
+    }// 选择状态
+  },
+  methods: {
+    change() {
+      console.log('button2 click')
+      // 选中则通知上级，二次点击不予处理
+      // if (this.select) {
+      this.$emit('click')
+      // }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .button{
+    cursor: pointer;
+    color: #fff;
+    padding:8px 10px;
+    height:36px;
+    /*background: url("../../assets/images/button/button_blue.png") no-repeat;*/
+    background-size: 100% 100%;
+    margin-right: 5px;
+    text-align: center;
+  }
+  .button-no-select{
+    background: url("../../assets/button_images/button2_blue.png") no-repeat;
+    background-size: 100% 100%;
+    color:#00bdff;
+  }
+  @keyframes bounce {
+    0%,
+    7%,
+    25%,
+    36%,
+    45%,
+    50% {
+      animation-timing-function: ease-out;
+      transform: translate3d(0, 0, 0);
+    }
+
+    15%,
+    16% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -30px, 0);
+    }
+
+    30% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -16px, 0);
+    }
+
+    41% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -8px, 0);
+    }
+
+    47% {
+      animation-timing-function: ease-in;
+      transform: translate3d(0, -3px, 0);
+    }
+  }
+  .button-select{
+    background: url("../../assets/button_images/button2_yellow.png") no-repeat;
+    color: #fccd14;
+    background-size: 100% 100%;
+    animation: bounce 2.5s 1 0s both; // keyframe bounce,持续2.5s,播放2次
+    transform-origin: center bottom;
+  }
+  .button-text{
+    font-weight: bolder;
+  }
+</style>
diff --git a/src/components/Map/MarsMap.vue b/src/components/Map/MarsMap.vue
index 3528987..eb4d420 100644
--- a/src/components/Map/MarsMap.vue
+++ b/src/components/Map/MarsMap.vue
@@ -4,7 +4,7 @@
     ref="map"
     :id="`mars3d-container${mapKey}`"
     :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]">
-  <slot/>
+    <slot/>
   </div>
 </template>
 
@@ -37,6 +37,10 @@
         return {}
       }
     },
+    labelShow: {
+      type: Boolean,
+      default: true
+    }, // 地块上文字是否显示
     // 是否分屏显示
     compare: {
       type: Boolean,
@@ -51,7 +55,17 @@
     customClass: {
       type: String,
       default: ''
-    }
+    },
+    colorful: {
+      type: Boolean,
+      default: false
+    },
+    colorList: {
+      type: Array,
+      default: () => {
+        return ['#2F50F3', '#417EE0', '#1D2EB7', '#2E5EA8', '#386ADE', '#2D5BA7', '#4991DB', '#4991DB', '#4C96E6', '#2F50F3', '#0385BD', '#4A94DC']
+      }
+    }// 地块使用的颜色列表
   },
   data() {
     return {
@@ -93,9 +107,7 @@
       var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
       this.map = map
       this[`map${this.mapKey}`] = map
-
       console.log('>>>>> 地图创建成功 >>>>', map)
-
       // 挂载到全局对象下，所有组件通过 this.map 访问
       // Vue.prototype[`map${this.mapKey}`] = map
 
@@ -111,10 +123,8 @@
       map._viewer.scene.backgroundColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor = new mars3d.Cesium.Color(0.0, 0.0, 0.0, 0.0)
       map._viewer.scene.globe.baseColor.alpha = 0
+      // 添加各市地块
       this.addProvincePolygon()
-      // this.addLine()
-      this.addPipe()
-      // this.addPipe2()
       this.map.fixedLight = true
       // 抛出事件
       this.$emit('onload', map)
@@ -138,36 +148,6 @@
             width: 5, // 宽度
             height: 20000,
             clampToGround: false
-            // label: {
-            //   // 面中心点，显示文字的配置
-            //   text: '{name}', // 对应的属性名称
-            //   opacity: 1,
-            //   font_size: 20,
-            //   color: '#ffffff',
-            //
-            //   font_family: '楷体',
-            //   outline: true,
-            //   outlineColor: '#ffffff',
-            //   outlineWidth: 1,
-            //
-            //   background: false,
-            //   backgroundColor: '#000000',
-            //   backgroundOpacity: 0.1,
-            //
-            //   font_weight: 'normal',
-            //   font_style: 'normal',
-            //
-            //   scaleByDistance: true,
-            //   scaleByDistance_far: 20000000,
-            //   scaleByDistance_farValue: 0.1,
-            //   scaleByDistance_near: 1000,
-            //   scaleByDistance_nearValue: 1,
-            //
-            //   distanceDisplayCondition: false,
-            //   distanceDisplayCondition_far: 10000,
-            //   distanceDisplayCondition_near: 0,
-            //   visibleDepth: false
-            // }
           }
         },
         flyTo: true
@@ -281,7 +261,7 @@
     },
     // 添加省地块
     addProvincePolygon() {
-      const { mars3d } = this
+      const { mars3d, colorful, colorList } = this
       var graphicLayer = new mars3d.layer.DivLayer()
       this.polygonLayer = graphicLayer
       this.map.addLayer(graphicLayer)
@@ -292,6 +272,7 @@
             const coordinates = (features[i].geometry.coordinates[0][0]).map(item => {
               return [item[0], item[1], 0]
             })
+            const color = colorful ? colorList[i] : '#3a77da'
             const graphic = new mars3d.graphic.PolygonEntity({
               positions: coordinates,
               style: {
@@ -299,16 +280,16 @@
                 // heightReference: mars3d.Cesium.HeightReference.RELATIVE_TO_GROUND,
                 hasShadows: true,
                 diffHeight: 10000.0,
-                color: '#3a77da',
+                color: color,
                 opacity: 1,
-                outline: true,
+                outline: colorful ? false : true,
                 outlineColor: '#4764c9',
                 outlineWidth: 3,
                 outlineOpacity: 1,
                 arcType: mars3d.Cesium.ArcType.GEODESIC,
                 label: {
                   // 面中心点，显示文字的配置
-                  text: features[i].properties.name, // 对应的属性名称
+                  text: this.labelShow ? features[i].properties.name : '', // 对应的属性名称
                   opacity: 1,
                   font_size: 20,
                   color: '#ffffff',
diff --git a/src/components/Map/components/earthquakeLayer.vue b/src/components/Map/components/earthquakeLayer.vue
new file mode 100644
index 0000000..e7efdc1
--- /dev/null
+++ b/src/components/Map/components/earthquakeLayer.vue
@@ -0,0 +1,128 @@
+<!--
+ * @Description: 管理站图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 10:34:41
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getEarthquakeList } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'EarthquakeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    scale: {
+      type: Number,
+      default: 1
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    size: {
+      type: Number,
+      default: 70
+    }, // 图片尺寸
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, Cesium, layer, height, size } = this
+      const date = getToday()
+      getEarthquakeList(date).then((res) => {
+        if (res.data.length === 0) {
+          this.$message.info('今日无地震')
+        } else {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD53_09'],
+              lng: parseFloat(item['WD53_05'].trim()),
+              lat: parseFloat(item['WD53_06'].trim()),
+              level: item['WD53_07'].trim(),
+              deep: item['WD53_08'].trim(),
+              time: item['WD53_04'].trim()
+            }
+          })
+          for (const item of data) {
+            const img = 'static/images/map/earthquake.png'
+            const graphic = new mars3d.graphic.BillboardEntity({
+              name: '地震',
+              position: [item.lng, item.lat, height],
+              style: {
+                image: img,
+                width: size,
+                height: size,
+                scale: 0.5,
+                clampToGround: true,
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+              }
+            })
+            var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
+                        <div style="color:#FFB861">震级：${item.level} 级</div>
+                        <div style="color:#FFB861">震源深度：${item.deep} km</div>
+                        <div style="color:#63AEFF">时间：${item.time}</div>
+                        </div>`
+            graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/liquidFactoryLayer.vue b/src/components/Map/components/liquidFactoryLayer.vue
new file mode 100644
index 0000000..6845b93
--- /dev/null
+++ b/src/components/Map/components/liquidFactoryLayer.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Description: 液化工厂图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:39:31
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'LiquidFactoryLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/liquidFactory.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data[0].data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              url: 'static/gltf/output/yehuagongchang.gltf',
+              style: {
+                scale: 3,
+                heading: 0,
+                minimumPixelSize: 30,
+                clampToGround: true
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/manageStationLayer.vue b/src/components/Map/components/manageStationLayer.vue
new file mode 100644
index 0000000..c0aff38
--- /dev/null
+++ b/src/components/Map/components/manageStationLayer.vue
@@ -0,0 +1,117 @@
+<!--
+ * @Description: 管理处图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-03 11:07:09
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'ManageStationLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/manageStation.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                // label: {
+                //   text: station.name,
+                //   font_family: '微软雅黑',
+                //   font_size: 15,
+                //   pixelOffsetY: 10
+                // },
+                url: 'static/gltf/output/guanlizhan.gltf',
+                scale: 5,
+                heading: 90,
+                minimumPixelSize: 30
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/pipeLayer.vue b/src/components/Map/components/pipeLayer.vue
new file mode 100644
index 0000000..64142a7
--- /dev/null
+++ b/src/components/Map/components/pipeLayer.vue
@@ -0,0 +1,103 @@
+<!--
+ * @Description: 管线图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:55:15
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+export default {
+  name: 'PipeLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    glowPower: {
+      type: Number,
+      default: 0.02
+    }, // 发光强度
+    opacity: {
+      type: Number,
+      default: 0.9
+    }, // 透明度
+    width: {
+      type: Number,
+      default: 10
+    }, // 线宽度
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    color: {
+      type: String,
+      default: '#92ffdf'
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.initLayer()
+      } else {
+        this.removeLayer()
+      }
+    }
+  },
+  methods: {
+    load() {
+      if (this.show) {
+        this.initLayer()
+      }
+    },
+    initLayer() {
+      const { mars3d, map, color, width, glowPower, opacity } = this
+      if (map) {
+        if (this.show && this.layer) { // 如果已经有图层了，先移除
+          this.removeLayer()
+        }
+        this.layer = new mars3d.layer.GeoJsonLayer({
+          type: 'geojson',
+          url: 'static/geojson/pipe.json',
+          symbol: {
+            styleOptions: {
+              materialType: 'PolylineGlow',
+              glowPower: glowPower, // 发光强度
+              width: width, // 线宽
+              color: color,
+              opacity: opacity,
+              clampToGround: false
+            }
+          },
+          show: true
+        })
+        map.addLayer(this.layer)
+        this.loadData()
+      }
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/routeLayer.vue b/src/components/Map/components/routeLayer.vue
new file mode 100644
index 0000000..203bd89
--- /dev/null
+++ b/src/components/Map/components/routeLayer.vue
@@ -0,0 +1,133 @@
+<!--
+ * @Description: 巡线图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 09:09:15
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import { getRoutesData } from '@/api/pipe'
+import { getToday } from '@/utils/dateutils'
+export default {
+  name: 'RouteLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 颜色类型：single单色柱，multi多色柱
+    height: {
+      type: Number,
+      default: 10
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [], // 完整数据
+      filteredData: [] // 过滤后的数据
+    }
+  },
+  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.DivLayer()
+        this.layer = graphicLayer
+        map.addLayer(graphicLayer)
+        this.loadData()
+      }
+    },
+    loadData() {
+      const { mars3d, Cesium, layer, height } = this
+      const date = getToday()
+      getRoutesData(date).then((res) => {
+        if (res.status === 200) {
+          const data = res.data.map(item => {
+            return {
+              name: item['WD60_03'],
+              lng: parseFloat(item['WD60_05']),
+              lat: parseFloat(item['WD60_06']),
+              locationdate: item['WD60_04'],
+              time: new Date(item['WD60_04']),
+              duty: item['WD60_11'],
+              sex: item['WD60_09'],
+              phone: item['WD60_10'],
+              idcard: item['WD60_12'],
+              unitname: item['WD60_08']
+            }
+          })
+          this.filteredData = []
+          // 遍历所有数据，去除重复数据
+          for (const route of data) {
+            // 去filteredData里查找是否有同一个人
+            const result = this.filteredData.findIndex(item => item.name == route.name && item.phone == route.phone)
+            if (result === -1) { // 查找不到直接添加
+              this.filteredData.push(route)
+            } else { // 查找到，对比时间，时间大则替换
+              if (this.filteredData[result].time < route.time) {
+                this.filteredData.splice(result, 1, route)
+              }
+            }
+          }
+          // 遍历过滤后的数据，添加到地图
+          for (const route of this.filteredData) {
+            const graphic = new mars3d.graphic.DivGraphic({
+              position: [route.lng, route.lat, height],
+              style: {
+                html: '<img src="static/images/map/pe02.gif" style="width:25px;height:25px;" ></img>',
+                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000), // 按视距距离显示
+                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                attr: route
+              },
+              attr: route,
+              pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/stationLayer.vue b/src/components/Map/components/stationLayer.vue
new file mode 100644
index 0000000..444c7d1
--- /dev/null
+++ b/src/components/Map/components/stationLayer.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Description: 站场图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 12:01:36
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'StationLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/station.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                label: station.name,
+                url: 'static/gltf/output/zhanchang.gltf',
+                scale: 5,
+                heading: 90,
+                minimumPixelSize: 30
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/valveLayer.vue b/src/components/Map/components/valveLayer.vue
new file mode 100644
index 0000000..5dff411
--- /dev/null
+++ b/src/components/Map/components/valveLayer.vue
@@ -0,0 +1,111 @@
+<!--
+ * @Description: 阀室图层
+ * @Author: 王晓颖
+ * @Date: 2021-06-04 14:37:22
+ -->
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<script>
+import commonMixin from '../base/mixins/common.js'
+import axios from 'axios'
+export default {
+  name: 'ValveLayer',
+  mixins: [commonMixin('layer')],
+  props: {
+    size: {
+      type: String,
+      default: ''
+    }, // 大小
+    scale: {
+      type: Number,
+      default: 5
+    }, // 图片缩放倍数
+    height: {
+      type: Number,
+      default: 0
+    }, // 高度
+    offset: {
+      type: Number,
+      default: -15
+    }, // 偏移值
+    show: {
+      type: Boolean,
+      default: false
+    } // 是否可见
+  },
+  data() {
+    return {
+      layer: null, // 图层
+      data: [] // 完整数据
+    }
+  },
+  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 { mars3d, layer } = this
+      axios.get('static/config/valveChamber.json').then((res) => {
+        res = res.data
+        if (res.code === 200) {
+          this.data = res.data
+          for (const station of this.data) {
+            const graphic = new mars3d.graphic.ModelEntity({
+              name: station.name,
+              position: [station.x, station.y, 0],
+              style: {
+                url: 'static/gltf/output/fashi.gltf',
+                scale: 4,
+                heading: 0,
+                minimumPixelSize: 15
+              },
+              tooltip: station.name
+            })
+            layer.addGraphic(graphic)
+          }
+        }
+      })
+    },
+    // 移除图层
+    removeLayer() {
+      const { map, layer } = this
+      if (this.layer) {
+        map.removeLayer(layer)
+        this.layer = null
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>
diff --git a/src/components/Map/components/weatherLayer.vue b/src/components/Map/components/weatherLayer.vue
index ad444ae..98afe91 100644
--- a/src/components/Map/components/weatherLayer.vue
+++ b/src/components/Map/components/weatherLayer.vue
@@ -20,7 +20,7 @@
     size: {
       type: String,
       default: ''
-    }, // 颜色类型：single单色柱，multi多色柱
+    }, // 大小
     scale: {
       type: Number,
       default: 1
diff --git a/src/views/maps/mapOverview2.vue b/src/views/maps/mapOverview2.vue
index 9709de4..d9103b0 100644
--- a/src/views/maps/mapOverview2.vue
+++ b/src/views/maps/mapOverview2.vue
@@ -6,7 +6,8 @@
 <template>
   <layout-map>
     <!--地图-->
-    <Map :url="configUrl" @onload="onMapload" >
+    <Map :url="configUrl" :labelShow="false" :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"/>
@@ -14,12 +15,16 @@
       <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="#1FFEE6" 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 :select="routeShow" name="巡检人员" icon="icon-people" @click="showRoute(routeShow)"/>-->
       <button2 v-model="supplyShow" name="供应情况" icon="icon-station2" @click="showSupply(supplyShow)"/>
-      <button2 :select="station2Show" name="站场" icon="icon-station2" @click="showStation2(station2Show)"/>
+      <button2 :select="routeShow" name="巡线情况" icon="icon-people" @click="showRoute(routeShow)"/>
       <!--<button2 :select="valveChamberShow" name="阀室" icon="valve" @click="showValveChamber(valveChamberShow)"/>-->
       <button2 :select="weatherShow" name="气象预报" icon="icon-disaster" @click="showWeather(weatherShow)"/>
       <button2 :select="disasterShow" name="气象预警" icon="icon-disaster" @click="showDisaster(disasterShow)"/>
@@ -28,6 +33,13 @@
       <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 :select="pipeShow" name="管线" icon="icon-station2" @click="pipeShow=!pipeShow"/>
+      <button2 :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>
@@ -36,22 +48,31 @@
 <script>
 import Map from '@/components/Map/MarsMap.vue'
 import 'mars3d-heatmap'
-import axios from 'axios'
 import Button2 from '@/components/Button/button2'
 import LayoutMap from '../../layout/layoutMapSimple'
 import ThreatDialog from './components/threatDialog'
 import HighConsequenceDialog from './components/highConsequenceDialog'
-import { getEarthquakeList, getRoutesData } from '@/api/pipe'
-import { getToday } from '@/utils/dateutils'
 import SupplyLayer from '../../components/Map/components/supplyLayer'
 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,
@@ -71,13 +92,14 @@
       alpha: 100, // 透明度
       index: 1, // 缩放倍数
       underground: null, // ？
+      pipeShow: true, // 显示管线
       supplyShow: false, // 显示供应情况
-      routeShow: true, // 显示巡检人员
+      routeShow: false, // 显示巡检人员
       station2Show: false, // 站场
       valveChamberShow: false, // 阀室
       liquidFactoryShow: false, // 液化工厂
       hcaShow: false, // 显示高后果区
-      stationShow: true, // 显示管理处
+      stationShow: false, // 显示管理处
       weatherShow: false, // 显示天气预报
       waterThreatShow: false, // 显示水保隐患位置
       constructionThreatShow: false, // 显示第三方施工位置
@@ -85,38 +107,12 @@
       disasterShow: false, // 显示气象灾害图层
       earthquakeShow: false,
       cameraShow: false,
-      boardData: {
-        name: '巡检人员',
-        value: 6
-      }, // 统计版展示数据
-      manageStations: [],
-      station2: [], // 站场列表
-      valveChambers: [], // 阀室
-      liquidFactory: [], // 液化工厂
-      routeData: [], // 巡检人员数据
-      highConsequence: [], // 高后果区列表
-      constructionThreatArea: [], // 第三方施工隐患列表
-      waterThreatArea: [], // 水保隐患列表
-      sinkThreatArea: [], // 塌陷列表
-      supplyLayer: null, // 供应图层
-      stationLayer: null, // 管理站图层
-      hcaLayer: null, // 高后果区图层
-      constructionThreatLayer: null, // 第三方施工分布图层
-      waterThreatLayer: null, // 水保隐患分布图层
-      sinkThreatLayer: null, // 塌陷隐患分布图层
-      factoryModelLayer: null, // 液化工厂
-      station2Layer: null, // 站场
-      valveChamberLayer: null, // 阀室
-      disasterLayer: null, // 气象灾害图层
-      earthquakeLayer: null, // 地震图层
-      cameraLayer: null, // 监控图层
-      pointColorArr: ['#f33349', '#f79a2c', '#f2fa19', '#95e40c', '#1ffee6'],
-      routeLayer: null, // 巡检图层
       timer: null, // 轮训定时器
       clock: 86400 // 间隔时间
     }
   },
   mounted() {
+    // 处理iframe监听
     window.addEventListener('message', (event) => {
       console.log(event)
       var origin = event.origin
@@ -138,10 +134,7 @@
           this.showSupplyAndOpenTooltip(item.value)
         }
       }
-      if (data.type === 'MeassageEvent') {
-      }
     }, false)
-    // this.openIframeListener()
   },
   methods: {
     // 地图构造完成回调
@@ -154,240 +147,7 @@
       this.supplyShow = true
       this.refreshData()
     },
-    // 添加iframe监听
-    openIframeListener() {
-
-    },
-    // 添加巡线人员位置
-    addRoute() {
-      const { mars3d, Cesium } = this
-      if (this.routeLayer) {
-        this.map.removeLayer(this.routeLayer)
-      }
-      // 创建DIV数据图层
-      var graphicLayer = new mars3d.layer.DivLayer()
-      this.routeLayer = graphicLayer
-      this.map.addLayer(graphicLayer)
-      graphicLayer.on(mars3d.EventType.click, event => {
-        console.log('监听layer，单击了矢量对象', event)
-      })
-      graphicLayer.bindPopup(event => {
-        const route = event.graphic.attr
-        const html =
-          '<div>姓名：' + route.name +
-          '<br/>电话：' + route['phone'] +
-          '<br/>岗位：' + route['duty'] +
-          '<br/>站名：' + route['unitname'] +
-          '<br/>时间：' + route.locationdate + '</div>'
-        return html
-      })
-      const date = getToday()
-      getRoutesData(date).then((res) => {
-        if (res.status === 200) {
-          const data = res.data.map(item => {
-            return {
-              name: item['WD60_03'],
-              lng: parseFloat(item['WD60_05']),
-              lat: parseFloat(item['WD60_06']),
-              locationdate: item['WD60_04'],
-              time: new Date(item['WD60_04']),
-              duty: item['WD60_11'],
-              sex: item['WD60_09'],
-              phone: item['WD60_10'],
-              idcard: item['WD60_12'],
-              unitname: item['WD60_08']
-            }
-          })
-          debugger
-          this.routeData = []
-          // 遍历所有数据，去除重复数据
-          for (const route of data) {
-            // 去routeData里查找是否有同一个人
-            const result = this.routeData.findIndex(item => item.name == route.name && item.phone == route.phone)
-            if (result === -1) { // 查找不到直接添加
-              this.routeData.push(route)
-            } else { // 查找到，对比时间，时间大则替换
-              if (this.routeData[result].time < route.time) {
-                this.routeData.splice(result, 1, route)
-              }
-            }
-          }
-          this.boardData.value = this.routeData.length
-          for (const route of this.routeData) {
-            const graphic = new mars3d.graphic.DivGraphic({
-              position: [route.lng, route.lat, 10],
-              style: {
-                html: '<img src="static/images/map/pe02.gif" style="width:20px;height:20px;" ></img>',
-                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000), // 按视距距离显示
-                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                verticalOrigin: Cesium.VerticalOrigin.CENTER,
-                attr: route
-              },
-              attr: route,
-              pointerEvents: true // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
-            })
-            graphicLayer.addGraphic(graphic)
-          }
-        }
-      })
-    },
-    // 管理处
-    addStation() {
-      const { mars3d } = this
-      var graphicLayer = new mars3d.layer.GraphicLayer()
-      this.stationLayer = graphicLayer
-      this.map.addLayer(graphicLayer)
-      axios.get('static/config/manageStation.json').then((res) => {
-        res = res.data
-        if (res.code === 200) {
-          this.manageStations = res.data
-          for (const station of this.manageStations) {
-            const graphic = new mars3d.graphic.ModelEntity({
-              name: station.name,
-              position: [station.x, station.y, 0],
-              style: {
-                url: 'static/gltf/output/guanlizhan.gltf',
-                scale: 5,
-                heading: 90,
-                minimumPixelSize: 30
-              },
-              tooltip: station.name
-            })
-            graphicLayer.addGraphic(graphic)
-          }
-        }
-      })
-    },
-    // 站场
-    addStation2() {
-      const { mars3d } = this
-      var graphicLayer = new mars3d.layer.GraphicLayer()
-      this.station2Layer = graphicLayer
-      this.map.addLayer(graphicLayer)
-      axios.get('static/config/station.json').then((res) => {
-        res = res.data
-        if (res.code === 200) {
-          this.station2 = res.data
-          for (const station of this.station2) {
-            const graphic = new mars3d.graphic.ModelEntity({
-              name: station.name,
-              position: [station.x, station.y, 0],
-              style: {
-                url: 'static/gltf/output/zhanchang.gltf',
-                scale: 5,
-                heading: 90,
-                minimumPixelSize: 30
-              },
-              tooltip: station.name
-            })
-            graphicLayer.addGraphic(graphic)
-          }
-        }
-      })
-    },
-    // 阀室
-    addValveChamber() {
-      const { mars3d } = this
-      var graphicLayer = new mars3d.layer.GraphicLayer()
-      this.valveChamberLayer = graphicLayer
-      this.map.addLayer(graphicLayer)
-      axios.get('static/config/valveChamber.json').then((res) => {
-        res = res.data
-        if (res.code === 200) {
-          this.valveChambers = res.data
-          for (const station of this.valveChambers) {
-            const graphic = new mars3d.graphic.ModelEntity({
-              name: station.name,
-              position: [station.x, station.y, 0],
-              style: {
-                url: 'static/gltf/output/fashi.gltf',
-                scale: 4,
-                heading: 0,
-                minimumPixelSize: 15
-              },
-              tooltip: station.name
-            })
-            graphicLayer.addGraphic(graphic)
-          }
-        }
-      })
-    },
-    // 液化工厂三维模型
-    addFactoryModel() {
-      const { mars3d } = this
-      axios.get('static/config/liquidFactory.json').then((res) => {
-        res = res.data
-        if (res.code === 200) {
-          // 获取液化工厂数据
-          this.liquidFactory = res.data[0].data
-          const factoryModelLayer = new mars3d.layer.ModelLayer({
-            name: '液化工厂',
-            url: 'static/gltf/output/yehuagongchang.gltf',
-            style: {
-              scale: 3,
-              heading: 0,
-              minimumPixelSize: 30,
-              clampToGround: true
-            },
-            positions: this.liquidFactory.map(item => {
-              return { lng: parseFloat(item.value[0]), lat: parseFloat(item.value[1]), alt: 0 }
-            })
-          })
-          this.factoryModelLayer = factoryModelLayer
-          this.map.addLayer(factoryModelLayer)
-        }
-      })
-    },
-    // 添加地震
-    addEarthquake() {
-      const { mars3d, Cesium } = this
-      if (this.earthquakeLayer) {
-        this.map.removeLayer(this.earthquakeLayer)
-      }
-      const graphicLayer = new mars3d.layer.GraphicLayer()
-      this.earthquakeLayer = graphicLayer
-      this.map.addLayer(graphicLayer)
-      const date = getToday()
-      getEarthquakeList(date).then((res) => {
-        if (res.data.length === 0) {
-          this.$message.info('今日无地震')
-        } else {
-          const data = res.data.map(item => {
-            return {
-              name: item['WD53_09'],
-              lng: parseFloat(item['WD53_05'].trim()),
-              lat: parseFloat(item['WD53_06'].trim()),
-              level: item['WD53_07'].trim(),
-              deep: item['WD53_08'].trim(),
-              time: item['WD53_04'].trim()
-            }
-          })
-          for (const item of data) {
-            const img = 'static/images/map/earthquake.png'
-            const graphic = new mars3d.graphic.BillboardEntity({
-              name: '地震',
-              position: [item.lng, item.lat, 0],
-              style: {
-                image: img,
-                width: 70,
-                height: 70,
-                scale: 0.5,
-                clampToGround: true,
-                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
-              }
-            })
-            var html = ` <div class="popup-win"><span class="title">${item.name}</span><br/>
-                        <div style="color:#FFB861">震级：${item.level} 级</div>
-                        <div style="color:#FFB861">震源深度：${item.deep} km</div>
-                        <div style="color:#63AEFF">时间：${item.time}</div>
-                        </div>`
-            graphic.bindTooltip(html, { anchor: [0, -20] }).openTooltip()
-            graphicLayer.addGraphic(graphic)
-          }
-        }
-      })
-    },
+    // 显示供应图层并打开弹窗
     showSupplyAndOpenTooltip(currentCity) {
       if (!this.supplyShow) {
         this.supplyShow === true
@@ -412,6 +172,7 @@
         this.sinkThreatShow = false
         this.waterThreatShow = false
         this.disasterShow = false
+        this.routeShow = false
       }
     },
     // 气象控制
@@ -424,6 +185,7 @@
         this.sinkThreatShow = false
         this.waterThreatShow = false
         this.disasterShow = false
+        this.routeShow = false
       }
     },
     // 是否显示高后果区
@@ -433,6 +195,7 @@
         this.supplyShow = false
         this.weatherShow = false
         this.disasterShow = false
+        this.routeShow = false
       }
     },
     // 是否显示水保隐患
@@ -442,6 +205,7 @@
         this.supplyShow = false
         this.weatherShow = false
         this.disasterShow = false
+        this.routeShow = false
       }
     },
     // 是否显示第三方施工
@@ -451,6 +215,7 @@
         this.supplyShow = false
         this.weatherShow = false
         this.disasterShow = false
+        this.routeShow = false
       }
     },
     // 是否显示塌陷
@@ -460,65 +225,49 @@
         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) {
-      // 现在正在显示
-      if (show) { // 移除
-        this.stationShow = false
-        this.map.removeLayer(this.stationLayer, true)
-        this.stationLayer = null
-        // this.map.removeLayer(this.graphicLayer, true)
-      } else {
-        this.stationShow = true
-        this.addStation()
-        // this.addStationDiv()
-      }
-    },
-    // 显示巡检人员
-    showRoute(show) {
-      if (show) { // 移除
-        this.routeShow = false
-        this.map.removeLayer(this.routeLayer, true)
-        this.routeLayer = null
-      } else {
-        this.routeShow = true
-        this.addRoute()
-      }
+      this.stationShow = !this.stationShow
+      this.station2Show = false
+      this.liquidFactory = false
+      this.valveChamberShow = false
     },
     // 显示站场
     showStation2(show) {
-      if (show) { // 移除
-        this.station2Show = false
-        this.map.removeLayer(this.station2Layer, true)
-        this.station2Layer = null
-      } else {
-        this.station2Show = true
-        this.addStation2()
-      }
+      this.station2Show = !this.station2Show
+      this.stationShow = false
+      this.liquidFactory = false
+      this.valveChamberShow = false
     },
     // 显示阀室
     showValveChamber(show) {
-      if (show) { // 移除
-        this.valveChamberShow = false
-        this.map.removeLayer(this.valveChamberLayer, true)
-        this.valveChamberLayer = null
-      } else {
-        this.valveChamberShow = true
-        this.addValveChamber()
-      }
+      this.valveChamberShow = !this.valveChamberShow
+      this.station2Show = false
+      this.stationShow = false
+      this.liquidFactory = false
     },
     // 显示液化工厂
     showLiquidFactory(show) {
-      if (show) { // 移除
-        this.liquidFactoryShow = false
-        this.map.removeLayer(this.factoryModelLayer, true)
-        this.factoryModelLayer = null
-      } else {
-        this.liquidFactoryShow = true
-        this.addFactoryModel()
-      }
+      this.liquidFactory = !this.liquidFactoryShow
+      this.valveChamberShow = false
+      this.station2Show = false
+      this.stationShow = false
     },
     // 灾害
     showDisaster() {
@@ -543,32 +292,18 @@
         this.addEarthquake()
       }
     },
-    // 显示摄像头
-    showCamera(show) {
-      console.log('func showCamera:' + show)
-      if (show) { // 移除
-        this.cameraShow = false
-        this.map.removeLayer(this.cameraLayer, true)
-      } else {
-        this.cameraShow = true
-        this.addCamera()
-      }
-      console.log('func showCamera over:' + this.cameraShow)
-    },
+    // 刷新数据
     refreshData() {
       this.timer = setInterval(() => {
         console.log('refreshData')
-        if (this.routeLayer) {
-          this.addRoute()
+        if (this.routeShow) {
+          this.$refs.route.initLayer()
         }
-        if (this.earthquakeLayer) {
-          this.this.addEarthquake()
+        if (this.hcaShow) {
+          this.$refs.hcaHeat.initLayer()
         }
-        if (this.disasterLayer) {
-          this.addDisaster()
-        }
-        if (this.hcaLayer) {
-          this.addHcaPosition()
+        if (this.sinkThreatShow) {
+          this.$refs.sinkThreat.initLayer()
         }
       }, this.clock * 1000)
     }
@@ -585,4 +320,12 @@
     display: flex;
     justify-content: center;
   }
+  .map-point-group{
+    position: absolute;;
+    bottom:30px;
+    left:60%;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: center;
+  }
 </style>