diff --git a/public/config/mapConfig.js b/public/config/mapConfig.js
index 5b9b78e..b68060b 100644
--- a/public/config/mapConfig.js
+++ b/public/config/mapConfig.js
@@ -1,23 +1,90 @@
 // 3维地图有关配置
 const config = {
+  scene:{
+    // 默认视角参数
+    center: { lat:36.290705 , lng:117.424668 , alt: 30000, heading: 360, pitch: -45 },
+    showSun: true,
+    // mapProjection: new Cesium.MapProjection.
+    // showMoon: true,
+    // showSkyBox: true,
+    showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
+    fog: true,
+    fxaa: true,
+    // 以下是Cesium.Globe对象相关参数
+    globe: {
+      depthTestAgainstTerrain: true, // 是否启用深度监测
+      baseColor: '#1A2126', // 地球默认背景色
+      showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+      enableLighting: false // 是否显示昼夜区域
+    },
+    control: {
+      infoBox: false
+    },
+    // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+    cameraController: {
+      zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+      minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+      maximumZoomDistance: 5000000, // 地球缩小的最大值（以米为单位）
+      enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+      enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+      enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+      enableZoom: true, // 是否允许 用户放大和缩小视图
+      enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+    }
+  },
   terrian:{
     type: 'xyz', // 地形类型，xyz: 标准xyz服务，none: 无地形，arcgis arcgis地形服务
     url:'http://data.mars3d.cn/terrain'
   }, // 地形，地形只支持一个
-  crs:'EPSG:3857', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
+  crs:'EPSG:4490', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
   basemaps:[
     {
-      name:'天地图影像',  // 图层名称
-      type:'tdt', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
-      key:'xxxx', // 密钥
-      url:'' // 地址
+      name: "天地图影像(EPSG:3857)",
+      icon: "img/basemaps/tdt_img.png",
+      type: "tdt",
+      layer: "img_d",
+      key: '216ee92889e17ab1b083fae665d522b8',
+      show: true
+    },
+    {
+      name:'2020影像图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/5a44607b2e814658b463b76f9675bd3e/9bf164775ad94a18a5324f0eb681deea/Layers/default/Custom_Layers/{TileMatrix}/{TileRow}/{TileCol}.png', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
+    },
+    {
+      name:'2021电子地图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/4fb75f7491c94356a9dd58a44d0dc57b/9bf164775ad94a18a5324f0eb681deea?service=WMTS&request=GetTile&version=1.0.0&layer=JN2020DOM_05M&style=default&format=image/png&TileMatrixSet=CustomCRS4490ScaleJN2020DOM_05M&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
     }
   ],// 地图图层
-  threedlayers:[
+  layers:[
     {
-      name:'管网图层',
-      type:'S3M', // 矢量图层类型: S3M超图，tiles 3DTiles模型， gltf glTF小模型
-      url:'', // 地址
+      name:'燃气管线',
+      type:'arcgisWfs', // 矢量图层类型: wfs矢量图层服务， S3M超图，tiles 3DTiles模型， gltf glTF小模型
+      url:'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1', // 地址
+      minimumLevel: 19,
+      symbol:{
+        type: 'polylineVolumeP', // 矢量数据的style样式， polylineVolumeP是管道线 Primitive图元
+        style:{
+          color: '#eb6b0c', // 管道颜色
+          shape: 'pipeline', // 形状类型：pipeline空心管, circle实心管
+          radius: 0.1 // 默认半径
+        }
+      },
       center: {}, // 中心位置
       flyto: true
     }

diff --git a/public/config/mapConfig.js b/public/config/mapConfig.js
index 5b9b78e..b68060b 100644
--- a/public/config/mapConfig.js
+++ b/public/config/mapConfig.js
@@ -1,23 +1,90 @@
 // 3维地图有关配置
 const config = {
+  scene:{
+    // 默认视角参数
+    center: { lat:36.290705 , lng:117.424668 , alt: 30000, heading: 360, pitch: -45 },
+    showSun: true,
+    // mapProjection: new Cesium.MapProjection.
+    // showMoon: true,
+    // showSkyBox: true,
+    showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
+    fog: true,
+    fxaa: true,
+    // 以下是Cesium.Globe对象相关参数
+    globe: {
+      depthTestAgainstTerrain: true, // 是否启用深度监测
+      baseColor: '#1A2126', // 地球默认背景色
+      showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+      enableLighting: false // 是否显示昼夜区域
+    },
+    control: {
+      infoBox: false
+    },
+    // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+    cameraController: {
+      zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+      minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+      maximumZoomDistance: 5000000, // 地球缩小的最大值（以米为单位）
+      enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+      enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+      enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+      enableZoom: true, // 是否允许 用户放大和缩小视图
+      enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+    }
+  },
   terrian:{
     type: 'xyz', // 地形类型，xyz: 标准xyz服务，none: 无地形，arcgis arcgis地形服务
     url:'http://data.mars3d.cn/terrain'
   }, // 地形，地形只支持一个
-  crs:'EPSG:3857', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
+  crs:'EPSG:4490', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
   basemaps:[
     {
-      name:'天地图影像',  // 图层名称
-      type:'tdt', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
-      key:'xxxx', // 密钥
-      url:'' // 地址
+      name: "天地图影像(EPSG:3857)",
+      icon: "img/basemaps/tdt_img.png",
+      type: "tdt",
+      layer: "img_d",
+      key: '216ee92889e17ab1b083fae665d522b8',
+      show: true
+    },
+    {
+      name:'2020影像图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/5a44607b2e814658b463b76f9675bd3e/9bf164775ad94a18a5324f0eb681deea/Layers/default/Custom_Layers/{TileMatrix}/{TileRow}/{TileCol}.png', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
+    },
+    {
+      name:'2021电子地图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/4fb75f7491c94356a9dd58a44d0dc57b/9bf164775ad94a18a5324f0eb681deea?service=WMTS&request=GetTile&version=1.0.0&layer=JN2020DOM_05M&style=default&format=image/png&TileMatrixSet=CustomCRS4490ScaleJN2020DOM_05M&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
     }
   ],// 地图图层
-  threedlayers:[
+  layers:[
     {
-      name:'管网图层',
-      type:'S3M', // 矢量图层类型: S3M超图，tiles 3DTiles模型， gltf glTF小模型
-      url:'', // 地址
+      name:'燃气管线',
+      type:'arcgisWfs', // 矢量图层类型: wfs矢量图层服务， S3M超图，tiles 3DTiles模型， gltf glTF小模型
+      url:'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1', // 地址
+      minimumLevel: 19,
+      symbol:{
+        type: 'polylineVolumeP', // 矢量数据的style样式， polylineVolumeP是管道线 Primitive图元
+        style:{
+          color: '#eb6b0c', // 管道颜色
+          shape: 'pipeline', // 形状类型：pipeline空心管, circle实心管
+          radius: 0.1 // 默认半径
+        }
+      },
       center: {}, // 中心位置
       flyto: true
     }
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 115d931..e12d672 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -13,5 +13,10 @@
   "showAllWells": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "indexBtns": [
+    {"name": "首页看板", "url": "#"},
+    {"name": "运行监测", "url": "/dashboard"},
+    {"name": "巡检运维", "url": "http://139.198.18.188:8090/ems/content/ems/ems-gd.jsp"}
+  ]
 }

diff --git a/public/config/mapConfig.js b/public/config/mapConfig.js
index 5b9b78e..b68060b 100644
--- a/public/config/mapConfig.js
+++ b/public/config/mapConfig.js
@@ -1,23 +1,90 @@
 // 3维地图有关配置
 const config = {
+  scene:{
+    // 默认视角参数
+    center: { lat:36.290705 , lng:117.424668 , alt: 30000, heading: 360, pitch: -45 },
+    showSun: true,
+    // mapProjection: new Cesium.MapProjection.
+    // showMoon: true,
+    // showSkyBox: true,
+    showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
+    fog: true,
+    fxaa: true,
+    // 以下是Cesium.Globe对象相关参数
+    globe: {
+      depthTestAgainstTerrain: true, // 是否启用深度监测
+      baseColor: '#1A2126', // 地球默认背景色
+      showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+      enableLighting: false // 是否显示昼夜区域
+    },
+    control: {
+      infoBox: false
+    },
+    // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+    cameraController: {
+      zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+      minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+      maximumZoomDistance: 5000000, // 地球缩小的最大值（以米为单位）
+      enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+      enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+      enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+      enableZoom: true, // 是否允许 用户放大和缩小视图
+      enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+    }
+  },
   terrian:{
     type: 'xyz', // 地形类型，xyz: 标准xyz服务，none: 无地形，arcgis arcgis地形服务
     url:'http://data.mars3d.cn/terrain'
   }, // 地形，地形只支持一个
-  crs:'EPSG:3857', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
+  crs:'EPSG:4490', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
   basemaps:[
     {
-      name:'天地图影像',  // 图层名称
-      type:'tdt', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
-      key:'xxxx', // 密钥
-      url:'' // 地址
+      name: "天地图影像(EPSG:3857)",
+      icon: "img/basemaps/tdt_img.png",
+      type: "tdt",
+      layer: "img_d",
+      key: '216ee92889e17ab1b083fae665d522b8',
+      show: true
+    },
+    {
+      name:'2020影像图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/5a44607b2e814658b463b76f9675bd3e/9bf164775ad94a18a5324f0eb681deea/Layers/default/Custom_Layers/{TileMatrix}/{TileRow}/{TileCol}.png', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
+    },
+    {
+      name:'2021电子地图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/4fb75f7491c94356a9dd58a44d0dc57b/9bf164775ad94a18a5324f0eb681deea?service=WMTS&request=GetTile&version=1.0.0&layer=JN2020DOM_05M&style=default&format=image/png&TileMatrixSet=CustomCRS4490ScaleJN2020DOM_05M&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
     }
   ],// 地图图层
-  threedlayers:[
+  layers:[
     {
-      name:'管网图层',
-      type:'S3M', // 矢量图层类型: S3M超图，tiles 3DTiles模型， gltf glTF小模型
-      url:'', // 地址
+      name:'燃气管线',
+      type:'arcgisWfs', // 矢量图层类型: wfs矢量图层服务， S3M超图，tiles 3DTiles模型， gltf glTF小模型
+      url:'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1', // 地址
+      minimumLevel: 19,
+      symbol:{
+        type: 'polylineVolumeP', // 矢量数据的style样式， polylineVolumeP是管道线 Primitive图元
+        style:{
+          color: '#eb6b0c', // 管道颜色
+          shape: 'pipeline', // 形状类型：pipeline空心管, circle实心管
+          radius: 0.1 // 默认半径
+        }
+      },
       center: {}, // 中心位置
       flyto: true
     }
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 115d931..e12d672 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -13,5 +13,10 @@
   "showAllWells": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "indexBtns": [
+    {"name": "首页看板", "url": "#"},
+    {"name": "运行监测", "url": "/dashboard"},
+    {"name": "巡检运维", "url": "http://139.198.18.188:8090/ems/content/ems/ems-gd.jsp"}
+  ]
 }
diff --git a/src/utils/maputils.js b/src/utils/maputils.js
index 0e8adac..c786253 100644
--- a/src/utils/maputils.js
+++ b/src/utils/maputils.js
@@ -3,7 +3,7 @@
  * @param type 类型，type=file是从文件中读取，type=api是从接口中获取
  * @returns {Object}
  */
-export function getMapLayers(type = 'file') {
+export function getMapConfig(type = 'file') {
   if (type === 'file') {
     return window.mapConfig
   } else {

diff --git a/public/config/mapConfig.js b/public/config/mapConfig.js
index 5b9b78e..b68060b 100644
--- a/public/config/mapConfig.js
+++ b/public/config/mapConfig.js
@@ -1,23 +1,90 @@
 // 3维地图有关配置
 const config = {
+  scene:{
+    // 默认视角参数
+    center: { lat:36.290705 , lng:117.424668 , alt: 30000, heading: 360, pitch: -45 },
+    showSun: true,
+    // mapProjection: new Cesium.MapProjection.
+    // showMoon: true,
+    // showSkyBox: true,
+    showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
+    fog: true,
+    fxaa: true,
+    // 以下是Cesium.Globe对象相关参数
+    globe: {
+      depthTestAgainstTerrain: true, // 是否启用深度监测
+      baseColor: '#1A2126', // 地球默认背景色
+      showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+      enableLighting: false // 是否显示昼夜区域
+    },
+    control: {
+      infoBox: false
+    },
+    // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+    cameraController: {
+      zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+      minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+      maximumZoomDistance: 5000000, // 地球缩小的最大值（以米为单位）
+      enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+      enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+      enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+      enableZoom: true, // 是否允许 用户放大和缩小视图
+      enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+    }
+  },
   terrian:{
     type: 'xyz', // 地形类型，xyz: 标准xyz服务，none: 无地形，arcgis arcgis地形服务
     url:'http://data.mars3d.cn/terrain'
   }, // 地形，地形只支持一个
-  crs:'EPSG:3857', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
+  crs:'EPSG:4490', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
   basemaps:[
     {
-      name:'天地图影像',  // 图层名称
-      type:'tdt', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
-      key:'xxxx', // 密钥
-      url:'' // 地址
+      name: "天地图影像(EPSG:3857)",
+      icon: "img/basemaps/tdt_img.png",
+      type: "tdt",
+      layer: "img_d",
+      key: '216ee92889e17ab1b083fae665d522b8',
+      show: true
+    },
+    {
+      name:'2020影像图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/5a44607b2e814658b463b76f9675bd3e/9bf164775ad94a18a5324f0eb681deea/Layers/default/Custom_Layers/{TileMatrix}/{TileRow}/{TileCol}.png', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
+    },
+    {
+      name:'2021电子地图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/4fb75f7491c94356a9dd58a44d0dc57b/9bf164775ad94a18a5324f0eb681deea?service=WMTS&request=GetTile&version=1.0.0&layer=JN2020DOM_05M&style=default&format=image/png&TileMatrixSet=CustomCRS4490ScaleJN2020DOM_05M&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
     }
   ],// 地图图层
-  threedlayers:[
+  layers:[
     {
-      name:'管网图层',
-      type:'S3M', // 矢量图层类型: S3M超图，tiles 3DTiles模型， gltf glTF小模型
-      url:'', // 地址
+      name:'燃气管线',
+      type:'arcgisWfs', // 矢量图层类型: wfs矢量图层服务， S3M超图，tiles 3DTiles模型， gltf glTF小模型
+      url:'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1', // 地址
+      minimumLevel: 19,
+      symbol:{
+        type: 'polylineVolumeP', // 矢量数据的style样式， polylineVolumeP是管道线 Primitive图元
+        style:{
+          color: '#eb6b0c', // 管道颜色
+          shape: 'pipeline', // 形状类型：pipeline空心管, circle实心管
+          radius: 0.1 // 默认半径
+        }
+      },
       center: {}, // 中心位置
       flyto: true
     }
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 115d931..e12d672 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -13,5 +13,10 @@
   "showAllWells": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "indexBtns": [
+    {"name": "首页看板", "url": "#"},
+    {"name": "运行监测", "url": "/dashboard"},
+    {"name": "巡检运维", "url": "http://139.198.18.188:8090/ems/content/ems/ems-gd.jsp"}
+  ]
 }
diff --git a/src/utils/maputils.js b/src/utils/maputils.js
index 0e8adac..c786253 100644
--- a/src/utils/maputils.js
+++ b/src/utils/maputils.js
@@ -3,7 +3,7 @@
  * @param type 类型，type=file是从文件中读取，type=api是从接口中获取
  * @returns {Object}
  */
-export function getMapLayers(type = 'file') {
+export function getMapConfig(type = 'file') {
   if (type === 'file') {
     return window.mapConfig
   } else {
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
index a1a005f..ff757e4 100644
--- a/src/views/zhangqiu/components/chart.vue
+++ b/src/views/zhangqiu/components/chart.vue
@@ -1,30 +1,30 @@
 <template>
   <div class="box">
-    <div id="container"></div>
+    <div id="container" />
   </div>
 </template>
 
 <script>
-import { option2 } from "@/views/zhangqiu/js/data";
-import Charts from "@jiaminghi/charts";
+import { option2 } from '@/views/zhangqiu/js/data'
+import Charts from '@jiaminghi/charts'
 export default {
-  name: "Chart",
+  name: 'Chart',
   data() {
     return {
-      data:option2,
-    };
+      data: option2
+    }
   },
   mounted() {
-    this.chart();
+    this.chart()
   },
   methods: {
     chart() {
-      const container = document.getElementById("container");
-      const myChart = new Charts(container);
-      myChart.setOption(this.data);
-    },
-  },
-};
+      const container = document.getElementById('container')
+      const myChart = new Charts(container)
+      myChart.setOption(this.data)
+    }
+  }
+}
 </script>
 
 <style>

diff --git a/public/config/mapConfig.js b/public/config/mapConfig.js
index 5b9b78e..b68060b 100644
--- a/public/config/mapConfig.js
+++ b/public/config/mapConfig.js
@@ -1,23 +1,90 @@
 // 3维地图有关配置
 const config = {
+  scene:{
+    // 默认视角参数
+    center: { lat:36.290705 , lng:117.424668 , alt: 30000, heading: 360, pitch: -45 },
+    showSun: true,
+    // mapProjection: new Cesium.MapProjection.
+    // showMoon: true,
+    // showSkyBox: true,
+    showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
+    fog: true,
+    fxaa: true,
+    // 以下是Cesium.Globe对象相关参数
+    globe: {
+      depthTestAgainstTerrain: true, // 是否启用深度监测
+      baseColor: '#1A2126', // 地球默认背景色
+      showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+      enableLighting: false // 是否显示昼夜区域
+    },
+    control: {
+      infoBox: false
+    },
+    // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+    cameraController: {
+      zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+      minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+      maximumZoomDistance: 5000000, // 地球缩小的最大值（以米为单位）
+      enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+      enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+      enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+      enableZoom: true, // 是否允许 用户放大和缩小视图
+      enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+    }
+  },
   terrian:{
     type: 'xyz', // 地形类型，xyz: 标准xyz服务，none: 无地形，arcgis arcgis地形服务
     url:'http://data.mars3d.cn/terrain'
   }, // 地形，地形只支持一个
-  crs:'EPSG:3857', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
+  crs:'EPSG:4490', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
   basemaps:[
     {
-      name:'天地图影像',  // 图层名称
-      type:'tdt', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
-      key:'xxxx', // 密钥
-      url:'' // 地址
+      name: "天地图影像(EPSG:3857)",
+      icon: "img/basemaps/tdt_img.png",
+      type: "tdt",
+      layer: "img_d",
+      key: '216ee92889e17ab1b083fae665d522b8',
+      show: true
+    },
+    {
+      name:'2020影像图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/5a44607b2e814658b463b76f9675bd3e/9bf164775ad94a18a5324f0eb681deea/Layers/default/Custom_Layers/{TileMatrix}/{TileRow}/{TileCol}.png', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
+    },
+    {
+      name:'2021电子地图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/4fb75f7491c94356a9dd58a44d0dc57b/9bf164775ad94a18a5324f0eb681deea?service=WMTS&request=GetTile&version=1.0.0&layer=JN2020DOM_05M&style=default&format=image/png&TileMatrixSet=CustomCRS4490ScaleJN2020DOM_05M&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
     }
   ],// 地图图层
-  threedlayers:[
+  layers:[
     {
-      name:'管网图层',
-      type:'S3M', // 矢量图层类型: S3M超图，tiles 3DTiles模型， gltf glTF小模型
-      url:'', // 地址
+      name:'燃气管线',
+      type:'arcgisWfs', // 矢量图层类型: wfs矢量图层服务， S3M超图，tiles 3DTiles模型， gltf glTF小模型
+      url:'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1', // 地址
+      minimumLevel: 19,
+      symbol:{
+        type: 'polylineVolumeP', // 矢量数据的style样式， polylineVolumeP是管道线 Primitive图元
+        style:{
+          color: '#eb6b0c', // 管道颜色
+          shape: 'pipeline', // 形状类型：pipeline空心管, circle实心管
+          radius: 0.1 // 默认半径
+        }
+      },
       center: {}, // 中心位置
       flyto: true
     }
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 115d931..e12d672 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -13,5 +13,10 @@
   "showAllWells": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "indexBtns": [
+    {"name": "首页看板", "url": "#"},
+    {"name": "运行监测", "url": "/dashboard"},
+    {"name": "巡检运维", "url": "http://139.198.18.188:8090/ems/content/ems/ems-gd.jsp"}
+  ]
 }
diff --git a/src/utils/maputils.js b/src/utils/maputils.js
index 0e8adac..c786253 100644
--- a/src/utils/maputils.js
+++ b/src/utils/maputils.js
@@ -3,7 +3,7 @@
  * @param type 类型，type=file是从文件中读取，type=api是从接口中获取
  * @returns {Object}
  */
-export function getMapLayers(type = 'file') {
+export function getMapConfig(type = 'file') {
   if (type === 'file') {
     return window.mapConfig
   } else {
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
index a1a005f..ff757e4 100644
--- a/src/views/zhangqiu/components/chart.vue
+++ b/src/views/zhangqiu/components/chart.vue
@@ -1,30 +1,30 @@
 <template>
   <div class="box">
-    <div id="container"></div>
+    <div id="container" />
   </div>
 </template>
 
 <script>
-import { option2 } from "@/views/zhangqiu/js/data";
-import Charts from "@jiaminghi/charts";
+import { option2 } from '@/views/zhangqiu/js/data'
+import Charts from '@jiaminghi/charts'
 export default {
-  name: "Chart",
+  name: 'Chart',
   data() {
     return {
-      data:option2,
-    };
+      data: option2
+    }
   },
   mounted() {
-    this.chart();
+    this.chart()
   },
   methods: {
     chart() {
-      const container = document.getElementById("container");
-      const myChart = new Charts(container);
-      myChart.setOption(this.data);
-    },
-  },
-};
+      const container = document.getElementById('container')
+      const myChart = new Charts(container)
+      myChart.setOption(this.data)
+    }
+  }
+}
 </script>
 
 <style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
index 0f33f3b..e0b41d6 100644
--- a/src/views/zhangqiu/components/headerTitle.vue
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -8,14 +8,8 @@
       </div>
       <!--右边按钮-->
       <div class="header_item">
-        <div class="header_item_btn" :class="true?'color_fff':''">
-          首页看板
-        </div>
-        <div class="header_item_btn">
-          运行监测
-        </div>
-        <div class="header_item_btn">
-          巡检运维
+        <div v-for="btn of btns" :key="btn.name" class="header_item_btn" :class="btn.name===currentBtn.name?'color_fff':''" @click="changePage(btn)">
+          {{ btn.name }}
         </div>
       </div>
     </div>
@@ -24,7 +18,29 @@
 
 <script>
 export default {
-
+  data() {
+    return {
+      btns: [], // 所有按钮
+      currentBtn: null // 当前常亮按钮
+    }
+  },
+  created() {
+    this.btns = this.baseConfig.indexBtns
+    this.currentBtn = this.btns[0]
+  },
+  methods: {
+    changePage(page) {
+      this.currentBtn = page
+      // 如果是#表示本页，不跳转，如果是http开头表示外部系统，打开新页面，其他直接路由跳转
+      if (page.url === '#') {
+        // 不处理
+      } else if (page.url.indexOf('http') > -1) {
+        window.location.href = page.url
+      } else {
+        this.$router.push(page.url)
+      }
+    }
+  }
 }
 </script>
 

diff --git a/public/config/mapConfig.js b/public/config/mapConfig.js
index 5b9b78e..b68060b 100644
--- a/public/config/mapConfig.js
+++ b/public/config/mapConfig.js
@@ -1,23 +1,90 @@
 // 3维地图有关配置
 const config = {
+  scene:{
+    // 默认视角参数
+    center: { lat:36.290705 , lng:117.424668 , alt: 30000, heading: 360, pitch: -45 },
+    showSun: true,
+    // mapProjection: new Cesium.MapProjection.
+    // showMoon: true,
+    // showSkyBox: true,
+    showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
+    fog: true,
+    fxaa: true,
+    // 以下是Cesium.Globe对象相关参数
+    globe: {
+      depthTestAgainstTerrain: true, // 是否启用深度监测
+      baseColor: '#1A2126', // 地球默认背景色
+      showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+      enableLighting: false // 是否显示昼夜区域
+    },
+    control: {
+      infoBox: false
+    },
+    // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+    cameraController: {
+      zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+      minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+      maximumZoomDistance: 5000000, // 地球缩小的最大值（以米为单位）
+      enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+      enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+      enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+      enableZoom: true, // 是否允许 用户放大和缩小视图
+      enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+    }
+  },
   terrian:{
     type: 'xyz', // 地形类型，xyz: 标准xyz服务，none: 无地形，arcgis arcgis地形服务
     url:'http://data.mars3d.cn/terrain'
   }, // 地形，地形只支持一个
-  crs:'EPSG:3857', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
+  crs:'EPSG:4490', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
   basemaps:[
     {
-      name:'天地图影像',  // 图层名称
-      type:'tdt', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
-      key:'xxxx', // 密钥
-      url:'' // 地址
+      name: "天地图影像(EPSG:3857)",
+      icon: "img/basemaps/tdt_img.png",
+      type: "tdt",
+      layer: "img_d",
+      key: '216ee92889e17ab1b083fae665d522b8',
+      show: true
+    },
+    {
+      name:'2020影像图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/5a44607b2e814658b463b76f9675bd3e/9bf164775ad94a18a5324f0eb681deea/Layers/default/Custom_Layers/{TileMatrix}/{TileRow}/{TileCol}.png', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
+    },
+    {
+      name:'2021电子地图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/4fb75f7491c94356a9dd58a44d0dc57b/9bf164775ad94a18a5324f0eb681deea?service=WMTS&request=GetTile&version=1.0.0&layer=JN2020DOM_05M&style=default&format=image/png&TileMatrixSet=CustomCRS4490ScaleJN2020DOM_05M&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
     }
   ],// 地图图层
-  threedlayers:[
+  layers:[
     {
-      name:'管网图层',
-      type:'S3M', // 矢量图层类型: S3M超图，tiles 3DTiles模型， gltf glTF小模型
-      url:'', // 地址
+      name:'燃气管线',
+      type:'arcgisWfs', // 矢量图层类型: wfs矢量图层服务， S3M超图，tiles 3DTiles模型， gltf glTF小模型
+      url:'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1', // 地址
+      minimumLevel: 19,
+      symbol:{
+        type: 'polylineVolumeP', // 矢量数据的style样式， polylineVolumeP是管道线 Primitive图元
+        style:{
+          color: '#eb6b0c', // 管道颜色
+          shape: 'pipeline', // 形状类型：pipeline空心管, circle实心管
+          radius: 0.1 // 默认半径
+        }
+      },
       center: {}, // 中心位置
       flyto: true
     }
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 115d931..e12d672 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -13,5 +13,10 @@
   "showAllWells": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "indexBtns": [
+    {"name": "首页看板", "url": "#"},
+    {"name": "运行监测", "url": "/dashboard"},
+    {"name": "巡检运维", "url": "http://139.198.18.188:8090/ems/content/ems/ems-gd.jsp"}
+  ]
 }
diff --git a/src/utils/maputils.js b/src/utils/maputils.js
index 0e8adac..c786253 100644
--- a/src/utils/maputils.js
+++ b/src/utils/maputils.js
@@ -3,7 +3,7 @@
  * @param type 类型，type=file是从文件中读取，type=api是从接口中获取
  * @returns {Object}
  */
-export function getMapLayers(type = 'file') {
+export function getMapConfig(type = 'file') {
   if (type === 'file') {
     return window.mapConfig
   } else {
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
index a1a005f..ff757e4 100644
--- a/src/views/zhangqiu/components/chart.vue
+++ b/src/views/zhangqiu/components/chart.vue
@@ -1,30 +1,30 @@
 <template>
   <div class="box">
-    <div id="container"></div>
+    <div id="container" />
   </div>
 </template>
 
 <script>
-import { option2 } from "@/views/zhangqiu/js/data";
-import Charts from "@jiaminghi/charts";
+import { option2 } from '@/views/zhangqiu/js/data'
+import Charts from '@jiaminghi/charts'
 export default {
-  name: "Chart",
+  name: 'Chart',
   data() {
     return {
-      data:option2,
-    };
+      data: option2
+    }
   },
   mounted() {
-    this.chart();
+    this.chart()
   },
   methods: {
     chart() {
-      const container = document.getElementById("container");
-      const myChart = new Charts(container);
-      myChart.setOption(this.data);
-    },
-  },
-};
+      const container = document.getElementById('container')
+      const myChart = new Charts(container)
+      myChart.setOption(this.data)
+    }
+  }
+}
 </script>
 
 <style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
index 0f33f3b..e0b41d6 100644
--- a/src/views/zhangqiu/components/headerTitle.vue
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -8,14 +8,8 @@
       </div>
       <!--右边按钮-->
       <div class="header_item">
-        <div class="header_item_btn" :class="true?'color_fff':''">
-          首页看板
-        </div>
-        <div class="header_item_btn">
-          运行监测
-        </div>
-        <div class="header_item_btn">
-          巡检运维
+        <div v-for="btn of btns" :key="btn.name" class="header_item_btn" :class="btn.name===currentBtn.name?'color_fff':''" @click="changePage(btn)">
+          {{ btn.name }}
         </div>
       </div>
     </div>
@@ -24,7 +18,29 @@
 
 <script>
 export default {
-
+  data() {
+    return {
+      btns: [], // 所有按钮
+      currentBtn: null // 当前常亮按钮
+    }
+  },
+  created() {
+    this.btns = this.baseConfig.indexBtns
+    this.currentBtn = this.btns[0]
+  },
+  methods: {
+    changePage(page) {
+      this.currentBtn = page
+      // 如果是#表示本页，不跳转，如果是http开头表示外部系统，打开新页面，其他直接路由跳转
+      if (page.url === '#') {
+        // 不处理
+      } else if (page.url.indexOf('http') > -1) {
+        window.location.href = page.url
+      } else {
+        this.$router.push(page.url)
+      }
+    }
+  }
 }
 </script>
 
diff --git a/src/views/zhangqiu/components/map3d.vue b/src/views/zhangqiu/components/map3d.vue
new file mode 100644
index 0000000..39f195e
--- /dev/null
+++ b/src/views/zhangqiu/components/map3d.vue
@@ -0,0 +1,883 @@
+<!--suppress ALL -->
+<template>
+  <div style="overflow: hidden;height: 100%">
+    <div id="mapscreen" ref="mapscreen" class="mars3d-container" />
+  </div>
+</template>
+
+<script>
+import { getMapConfig } from '@/utils/maputils'
+import { mapGetters } from 'vuex'
+import { getWellType } from '@/api/well/well'
+import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview/wellOverview'
+import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
+import DeptSelect from '@/components/DeptSelect/index'
+import AMapContainer from '@/components/Amap/AMapContainer'
+import AlarmInfoWindow from '@/views/overview/components/infoWindowAlarm'
+import WellInfoWindow from '@/views/overview/components/infoWindowWell'
+import AMapMarker from '@/components/Amap/AMapMarker'
+import Vue from 'vue'
+import ToolBox from '@/views/overview/components/toolBox'
+import PopupDataFilter from '@/views/overview/components/popupDataFilter'
+import PopupLocation from '@/views/overview/components/popupLocation'
+import MapSearchComp from '@/views/overview/components/mapSearchComp'
+import axios from 'axios'
+import 'mars3d/dist/mars3d.css'
+import * as mars3d from 'mars3d'
+const Cesium = mars3d.Cesium
+
+let underground = null
+const layer2021 = null
+const layer2020 = null
+let rqline_layer = null
+let rqpoint_layer = null
+let rqpoint3D_layer = null
+let queryLineserver = null
+let queryPointserver = null
+export default {
+  name: 'Map3d',
+  components: { MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AMapMarker, AMapContainer, DeptSelect },
+  data() {
+    return {
+      mapConfig: null, // 地图配置
+      baseLayer: 'gaode_vec', // 底图图层
+      layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表
+      checkedLayer: [], // 选中的图层
+      center: ['117.5', '36.42'], // 地图中心
+      // center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
+      zoom: 12, // 地图缩放比例
+      type: this.baseConfig.showPointType, // 加载数据方式：massMarkers海量点或cluster聚合点
+      refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock定时器或websocket推送
+      alarmIcon: require('@/assets/icons/icon-alarm1.png'), // 报警图标
+      alarmIconSize: [30, 30], // 报警图标大小
+      alarmOffset: [-15, -30], // 报警图标偏移量
+      wellIcon: require('@/assets/overview/icon-location-small.png'), // 井图标
+      wellIconSize: [16, 16], // 井图标大小
+      wellOffset: [-8, -16], // 井偏移量
+      massMarkerUrl: './static/overview/icon-location-small.png',
+      massMarkerSize: [15, 15],
+      massMarkerOffset: [0, 8],
+      searchResultSize: [24, 30],
+      searchResultOffset: [-12, -30],
+      searchResultIcon: require('@/assets/overview/pure-position-icon.png'), // 报警图标
+      showAlarm: true, // 是否显示报警
+      alpha: 80,
+      toolShow: false, // 工具栏是否显示
+      menus: {
+        menuList: [
+          { icon: 'search', menu: 'dataFilter', name: '数据筛选' },
+          { icon: 'coordinate', menu: 'location', name: '坐标定位' }
+        ],
+        dataFilterWindowShow: false, // 数据筛选窗口是否显示
+        locationWindowShow: false // 坐标定位窗口是否显示
+      }, // 工具栏菜单
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 点位类型
+        deptid: '' // 组织机构
+      }, // 筛选条件
+      count: 30, // 倒计时显示时间
+      clock: null, // 计时器
+      showWellType: false, // 是否显示点位类型下拉,默认边上
+      wellTypeList: [], // 点位类型列表
+      commonIcon: 'well-common-green', // 通用图标 绿
+      commonIconAlarm: 'well-common-red', // 通用图标 红
+      alarmListOri: [], // 原始报警列表
+      alarmList: [], // 显示报警列表
+      alarmWells: [], // 报警井列表
+      resultList: [], // 搜索结果列表
+      searchMarkers: [], // 当前搜索页展示marker集合
+      latestAlarmTime: '', // 列表中最新报警事件
+      alarmFirstAmount: true, // 是否初次加载报警
+      firstAmount: true, // 是否第一次加载井数据
+      loading: true, // 加载图标是否显示
+      markers: [], // 所有井的点原始数据
+      massMarks: null, // 海量点对象
+      mapMarkers: [], // 查询结果列表
+      clusters: [], // 聚合
+      tempMarker: null,
+      showClearBtn: false, // 是否显示清除查询按钮
+      bloomEffect: null,
+      loadToken: false
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'needRefresh',
+      'bodyHeight'
+    ])
+  },
+  watch: {
+    alpha(val) {
+      window.viewer.imageryLayers._layers.forEach(layer => {
+        layer.alpha = val / 100 // 我们可以设置为0
+      })
+      underground.alpha = val / 100
+      if (val <= 90 && window.map.level >= 19) {
+        rqline_layer.show = false
+        rqpoint_layer.show = false
+      } else {
+        rqline_layer.show = true
+        rqpoint_layer.show = true
+      }
+    },
+    needRefresh(val) { // 需要刷新报警
+      if (val) this.refreshAlarm()
+    },
+    'menus.locationWindowShow'(val) { // 打开弹窗设置默认中心，关闭弹窗清空屏幕
+      if (val) {
+        this.$refs.popupLocation.setQuery(this.center)
+      } else {
+        // window.map.remove(this.tempMarker)
+      }
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const config = getMapConfig()
+      this.mapConfig = config
+      this.initmars3d()
+      this.resultList = []
+    })
+  },
+  beforeDestroy() {
+    if (this.clock) {
+      clearInterval(this.clock)
+      this.clock = null
+    }
+  },
+  methods: {
+    string2XML(xmlString) {
+      // 所有浏览器统一用这种方式处理(因为高版本的浏览器都支持)
+      var parser = new DOMParser()
+      var xmlObject = parser.parseFromString(xmlString, 'text/xml')
+      return xmlObject
+    },
+    // 初始化地球
+    initmars3d() {
+      const mapOptions = {
+        scene: this.mapConfig.scene,
+        basemaps: this.mapConfig.basemaps
+      }
+      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0N2E2M2ZmYi1iMDhjLTQwN2QtODZmOC0zNDZjNTMxYjgyNWEiLCJpZCI6MzY5MDMsImlhdCI6MTYwNzMzMTE2Nn0.5xsFCB0dxpcNGUkJOEpsVhUW9bf66XZIwV3hkZl09UI'
+      // 创建viewer实例
+      window.viewer = new Cesium.Viewer('mapscreen', {
+        geocoder: false, // 是否显示地名查找控件
+        infoBox: false,
+        animation: false, // 是否显示动画控件(左下方那个)
+        timeline: false, // 是否显示时间线控件
+        shadows: false, // 阴影是否被太阳投射
+        showldAnimate: true, // 让场景中的动画自动播放
+        sceneModePicker: false, // 是否显示投影方式控件
+        fullscreenButton: false, // 全屏按钮不显示
+        homeButton: false,
+        navigationHelpButton: false, // 帮助按钮
+        baseLayerPicker: false,
+        imageryProvider: new Cesium.TileMapServiceImageryProvider({
+          url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
+        })
+      })
+      // window.viewer.imageryLayers._layers[0].show = false
+      // window.viewer.scene.globe.baseColor = Cesium.Color.WHITE;
+      window.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
+      // mars3d.Map也可以直接传入外部已经构造好的viewer, 支持config.json所有参数
+      const map = new mars3d.Map(window.viewer, mapOptions)
+      // 设置鼠标
+      map.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
+      // 缩放设置 重新设置缩放成员
+      map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
+      // 鼠标左键平移
+      map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
+      // map放在window下
+      window.map = map
+      // 设置地下
+      underground = new mars3d.thing.Underground({ alpha: this.alpha / 100 })
+      map.addThing(underground)
+      // 添加图层
+      // this.initLayers(this.mapConfig.basemaps)
+      // this.bloomEffect = new mars3d.effect.BloomEffect({
+      //   enabled: true
+      // })
+      // map.addEffect(this.bloomEffect)
+      // window.map.basemap.opacity = this.alpha / 100
+      // 崩溃后刷新
+      map.on(mars3d.EventType.renderError, function(event) {
+        window.location.reload()
+      })
+      const that = this
+      map.on(mars3d.EventType.load, function(event) {
+        that.initLine()
+        that.initPoint()
+        that.mapReady()
+      })
+    },
+    // 加载图层
+    initLayers(layersConfig) {
+      this.layerGroup = []
+      for (const layerconfig of layersConfig) {
+        if (layerconfig.type == 'tdt') {
+          this.addTdtLayer()
+        }
+      }
+    },
+    // 加载天地图图层
+    addTdtLayer(map, layerGroup, layerInfo, flyto = false) {
+      tileLayer = new mars3d.layer.TdtLayer({
+        name: layerInfo.name,
+        layer: layerInfo.layer,
+        key: layerInfo.key
+      })
+      map.addLayer(tileLayer)
+      layerGroup.push({ name: layerInfo.name, layer: tileLayer })
+    },
+    // 加载wtms图层
+    addWMTSLayer(map, layerGroup, layerInfo, flyto = false) {
+      const options = {
+        url: layerInfo.url,
+        layer: layerInfo.layer,
+        format: layerInfo.format,
+        crs: layerInfo.crs,
+        tileMatrixSetID: layerInfo.tileMatrixSetID,
+        flyTo: flyto
+      }
+      if (layerInfo.style) options.style = layerInfo.style
+      const tileLayer = new mars3d.layer.WmtsLayer(options)
+      map.addLayer(tileLayer)
+      layerGroup.push({ name: layerInfo.name, layer: tileLayer })
+    },
+    // 初始化管线
+    initLine() {
+      queryLineserver = new mars3d.query.QueryArcServer({
+        url: 'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1',
+        popup: 'all',
+        pageSize: 3000
+      })
+      rqline_layer = new mars3d.layer.GeoJsonLayer({
+        enablePickFeatures: false,
+        symbol: {
+          type: 'polylineC',
+          styleOptions: {
+            color: '#eb6b0c',
+            width: 3,
+            hasShadows: true,
+            shadows: Cesium.ShadowMode.ENABLED
+          }
+        }
+      })
+      window.map.addLayer(rqline_layer)
+      queryLineserver.query({
+        success: (result) => {
+          rqline_layer.load({ data: result.geojson })
+        },
+        error: (error, msg) => {
+          console.log('服务访问错误', error)
+        }
+      })
+      const wfsLayer = new mars3d.layer.ArcGisWfsLayer({
+        enablePickFeatures: false,
+        name: '燃气管线',
+        url: 'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1',
+        minimumLevel: 19,
+        symbol: {
+          type: 'polylineVolumeP',
+          styleOptions: {
+            color: '#eb6b0c',
+            shape: 'pipeline',
+            radius: 0.1
+          },
+          callback: function(attr, styleOpt) {
+            return { setHeight: -3 }
+          }
+          // callback: function(attr, styleOpt) {
+          //   var val = { attr }.attr
+          //   return { addHeight: [-3, -3] }
+          // }
+        }
+      })
+      window.map.addLayer(wfsLayer)
+      window.map.on(mars3d.EventType.cameraChanged, this.changeLine, this)
+    },
+    // 初始化点位
+    initPoint(condition = '') {
+      queryPointserver = new mars3d.query.QueryArcServer({
+        url: 'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/0',
+        popup: 'all',
+        pageSize: 5000
+      })
+      rqpoint_layer = new mars3d.layer.GeoJsonLayer({
+        symbol: {
+          type: 'billboard',
+          styleOptions: {
+            image: '../static/images/marker.png',
+            scale: 0.6,
+            pixelOffsetY: -10,
+            scaleByDistance: true,
+            scaleByDistance_far: 30000,
+            scaleByDistance_farValue: 0.6,
+            scaleByDistance_near: 0,
+            scaleByDistance_nearValue: 1.4,
+            clampToGround: true,
+            highlight: { type: 'click', image: '../static/images/high-marker.png' }
+          }
+        },
+        popup: 'all'
+      })
+      window.map.addLayer(rqpoint_layer)
+      rqpoint3D_layer = new mars3d.layer.GeoJsonLayer({
+        symbol: {
+          type: 'modelP',
+          styleOptions: {
+            url: '../static/model/yubi.gltf',
+            scale: 1.5
+          },
+          callback: function(attr, styleOpt) {
+            // var val = { attr }.attr
+            return { setHeight: -3 }
+          }
+        },
+        popup: 'all'
+      })
+      window.map.addLayer(rqpoint3D_layer)
+      if (condition === '') {
+        queryPointserver.query({
+          success: (result) => {
+            if (result.count === 0) {
+              this.$message.warning('未查询到相关记录！')
+              rqpoint_layer.load({ data: { features: null }})
+              rqpoint3D_layer.load({ data: { features: null }})
+              return
+            }
+            rqpoint_layer.load({ data: result.geojson })
+            rqpoint3D_layer.load({ data: result.geojson })
+          },
+          error: (error, msg) => {
+            this.$message.error('服务访问错误,' + error)
+          }
+        })
+      } else {
+        queryPointserver.query({
+          column: 'LineWt',
+          text: condition,
+          success: (result) => {
+            if (result.count === 0) {
+              this.$message.warning('未查询到相关记录！')
+              rqpoint_layer.load({ data: { features: null }})
+              rqpoint3D_layer.load({ data: { features: null }})
+              return
+            }
+            rqpoint_layer.load({ data: result.geojson })
+            rqpoint3D_layer.load({ data: result.geojson })
+          },
+          error: (error, msg) => {
+            this.$message.error('服务访问错误,' + error)
+          }
+        })
+      }
+    },
+    // 控制二维线的显隐
+    changeLine() {
+      console.log('map-level:' + window.map.level)
+      console.log('alpha:' + this.alpha)
+      if (window.map.level <= 19) {
+        rqline_layer.show = true
+        rqpoint_layer.show = true
+      } else if (this.alpha < 90) {
+        rqline_layer.show = false
+        rqpoint_layer.show = false
+      }
+    },
+    // 初始化放这里
+    mapReady() {
+      this.fetchWellList() // 加载全部井
+      this.firstAmount = true
+      this.toolShow = true
+      this.refreshAlarm()
+      if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
+        setTimeout(() => { this.countDown() }, 1000)
+      }
+    },
+    // 过滤图层
+    filterLayer(checkedLayer) {
+      // 1.过滤井图层
+      // if (this.type === 'massMarkers') {
+      //   const wellTypes = checkedLayer.filter(item => item.indexOf('well-') > -1).map(item => item.substring(5))
+      //   if (wellTypes && wellTypes.length > 0) this.filterMassMarker({ wellTypes: wellTypes }) // 加载海量点
+      // } else if (this.type === 'cluster') {
+      //   this.filterClusters() // 加载聚合点
+      // }
+      // 2.选中or没选中报警图层
+      if (checkedLayer.indexOf('alarm') !== -1) {
+        this.showAlarm = true
+      } else {
+        this.showAlarm = false
+      }
+    },
+    // 切换底图
+    changeBaseMap(type) {
+      this.baseLayer = type
+      if (type === 'gaode_vec') {
+        layer2021.show = true
+        layer2020.show = false
+        window.viewer.imageryLayers.raiseToTop(layer2021)
+        // window.map.basemap = 1112
+        // if (this.bloomEffect !== null) {
+        //   this.bloomEffect.enabled = false
+        // }
+      } else {
+        layer2021.show = false
+        layer2020.show = true
+        window.viewer.imageryLayers.raiseToTop(layer2020)
+        // window.map.basemap = 1113
+        // if (this.bloomEffect !== null) {
+        //   this.bloomEffect.enabled = true
+        // }
+      }
+    },
+    // 倒计时函数
+    countDown() {
+      this.clock = setInterval(() => {
+        this.count--
+        if (this.count < 0) { // 当倒计时小于0时清除定时器
+          this.refreshAlarm()
+          this.count = this.baseConfig.refreshTime
+        }
+      }, 1000)
+    },
+    // 获取点位类型，显示点位类型下拉
+    fetchWellType() {
+      getWellType().then(response => {
+        this.wellTypeList = []
+        // 如果该用户支持的点位类型只有一个，则不显示该筛选框
+        const supportWellTypes = this.$store.getters.wellTypes
+        this.wellTypeList = response.data.filter(wellType => {
+          return supportWellTypes.findIndex(item => item == wellType.value) > -1
+        })
+        const wellLayer = {
+          id: 'well',
+          name: '井图层',
+          children: this.wellTypeList.map(item => {
+            return {
+              id: 'well-' + item.value,
+              name: item.name
+            }
+          })
+        }
+        this.layers.splice(0, 1, wellLayer)
+        if (this.baseConfig.showAllWell) {
+          this.checkedLayer = [...this.checkedLayer, 'well', this.wellTypeList.map(item => 'well-' + item.value)]
+        } else {
+          this.checkedLayer = [...this.checkedLayer]
+        }
+        if (this.wellTypeList.length <= 1) {
+          this.showWellType = false
+        }
+      })
+    },
+    /**
+     * 数据筛选
+     * @param listQuery 筛选条件
+     * @param showMessage 是否告知筛选结果
+     */
+    dataFilter(listQuery, showMessage = true) {
+      if (this.type === 'massMarkers') { // 过滤海量点
+        this.filterMassMarker(listQuery, showMessage)
+        this.filterAlarm(listQuery, showMessage)
+      } else if (this.type === 'cluster') { // 过滤聚合点
+        this.filterClusters(listQuery, showMessage)
+        this.filterAlarm(listQuery, showMessage)
+      }
+    },
+    // 清空查询
+    clearSearch() {
+      this.searchMarkers = []
+      this.resultList = []
+    },
+    // 数据查询
+    search(keywords) {
+      if (keywords === '') {
+        this.$message.warning('搜索条件不能为空')
+      } else {
+        this.resultList = this.markers.filter(item => {
+          if (item.wellCode.includes(keywords) || item.wellName.includes(keywords) || item.position.includes(keywords)) {
+            return true
+          } else {
+            return false
+          }
+        })
+        this.initPoint(keywords)
+      }
+    },
+    // 搜索结果页面变化，触发地图展示列表中所有
+    searchPageChange(currentMarkers) {
+      // 增加查询展示图层
+      this.searchMarkers = currentMarkers
+    },
+    // 点击搜索结果项居中，弹窗
+    searchItemClick(marker) {
+      // this.center = marker.lnglat
+      this.openInfoWindow(marker.wellId, marker.lnglat, this.searchResultOffset[1])
+    },
+    // 过滤海量点，给markers赋visible值
+    filterMassMarker(listQuery, showMessage = false) {
+      const hideWellIds = []// 要隐藏的点位编号
+      let center = [] // 待移动到的地图中心
+      // 2. 整理查询条件
+      const keywords = listQuery.keywords // 关键字
+      const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 点位类型
+      let deptids = [] // 所有权属
+      if (listQuery.deptid) {
+        deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
+      }
+      // 3.查询全部井，是否匹配，只要有一项不匹配则show为false
+      for (const marker of this.markers) {
+        let show = true
+        // 关键字不为空，且没有匹配成功，不显示， 关键字匹配点位编号和位置
+        if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.position.indexOf(keywords) !== -1)) {
+          show = false
+        }
+        // 部门不为空， 且没有匹配成功，多部门匹配
+        if (deptids.length > 0 && deptids.indexOf(marker.deptid) === -1) {
+          show = false
+        }
+        // 点位类型不为空，且没有匹配成功
+        if (wellTypes && wellTypes.length > 0 && wellTypes.indexOf(marker.wellType) === -1) {
+          show = false
+        }
+        // 如果show为false，放入需要隐藏的井id列表
+        if (show === false) {
+          hideWellIds.push(marker.wellId)
+        } else {
+          center = marker.lnglat
+        }
+        marker.visible = show
+      }
+      this.resetMassMarker()
+    },
+    // 过滤报警
+    filterAlarm(listQuery, showMessage = false) {
+      const hideWellIds = []// 要隐藏的点位编号
+      // 整理筛选条件
+      const keywords = listQuery.keywords
+      const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 点位类型
+      let deptids = [] // 所有权属
+      if (listQuery.deptid) {
+        deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
+      }
+      // 查询报警的井
+      for (const marker of this.alarmWells) {
+        let show = true
+        // 关键字不为空，且没有匹配成功，不显示， 关键字匹配点位编号和位置
+        if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.position.indexOf(keywords) !== -1)) {
+          show = false
+        }
+        // 部门不为空， 且没有匹配成功，多部门匹配
+        if (deptids.length > 0 && deptids.indexOf(marker.deptid) === -1) {
+          show = false
+        }
+        // 点位类型不为空，且没有匹配成功
+        if (wellTypes && wellTypes.length > 0 && wellTypes.indexOf(marker.wellType) === -1) {
+          show = false
+        }
+        // 如果show为false，放入需要隐藏的井id列表
+        if (show === false) {
+          hideWellIds.push(marker.wellId)
+        }
+        marker.visible = show
+      }
+      // 4.过滤报警marker：alarmWells  如果没有找到符合要求的井，直接将全部查询结果隐藏，并将所有报警隐藏，否则按照查询结果筛选需要隐藏的报警
+      if (hideWellIds.length === this.alarmWells.length) {
+        for (const alarmWell of this.alarmWells) {
+          alarmWell.visible = false
+        }
+      } else {
+        // 将报警隐藏
+        for (const alarmWell of this.alarmWells) {
+          if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
+            alarmWell.visible = false
+          } else {
+            alarmWell.visible = true
+          }
+        }
+      }
+      // 5.过滤显示列表：alarmList
+      this.alarmList = []
+      if (hideWellIds.length > 0) { // 如果有要隐藏的井，过滤
+        for (const alarm of this.alarmListOri) {
+          const findFlag = hideWellIds.findIndex(code => code === alarm.wellId)
+          if (findFlag === -1) {
+            this.alarmList.push(alarm)
+          }
+        }
+      } else { // 如果没有直接等于alarmListOri
+        this.alarmList = this.alarmListOri
+      }
+    },
+    // 获取全部井列表
+    fetchWellList() {
+      this.loading = true
+      getWellList().then(response => {
+        this.loading = false
+        const wells = response.data
+        if (wells.length > 0) {
+          this.markers = []
+          for (const well of wells) {
+            const marker = {
+              ...well,
+              lnglat: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
+              icon: this.commonIcon,
+              visible: true,
+              wellStatus: 'normal'
+            }
+            this.markers.push(marker)
+          }
+        }
+        this.loading = false
+      })
+    },
+    // 刷新报警列表
+    refreshAlarm() {
+      console.log('refreshAlarm')
+      this.count = this.baseConfig.refreshTime
+      this.loading = true
+      // 如果showAlarm为ture, 确保选中图层报警
+      if (this.showAlarm && this.checkedLayer.indexOf('alarm') == -1) {
+        this.checkedLayer.push('alarm')
+      }
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          this.loading = false
+          // 判断最新报警时间，若和旧的最新时间不一样，则判断是否需要产生声音
+          if (response.data.length > 0) {
+            const latestTime = response.data[0].alarmTime
+            console.log(latestTime, 'vs', this.latestAlarmTime)
+            if (this.latestAlarmTime < latestTime) {
+              // 如果不是初次加载并且声音开关开启状态
+              if ((!this.alarmFirstAmount) && this.baseConfig.alarmSound) {
+                console.log('playAudio')
+                this.playAudio()
+              }
+              this.latestAlarmTime = latestTime
+            }
+          }
+          this.alarmFirstAmount = false // 初次加载完毕
+          // 获取当前报警列表
+          this.alarmListOri = response.data // 列表原始
+          this.alarmList = response.data // 要显示的报警列表
+          this.alarmWells = [] // 报警的井列表
+          for (const alarm of response.data) {
+            if (this.alarmWells.findIndex(item => item.wellCode === alarm.wellCode) == -1) {
+              this.alarmWells.push({
+                wellCode: alarm.wellCode,
+                wellId: alarm.wellId,
+                wellType: alarm.wellType,
+                lngGaode: alarm.lngGaode,
+                latGaode: alarm.latGaode,
+                coordinates: [alarm.lngGaode, alarm.latGaode],
+                position: alarm.position,
+                visible: true
+              })
+            }
+          }
+          console.log('alarmWells Length', this.alarmWells.length)
+        }
+      })
+    },
+    /**
+     * 打开报警弹窗
+     * @param wellId 井id
+     * @param coordinates 弹窗位置： [经度，纬度]
+     * @param needCenter 是否需要将点居中
+     */
+    openAlarmWindow(wellId, coordinates, needCenter = false) {
+      console.log('openAlarmWindow:' + wellId)
+      // if (this.needCenter) { // 如果需要居中
+      //   this.center = coordinates
+      // }
+      // 获取报警详情
+      getWellAlarms(wellId).then(response => {
+        if (response.code === 200) {
+          const wellInfo = response.data
+          const alarmInfo = {
+            wellCode: response.data.wellCode,
+            position: response.data.position,
+            deptName: response.data.deptName,
+            wellTypeName: response.data.wellTypeName,
+            alarms: response.data.alarmList,
+            deep: response.data.deep
+          }
+          const AlarmWindow = Vue.extend({
+            render: h => h(AlarmInfoWindow, { props: { alarmInfo: alarmInfo }})
+          })
+          const alarmWindow = new AlarmWindow().$mount()
+          const infoWindow = new window.AMap.InfoWindow({
+            content: alarmWindow.$el, // 显示内容
+            offset: [0, this.alarmOffset[1]], // 偏移
+            autoMove: true // 是否自动调整窗体到视野内
+          })
+          infoWindow.open(window.map, new toLngLat(coordinates))
+        }
+      })
+    },
+    /**
+     * 打开井详情弹窗
+     * @param wellId 井id
+     * @param coordinates 弹窗位置： [经度，纬度]
+     * @param offsetY 弹窗Y轴偏移，为负值
+     */
+    openInfoWindow(wellId, coordinates, offsetY) {
+      this.clearInfoWindow()
+      // 首先获取井详情
+      getWellInfo(wellId).then(response => {
+        if (response.code === 200) {
+          const wellInfo = { ...response.data }
+          // 加载弹窗组件
+          const WellInfo = Vue.extend({
+            render: h => h(WellInfoWindow, { props: { wellInfo: wellInfo }})
+          })
+          const wellWindow = new WellInfo().$mount()
+          const infoWindow = new window.AMap.InfoWindow({
+            content: wellWindow.$el, // 显示内容
+            offset: [0, offsetY], // 偏移
+            autoMove: true // 是否自动调整窗体到视野内
+          })
+          infoWindow.open(window.map, new toLngLat(coordinates))
+        }
+      })
+    },
+    // 关闭所有弹窗
+    clearInfoWindow() {
+      const { map } = this
+      map.clearInfoWindow()
+    },
+    // 点击报警列表
+    alarmRowClick(row) {
+      console.log('alarmRowClick')
+      const wellId = row.wellId
+      for (const alarmWell of this.alarmWells) {
+        if (alarmWell.wellId === wellId) {
+          // this.center = alarmWell.coordinates
+          if (this.zoom < 16) {
+            this.zoom = 16
+          }
+          this.openAlarmWindow(alarmWell.wellId, alarmWell.coordinates, true)
+        }
+      }
+    },
+    // 点击工具箱菜单, menu:{menu:'xxx', name:''}, 建议菜单menu属性的命名与自定义弹窗的show属性名称保持同一规则
+    clickMenu(menu) {
+      this.closeAllPopup()
+      const key = menu.menu + 'WindowShow'
+      const obj = {}
+      obj[key] = true // 将该值置为false, 需要借助obj中转
+      Object.assign(this.menus, obj)
+    },
+    // 关闭所有菜单点出的弹窗
+    closeAllPopup() {
+      for (const key in this.menus) {
+        if (key.indexOf('WindowShow') > -1) {
+          // 将该值置为false, 需要借助obj中转
+          const obj = {}
+          obj[key] = false
+          Object.assign(this.menus, obj)
+        }
+      }
+    },
+    // 关闭数据筛选弹窗
+    closePopupDataFilter() {
+      Object.assign(this.menus, { dataFilterWindowShow: false })
+    },
+    // 坐标定位，居中，绘点
+    setCenter(position) {
+      this.center = position
+      var center = { lat: this.center[1], lng: this.center[0], alt: 30000, heading: 360, pitch: -45 }
+      window.map.setCameraView(center)
+    },
+    // 坐标拾取， 在地图上绘点
+    pickerPosition() {
+      const { searchResultOffset, searchResultIcon, searchResultSize, center } = this
+      const icon = new window.AMap.Icon({
+        size: toSize(searchResultSize), // 图标尺寸
+        image: searchResultIcon, // Icon的图像
+        imageSize: toSize(searchResultSize) // 根据所设置的大小拉伸或压缩图片
+      })
+      const marker = new window.AMap.Marker({
+        icon: icon,
+        position: center,
+        offset: toPixel(searchResultOffset),
+        draggable: true
+      })
+      marker.on('dragend', e => {
+        const position = [e.lnglat.lng, e.lnglat.lat]
+        this.$refs.popupLocation.setQuery(position)
+      })
+      marker.setMap(window.map)
+      this.tempMarker = marker
+    },
+    // TODO: 关闭坐标定位窗口， 清除地图上的标注
+    closePopupLocation() {
+      Object.assign(this.menus, { locationWindowShow: false })
+    },
+    // 获取当前deptid的所有下级id,仅最多支持3级
+    fetchDeptList(deptid) {
+      console.log('fetchDeptList')
+      const deptids = [deptid] // 储存了该pid和其子集
+      const deptlist = this.$refs.deptSelect.fetchDeptTree()
+      for (const dept of deptlist) {
+        if (dept.pid === deptid) {
+          deptids.push(dept.id)
+        }
+      }
+      const result = []
+      // 查找所有列表中有没有deptids里面的本人或子集
+      if (deptlist.length > 0) {
+        for (const dept of deptlist) {
+          if (deptids.indexOf(dept.id) !== -1) {
+            result.push(dept.id)
+          } else if (deptids.indexOf(dept.pid) !== -1) {
+            result.push(dept.id)
+          }
+        }
+      }
+      console.log(result)
+      return result
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+// 地图
+.overview-map-container{
+  width: 100%;
+  height: 100%;
+}
+
+.search-marker{
+  position: relative;
+  .search-marker-image{
+    width: 100%;
+    height: 100%;
+  }
+  .search-marker-label{
+    position:absolute;
+    font-size: 14px;
+    font-weight: 600;
+    color:#FFF;
+    z-index:50;
+    top: 4px;
+    left: 50%;
+    transform: translateX(-50%)
+  }
+}
+.cover{
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  /*background-color: red;*/
+  background-color: #1a2126;
+  width: 100px;
+  height: 30px;
+}
+</style>

diff --git a/public/config/mapConfig.js b/public/config/mapConfig.js
index 5b9b78e..b68060b 100644
--- a/public/config/mapConfig.js
+++ b/public/config/mapConfig.js
@@ -1,23 +1,90 @@
 // 3维地图有关配置
 const config = {
+  scene:{
+    // 默认视角参数
+    center: { lat:36.290705 , lng:117.424668 , alt: 30000, heading: 360, pitch: -45 },
+    showSun: true,
+    // mapProjection: new Cesium.MapProjection.
+    // showMoon: true,
+    // showSkyBox: true,
+    showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
+    fog: true,
+    fxaa: true,
+    // 以下是Cesium.Globe对象相关参数
+    globe: {
+      depthTestAgainstTerrain: true, // 是否启用深度监测
+      baseColor: '#1A2126', // 地球默认背景色
+      showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
+      enableLighting: false // 是否显示昼夜区域
+    },
+    control: {
+      infoBox: false
+    },
+    // 以下是Cesium.ScreenSpaceCameraController对象相关参数
+    cameraController: {
+      zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
+      minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
+      maximumZoomDistance: 5000000, // 地球缩小的最大值（以米为单位）
+      enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
+      enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
+      enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
+      enableZoom: true, // 是否允许 用户放大和缩小视图
+      enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
+    }
+  },
   terrian:{
     type: 'xyz', // 地形类型，xyz: 标准xyz服务，none: 无地形，arcgis arcgis地形服务
     url:'http://data.mars3d.cn/terrain'
   }, // 地形，地形只支持一个
-  crs:'EPSG:3857', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
+  crs:'EPSG:4490', // 坐标系，支持EPSG:3857(墨卡托), EPSG4326（WSG84）, EPSG:4490(CGCS2000)
   basemaps:[
     {
-      name:'天地图影像',  // 图层名称
-      type:'tdt', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
-      key:'xxxx', // 密钥
-      url:'' // 地址
+      name: "天地图影像(EPSG:3857)",
+      icon: "img/basemaps/tdt_img.png",
+      type: "tdt",
+      layer: "img_d",
+      key: '216ee92889e17ab1b083fae665d522b8',
+      show: true
+    },
+    {
+      name:'2020影像图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/5a44607b2e814658b463b76f9675bd3e/9bf164775ad94a18a5324f0eb681deea/Layers/default/Custom_Layers/{TileMatrix}/{TileRow}/{TileCol}.png', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
+    },
+    {
+      name:'2021电子地图',  // 图层名称
+      type:'wmts', //图层类型： tdt天地图，gaode高德地图，wmts, wms,
+      url:'http://172.20.90.108:8081/geoesb/proxy/4fb75f7491c94356a9dd58a44d0dc57b/9bf164775ad94a18a5324f0eb681deea?service=WMTS&request=GetTile&version=1.0.0&layer=JN2020DOM_05M&style=default&format=image/png&TileMatrixSet=CustomCRS4490ScaleJN2020DOM_05M&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}', // 地址
+      key:'', // 密钥
+      crs:'EPSG:4490',
+      layer:'wzmap_map',
+      style:'default',
+      format:'image/png',
+      tileMatrixSetID:'default028mm',
+      show: true
     }
   ],// 地图图层
-  threedlayers:[
+  layers:[
     {
-      name:'管网图层',
-      type:'S3M', // 矢量图层类型: S3M超图，tiles 3DTiles模型， gltf glTF小模型
-      url:'', // 地址
+      name:'燃气管线',
+      type:'arcgisWfs', // 矢量图层类型: wfs矢量图层服务， S3M超图，tiles 3DTiles模型， gltf glTF小模型
+      url:'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1', // 地址
+      minimumLevel: 19,
+      symbol:{
+        type: 'polylineVolumeP', // 矢量数据的style样式， polylineVolumeP是管道线 Primitive图元
+        style:{
+          color: '#eb6b0c', // 管道颜色
+          shape: 'pipeline', // 形状类型：pipeline空心管, circle实心管
+          radius: 0.1 // 默认半径
+        }
+      },
       center: {}, // 中心位置
       flyto: true
     }
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 115d931..e12d672 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -13,5 +13,10 @@
   "showAllWells": true,
   "provinceCode":"360000",
   "cityCode":"361000",
-  "areaCode":"361024"
+  "areaCode":"361024",
+  "indexBtns": [
+    {"name": "首页看板", "url": "#"},
+    {"name": "运行监测", "url": "/dashboard"},
+    {"name": "巡检运维", "url": "http://139.198.18.188:8090/ems/content/ems/ems-gd.jsp"}
+  ]
 }
diff --git a/src/utils/maputils.js b/src/utils/maputils.js
index 0e8adac..c786253 100644
--- a/src/utils/maputils.js
+++ b/src/utils/maputils.js
@@ -3,7 +3,7 @@
  * @param type 类型，type=file是从文件中读取，type=api是从接口中获取
  * @returns {Object}
  */
-export function getMapLayers(type = 'file') {
+export function getMapConfig(type = 'file') {
   if (type === 'file') {
     return window.mapConfig
   } else {
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
index a1a005f..ff757e4 100644
--- a/src/views/zhangqiu/components/chart.vue
+++ b/src/views/zhangqiu/components/chart.vue
@@ -1,30 +1,30 @@
 <template>
   <div class="box">
-    <div id="container"></div>
+    <div id="container" />
   </div>
 </template>
 
 <script>
-import { option2 } from "@/views/zhangqiu/js/data";
-import Charts from "@jiaminghi/charts";
+import { option2 } from '@/views/zhangqiu/js/data'
+import Charts from '@jiaminghi/charts'
 export default {
-  name: "Chart",
+  name: 'Chart',
   data() {
     return {
-      data:option2,
-    };
+      data: option2
+    }
   },
   mounted() {
-    this.chart();
+    this.chart()
   },
   methods: {
     chart() {
-      const container = document.getElementById("container");
-      const myChart = new Charts(container);
-      myChart.setOption(this.data);
-    },
-  },
-};
+      const container = document.getElementById('container')
+      const myChart = new Charts(container)
+      myChart.setOption(this.data)
+    }
+  }
+}
 </script>
 
 <style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
index 0f33f3b..e0b41d6 100644
--- a/src/views/zhangqiu/components/headerTitle.vue
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -8,14 +8,8 @@
       </div>
       <!--右边按钮-->
       <div class="header_item">
-        <div class="header_item_btn" :class="true?'color_fff':''">
-          首页看板
-        </div>
-        <div class="header_item_btn">
-          运行监测
-        </div>
-        <div class="header_item_btn">
-          巡检运维
+        <div v-for="btn of btns" :key="btn.name" class="header_item_btn" :class="btn.name===currentBtn.name?'color_fff':''" @click="changePage(btn)">
+          {{ btn.name }}
         </div>
       </div>
     </div>
@@ -24,7 +18,29 @@
 
 <script>
 export default {
-
+  data() {
+    return {
+      btns: [], // 所有按钮
+      currentBtn: null // 当前常亮按钮
+    }
+  },
+  created() {
+    this.btns = this.baseConfig.indexBtns
+    this.currentBtn = this.btns[0]
+  },
+  methods: {
+    changePage(page) {
+      this.currentBtn = page
+      // 如果是#表示本页，不跳转，如果是http开头表示外部系统，打开新页面，其他直接路由跳转
+      if (page.url === '#') {
+        // 不处理
+      } else if (page.url.indexOf('http') > -1) {
+        window.location.href = page.url
+      } else {
+        this.$router.push(page.url)
+      }
+    }
+  }
 }
 </script>
 
diff --git a/src/views/zhangqiu/components/map3d.vue b/src/views/zhangqiu/components/map3d.vue
new file mode 100644
index 0000000..39f195e
--- /dev/null
+++ b/src/views/zhangqiu/components/map3d.vue
@@ -0,0 +1,883 @@
+<!--suppress ALL -->
+<template>
+  <div style="overflow: hidden;height: 100%">
+    <div id="mapscreen" ref="mapscreen" class="mars3d-container" />
+  </div>
+</template>
+
+<script>
+import { getMapConfig } from '@/utils/maputils'
+import { mapGetters } from 'vuex'
+import { getWellType } from '@/api/well/well'
+import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview/wellOverview'
+import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper'
+import DeptSelect from '@/components/DeptSelect/index'
+import AMapContainer from '@/components/Amap/AMapContainer'
+import AlarmInfoWindow from '@/views/overview/components/infoWindowAlarm'
+import WellInfoWindow from '@/views/overview/components/infoWindowWell'
+import AMapMarker from '@/components/Amap/AMapMarker'
+import Vue from 'vue'
+import ToolBox from '@/views/overview/components/toolBox'
+import PopupDataFilter from '@/views/overview/components/popupDataFilter'
+import PopupLocation from '@/views/overview/components/popupLocation'
+import MapSearchComp from '@/views/overview/components/mapSearchComp'
+import axios from 'axios'
+import 'mars3d/dist/mars3d.css'
+import * as mars3d from 'mars3d'
+const Cesium = mars3d.Cesium
+
+let underground = null
+const layer2021 = null
+const layer2020 = null
+let rqline_layer = null
+let rqpoint_layer = null
+let rqpoint3D_layer = null
+let queryLineserver = null
+let queryPointserver = null
+export default {
+  name: 'Map3d',
+  components: { MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AMapMarker, AMapContainer, DeptSelect },
+  data() {
+    return {
+      mapConfig: null, // 地图配置
+      baseLayer: 'gaode_vec', // 底图图层
+      layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表
+      checkedLayer: [], // 选中的图层
+      center: ['117.5', '36.42'], // 地图中心
+      // center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
+      zoom: 12, // 地图缩放比例
+      type: this.baseConfig.showPointType, // 加载数据方式：massMarkers海量点或cluster聚合点
+      refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock定时器或websocket推送
+      alarmIcon: require('@/assets/icons/icon-alarm1.png'), // 报警图标
+      alarmIconSize: [30, 30], // 报警图标大小
+      alarmOffset: [-15, -30], // 报警图标偏移量
+      wellIcon: require('@/assets/overview/icon-location-small.png'), // 井图标
+      wellIconSize: [16, 16], // 井图标大小
+      wellOffset: [-8, -16], // 井偏移量
+      massMarkerUrl: './static/overview/icon-location-small.png',
+      massMarkerSize: [15, 15],
+      massMarkerOffset: [0, 8],
+      searchResultSize: [24, 30],
+      searchResultOffset: [-12, -30],
+      searchResultIcon: require('@/assets/overview/pure-position-icon.png'), // 报警图标
+      showAlarm: true, // 是否显示报警
+      alpha: 80,
+      toolShow: false, // 工具栏是否显示
+      menus: {
+        menuList: [
+          { icon: 'search', menu: 'dataFilter', name: '数据筛选' },
+          { icon: 'coordinate', menu: 'location', name: '坐标定位' }
+        ],
+        dataFilterWindowShow: false, // 数据筛选窗口是否显示
+        locationWindowShow: false // 坐标定位窗口是否显示
+      }, // 工具栏菜单
+      listQuery: {
+        keywords: '', // 关键字
+        wellType: '', // 点位类型
+        deptid: '' // 组织机构
+      }, // 筛选条件
+      count: 30, // 倒计时显示时间
+      clock: null, // 计时器
+      showWellType: false, // 是否显示点位类型下拉,默认边上
+      wellTypeList: [], // 点位类型列表
+      commonIcon: 'well-common-green', // 通用图标 绿
+      commonIconAlarm: 'well-common-red', // 通用图标 红
+      alarmListOri: [], // 原始报警列表
+      alarmList: [], // 显示报警列表
+      alarmWells: [], // 报警井列表
+      resultList: [], // 搜索结果列表
+      searchMarkers: [], // 当前搜索页展示marker集合
+      latestAlarmTime: '', // 列表中最新报警事件
+      alarmFirstAmount: true, // 是否初次加载报警
+      firstAmount: true, // 是否第一次加载井数据
+      loading: true, // 加载图标是否显示
+      markers: [], // 所有井的点原始数据
+      massMarks: null, // 海量点对象
+      mapMarkers: [], // 查询结果列表
+      clusters: [], // 聚合
+      tempMarker: null,
+      showClearBtn: false, // 是否显示清除查询按钮
+      bloomEffect: null,
+      loadToken: false
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'needRefresh',
+      'bodyHeight'
+    ])
+  },
+  watch: {
+    alpha(val) {
+      window.viewer.imageryLayers._layers.forEach(layer => {
+        layer.alpha = val / 100 // 我们可以设置为0
+      })
+      underground.alpha = val / 100
+      if (val <= 90 && window.map.level >= 19) {
+        rqline_layer.show = false
+        rqpoint_layer.show = false
+      } else {
+        rqline_layer.show = true
+        rqpoint_layer.show = true
+      }
+    },
+    needRefresh(val) { // 需要刷新报警
+      if (val) this.refreshAlarm()
+    },
+    'menus.locationWindowShow'(val) { // 打开弹窗设置默认中心，关闭弹窗清空屏幕
+      if (val) {
+        this.$refs.popupLocation.setQuery(this.center)
+      } else {
+        // window.map.remove(this.tempMarker)
+      }
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const config = getMapConfig()
+      this.mapConfig = config
+      this.initmars3d()
+      this.resultList = []
+    })
+  },
+  beforeDestroy() {
+    if (this.clock) {
+      clearInterval(this.clock)
+      this.clock = null
+    }
+  },
+  methods: {
+    string2XML(xmlString) {
+      // 所有浏览器统一用这种方式处理(因为高版本的浏览器都支持)
+      var parser = new DOMParser()
+      var xmlObject = parser.parseFromString(xmlString, 'text/xml')
+      return xmlObject
+    },
+    // 初始化地球
+    initmars3d() {
+      const mapOptions = {
+        scene: this.mapConfig.scene,
+        basemaps: this.mapConfig.basemaps
+      }
+      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0N2E2M2ZmYi1iMDhjLTQwN2QtODZmOC0zNDZjNTMxYjgyNWEiLCJpZCI6MzY5MDMsImlhdCI6MTYwNzMzMTE2Nn0.5xsFCB0dxpcNGUkJOEpsVhUW9bf66XZIwV3hkZl09UI'
+      // 创建viewer实例
+      window.viewer = new Cesium.Viewer('mapscreen', {
+        geocoder: false, // 是否显示地名查找控件
+        infoBox: false,
+        animation: false, // 是否显示动画控件(左下方那个)
+        timeline: false, // 是否显示时间线控件
+        shadows: false, // 阴影是否被太阳投射
+        showldAnimate: true, // 让场景中的动画自动播放
+        sceneModePicker: false, // 是否显示投影方式控件
+        fullscreenButton: false, // 全屏按钮不显示
+        homeButton: false,
+        navigationHelpButton: false, // 帮助按钮
+        baseLayerPicker: false,
+        imageryProvider: new Cesium.TileMapServiceImageryProvider({
+          url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
+        })
+      })
+      // window.viewer.imageryLayers._layers[0].show = false
+      // window.viewer.scene.globe.baseColor = Cesium.Color.WHITE;
+      window.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
+      // mars3d.Map也可以直接传入外部已经构造好的viewer, 支持config.json所有参数
+      const map = new mars3d.Map(window.viewer, mapOptions)
+      // 设置鼠标
+      map.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
+      // 缩放设置 重新设置缩放成员
+      map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
+      // 鼠标左键平移
+      map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
+      // map放在window下
+      window.map = map
+      // 设置地下
+      underground = new mars3d.thing.Underground({ alpha: this.alpha / 100 })
+      map.addThing(underground)
+      // 添加图层
+      // this.initLayers(this.mapConfig.basemaps)
+      // this.bloomEffect = new mars3d.effect.BloomEffect({
+      //   enabled: true
+      // })
+      // map.addEffect(this.bloomEffect)
+      // window.map.basemap.opacity = this.alpha / 100
+      // 崩溃后刷新
+      map.on(mars3d.EventType.renderError, function(event) {
+        window.location.reload()
+      })
+      const that = this
+      map.on(mars3d.EventType.load, function(event) {
+        that.initLine()
+        that.initPoint()
+        that.mapReady()
+      })
+    },
+    // 加载图层
+    initLayers(layersConfig) {
+      this.layerGroup = []
+      for (const layerconfig of layersConfig) {
+        if (layerconfig.type == 'tdt') {
+          this.addTdtLayer()
+        }
+      }
+    },
+    // 加载天地图图层
+    addTdtLayer(map, layerGroup, layerInfo, flyto = false) {
+      tileLayer = new mars3d.layer.TdtLayer({
+        name: layerInfo.name,
+        layer: layerInfo.layer,
+        key: layerInfo.key
+      })
+      map.addLayer(tileLayer)
+      layerGroup.push({ name: layerInfo.name, layer: tileLayer })
+    },
+    // 加载wtms图层
+    addWMTSLayer(map, layerGroup, layerInfo, flyto = false) {
+      const options = {
+        url: layerInfo.url,
+        layer: layerInfo.layer,
+        format: layerInfo.format,
+        crs: layerInfo.crs,
+        tileMatrixSetID: layerInfo.tileMatrixSetID,
+        flyTo: flyto
+      }
+      if (layerInfo.style) options.style = layerInfo.style
+      const tileLayer = new mars3d.layer.WmtsLayer(options)
+      map.addLayer(tileLayer)
+      layerGroup.push({ name: layerInfo.name, layer: tileLayer })
+    },
+    // 初始化管线
+    initLine() {
+      queryLineserver = new mars3d.query.QueryArcServer({
+        url: 'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1',
+        popup: 'all',
+        pageSize: 3000
+      })
+      rqline_layer = new mars3d.layer.GeoJsonLayer({
+        enablePickFeatures: false,
+        symbol: {
+          type: 'polylineC',
+          styleOptions: {
+            color: '#eb6b0c',
+            width: 3,
+            hasShadows: true,
+            shadows: Cesium.ShadowMode.ENABLED
+          }
+        }
+      })
+      window.map.addLayer(rqline_layer)
+      queryLineserver.query({
+        success: (result) => {
+          rqline_layer.load({ data: result.geojson })
+        },
+        error: (error, msg) => {
+          console.log('服务访问错误', error)
+        }
+      })
+      const wfsLayer = new mars3d.layer.ArcGisWfsLayer({
+        enablePickFeatures: false,
+        name: '燃气管线',
+        url: 'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/1',
+        minimumLevel: 19,
+        symbol: {
+          type: 'polylineVolumeP',
+          styleOptions: {
+            color: '#eb6b0c',
+            shape: 'pipeline',
+            radius: 0.1
+          },
+          callback: function(attr, styleOpt) {
+            return { setHeight: -3 }
+          }
+          // callback: function(attr, styleOpt) {
+          //   var val = { attr }.attr
+          //   return { addHeight: [-3, -3] }
+          // }
+        }
+      })
+      window.map.addLayer(wfsLayer)
+      window.map.on(mars3d.EventType.cameraChanged, this.changeLine, this)
+    },
+    // 初始化点位
+    initPoint(condition = '') {
+      queryPointserver = new mars3d.query.QueryArcServer({
+        url: 'http://111.198.10.15:13002/arcgis/rest/services/gas/MapServer/0',
+        popup: 'all',
+        pageSize: 5000
+      })
+      rqpoint_layer = new mars3d.layer.GeoJsonLayer({
+        symbol: {
+          type: 'billboard',
+          styleOptions: {
+            image: '../static/images/marker.png',
+            scale: 0.6,
+            pixelOffsetY: -10,
+            scaleByDistance: true,
+            scaleByDistance_far: 30000,
+            scaleByDistance_farValue: 0.6,
+            scaleByDistance_near: 0,
+            scaleByDistance_nearValue: 1.4,
+            clampToGround: true,
+            highlight: { type: 'click', image: '../static/images/high-marker.png' }
+          }
+        },
+        popup: 'all'
+      })
+      window.map.addLayer(rqpoint_layer)
+      rqpoint3D_layer = new mars3d.layer.GeoJsonLayer({
+        symbol: {
+          type: 'modelP',
+          styleOptions: {
+            url: '../static/model/yubi.gltf',
+            scale: 1.5
+          },
+          callback: function(attr, styleOpt) {
+            // var val = { attr }.attr
+            return { setHeight: -3 }
+          }
+        },
+        popup: 'all'
+      })
+      window.map.addLayer(rqpoint3D_layer)
+      if (condition === '') {
+        queryPointserver.query({
+          success: (result) => {
+            if (result.count === 0) {
+              this.$message.warning('未查询到相关记录！')
+              rqpoint_layer.load({ data: { features: null }})
+              rqpoint3D_layer.load({ data: { features: null }})
+              return
+            }
+            rqpoint_layer.load({ data: result.geojson })
+            rqpoint3D_layer.load({ data: result.geojson })
+          },
+          error: (error, msg) => {
+            this.$message.error('服务访问错误,' + error)
+          }
+        })
+      } else {
+        queryPointserver.query({
+          column: 'LineWt',
+          text: condition,
+          success: (result) => {
+            if (result.count === 0) {
+              this.$message.warning('未查询到相关记录！')
+              rqpoint_layer.load({ data: { features: null }})
+              rqpoint3D_layer.load({ data: { features: null }})
+              return
+            }
+            rqpoint_layer.load({ data: result.geojson })
+            rqpoint3D_layer.load({ data: result.geojson })
+          },
+          error: (error, msg) => {
+            this.$message.error('服务访问错误,' + error)
+          }
+        })
+      }
+    },
+    // 控制二维线的显隐
+    changeLine() {
+      console.log('map-level:' + window.map.level)
+      console.log('alpha:' + this.alpha)
+      if (window.map.level <= 19) {
+        rqline_layer.show = true
+        rqpoint_layer.show = true
+      } else if (this.alpha < 90) {
+        rqline_layer.show = false
+        rqpoint_layer.show = false
+      }
+    },
+    // 初始化放这里
+    mapReady() {
+      this.fetchWellList() // 加载全部井
+      this.firstAmount = true
+      this.toolShow = true
+      this.refreshAlarm()
+      if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
+        setTimeout(() => { this.countDown() }, 1000)
+      }
+    },
+    // 过滤图层
+    filterLayer(checkedLayer) {
+      // 1.过滤井图层
+      // if (this.type === 'massMarkers') {
+      //   const wellTypes = checkedLayer.filter(item => item.indexOf('well-') > -1).map(item => item.substring(5))
+      //   if (wellTypes && wellTypes.length > 0) this.filterMassMarker({ wellTypes: wellTypes }) // 加载海量点
+      // } else if (this.type === 'cluster') {
+      //   this.filterClusters() // 加载聚合点
+      // }
+      // 2.选中or没选中报警图层
+      if (checkedLayer.indexOf('alarm') !== -1) {
+        this.showAlarm = true
+      } else {
+        this.showAlarm = false
+      }
+    },
+    // 切换底图
+    changeBaseMap(type) {
+      this.baseLayer = type
+      if (type === 'gaode_vec') {
+        layer2021.show = true
+        layer2020.show = false
+        window.viewer.imageryLayers.raiseToTop(layer2021)
+        // window.map.basemap = 1112
+        // if (this.bloomEffect !== null) {
+        //   this.bloomEffect.enabled = false
+        // }
+      } else {
+        layer2021.show = false
+        layer2020.show = true
+        window.viewer.imageryLayers.raiseToTop(layer2020)
+        // window.map.basemap = 1113
+        // if (this.bloomEffect !== null) {
+        //   this.bloomEffect.enabled = true
+        // }
+      }
+    },
+    // 倒计时函数
+    countDown() {
+      this.clock = setInterval(() => {
+        this.count--
+        if (this.count < 0) { // 当倒计时小于0时清除定时器
+          this.refreshAlarm()
+          this.count = this.baseConfig.refreshTime
+        }
+      }, 1000)
+    },
+    // 获取点位类型，显示点位类型下拉
+    fetchWellType() {
+      getWellType().then(response => {
+        this.wellTypeList = []
+        // 如果该用户支持的点位类型只有一个，则不显示该筛选框
+        const supportWellTypes = this.$store.getters.wellTypes
+        this.wellTypeList = response.data.filter(wellType => {
+          return supportWellTypes.findIndex(item => item == wellType.value) > -1
+        })
+        const wellLayer = {
+          id: 'well',
+          name: '井图层',
+          children: this.wellTypeList.map(item => {
+            return {
+              id: 'well-' + item.value,
+              name: item.name
+            }
+          })
+        }
+        this.layers.splice(0, 1, wellLayer)
+        if (this.baseConfig.showAllWell) {
+          this.checkedLayer = [...this.checkedLayer, 'well', this.wellTypeList.map(item => 'well-' + item.value)]
+        } else {
+          this.checkedLayer = [...this.checkedLayer]
+        }
+        if (this.wellTypeList.length <= 1) {
+          this.showWellType = false
+        }
+      })
+    },
+    /**
+     * 数据筛选
+     * @param listQuery 筛选条件
+     * @param showMessage 是否告知筛选结果
+     */
+    dataFilter(listQuery, showMessage = true) {
+      if (this.type === 'massMarkers') { // 过滤海量点
+        this.filterMassMarker(listQuery, showMessage)
+        this.filterAlarm(listQuery, showMessage)
+      } else if (this.type === 'cluster') { // 过滤聚合点
+        this.filterClusters(listQuery, showMessage)
+        this.filterAlarm(listQuery, showMessage)
+      }
+    },
+    // 清空查询
+    clearSearch() {
+      this.searchMarkers = []
+      this.resultList = []
+    },
+    // 数据查询
+    search(keywords) {
+      if (keywords === '') {
+        this.$message.warning('搜索条件不能为空')
+      } else {
+        this.resultList = this.markers.filter(item => {
+          if (item.wellCode.includes(keywords) || item.wellName.includes(keywords) || item.position.includes(keywords)) {
+            return true
+          } else {
+            return false
+          }
+        })
+        this.initPoint(keywords)
+      }
+    },
+    // 搜索结果页面变化，触发地图展示列表中所有
+    searchPageChange(currentMarkers) {
+      // 增加查询展示图层
+      this.searchMarkers = currentMarkers
+    },
+    // 点击搜索结果项居中，弹窗
+    searchItemClick(marker) {
+      // this.center = marker.lnglat
+      this.openInfoWindow(marker.wellId, marker.lnglat, this.searchResultOffset[1])
+    },
+    // 过滤海量点，给markers赋visible值
+    filterMassMarker(listQuery, showMessage = false) {
+      const hideWellIds = []// 要隐藏的点位编号
+      let center = [] // 待移动到的地图中心
+      // 2. 整理查询条件
+      const keywords = listQuery.keywords // 关键字
+      const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 点位类型
+      let deptids = [] // 所有权属
+      if (listQuery.deptid) {
+        deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
+      }
+      // 3.查询全部井，是否匹配，只要有一项不匹配则show为false
+      for (const marker of this.markers) {
+        let show = true
+        // 关键字不为空，且没有匹配成功，不显示， 关键字匹配点位编号和位置
+        if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.position.indexOf(keywords) !== -1)) {
+          show = false
+        }
+        // 部门不为空， 且没有匹配成功，多部门匹配
+        if (deptids.length > 0 && deptids.indexOf(marker.deptid) === -1) {
+          show = false
+        }
+        // 点位类型不为空，且没有匹配成功
+        if (wellTypes && wellTypes.length > 0 && wellTypes.indexOf(marker.wellType) === -1) {
+          show = false
+        }
+        // 如果show为false，放入需要隐藏的井id列表
+        if (show === false) {
+          hideWellIds.push(marker.wellId)
+        } else {
+          center = marker.lnglat
+        }
+        marker.visible = show
+      }
+      this.resetMassMarker()
+    },
+    // 过滤报警
+    filterAlarm(listQuery, showMessage = false) {
+      const hideWellIds = []// 要隐藏的点位编号
+      // 整理筛选条件
+      const keywords = listQuery.keywords
+      const wellTypes = listQuery.wellTypes ? listQuery.wellTypes : listQuery.wellType ? [listQuery.wellType] : [] // 点位类型
+      let deptids = [] // 所有权属
+      if (listQuery.deptid) {
+        deptids = this.fetchDeptList(listQuery.deptid) // 获取所有下级
+      }
+      // 查询报警的井
+      for (const marker of this.alarmWells) {
+        let show = true
+        // 关键字不为空，且没有匹配成功，不显示， 关键字匹配点位编号和位置
+        if (keywords && keywords !== '' && !(marker.wellCode.indexOf(keywords) !== -1 || marker.position.indexOf(keywords) !== -1)) {
+          show = false
+        }
+        // 部门不为空， 且没有匹配成功，多部门匹配
+        if (deptids.length > 0 && deptids.indexOf(marker.deptid) === -1) {
+          show = false
+        }
+        // 点位类型不为空，且没有匹配成功
+        if (wellTypes && wellTypes.length > 0 && wellTypes.indexOf(marker.wellType) === -1) {
+          show = false
+        }
+        // 如果show为false，放入需要隐藏的井id列表
+        if (show === false) {
+          hideWellIds.push(marker.wellId)
+        }
+        marker.visible = show
+      }
+      // 4.过滤报警marker：alarmWells  如果没有找到符合要求的井，直接将全部查询结果隐藏，并将所有报警隐藏，否则按照查询结果筛选需要隐藏的报警
+      if (hideWellIds.length === this.alarmWells.length) {
+        for (const alarmWell of this.alarmWells) {
+          alarmWell.visible = false
+        }
+      } else {
+        // 将报警隐藏
+        for (const alarmWell of this.alarmWells) {
+          if (hideWellIds.indexOf(alarmWell.wellId) > -1) {
+            alarmWell.visible = false
+          } else {
+            alarmWell.visible = true
+          }
+        }
+      }
+      // 5.过滤显示列表：alarmList
+      this.alarmList = []
+      if (hideWellIds.length > 0) { // 如果有要隐藏的井，过滤
+        for (const alarm of this.alarmListOri) {
+          const findFlag = hideWellIds.findIndex(code => code === alarm.wellId)
+          if (findFlag === -1) {
+            this.alarmList.push(alarm)
+          }
+        }
+      } else { // 如果没有直接等于alarmListOri
+        this.alarmList = this.alarmListOri
+      }
+    },
+    // 获取全部井列表
+    fetchWellList() {
+      this.loading = true
+      getWellList().then(response => {
+        this.loading = false
+        const wells = response.data
+        if (wells.length > 0) {
+          this.markers = []
+          for (const well of wells) {
+            const marker = {
+              ...well,
+              lnglat: [parseFloat(well.lngGaode), parseFloat(well.latGaode)],
+              icon: this.commonIcon,
+              visible: true,
+              wellStatus: 'normal'
+            }
+            this.markers.push(marker)
+          }
+        }
+        this.loading = false
+      })
+    },
+    // 刷新报警列表
+    refreshAlarm() {
+      console.log('refreshAlarm')
+      this.count = this.baseConfig.refreshTime
+      this.loading = true
+      // 如果showAlarm为ture, 确保选中图层报警
+      if (this.showAlarm && this.checkedLayer.indexOf('alarm') == -1) {
+        this.checkedLayer.push('alarm')
+      }
+      getAlarmsNow().then(response => {
+        if (response.code === 200) {
+          this.loading = false
+          // 判断最新报警时间，若和旧的最新时间不一样，则判断是否需要产生声音
+          if (response.data.length > 0) {
+            const latestTime = response.data[0].alarmTime
+            console.log(latestTime, 'vs', this.latestAlarmTime)
+            if (this.latestAlarmTime < latestTime) {
+              // 如果不是初次加载并且声音开关开启状态
+              if ((!this.alarmFirstAmount) && this.baseConfig.alarmSound) {
+                console.log('playAudio')
+                this.playAudio()
+              }
+              this.latestAlarmTime = latestTime
+            }
+          }
+          this.alarmFirstAmount = false // 初次加载完毕
+          // 获取当前报警列表
+          this.alarmListOri = response.data // 列表原始
+          this.alarmList = response.data // 要显示的报警列表
+          this.alarmWells = [] // 报警的井列表
+          for (const alarm of response.data) {
+            if (this.alarmWells.findIndex(item => item.wellCode === alarm.wellCode) == -1) {
+              this.alarmWells.push({
+                wellCode: alarm.wellCode,
+                wellId: alarm.wellId,
+                wellType: alarm.wellType,
+                lngGaode: alarm.lngGaode,
+                latGaode: alarm.latGaode,
+                coordinates: [alarm.lngGaode, alarm.latGaode],
+                position: alarm.position,
+                visible: true
+              })
+            }
+          }
+          console.log('alarmWells Length', this.alarmWells.length)
+        }
+      })
+    },
+    /**
+     * 打开报警弹窗
+     * @param wellId 井id
+     * @param coordinates 弹窗位置： [经度，纬度]
+     * @param needCenter 是否需要将点居中
+     */
+    openAlarmWindow(wellId, coordinates, needCenter = false) {
+      console.log('openAlarmWindow:' + wellId)
+      // if (this.needCenter) { // 如果需要居中
+      //   this.center = coordinates
+      // }
+      // 获取报警详情
+      getWellAlarms(wellId).then(response => {
+        if (response.code === 200) {
+          const wellInfo = response.data
+          const alarmInfo = {
+            wellCode: response.data.wellCode,
+            position: response.data.position,
+            deptName: response.data.deptName,
+            wellTypeName: response.data.wellTypeName,
+            alarms: response.data.alarmList,
+            deep: response.data.deep
+          }
+          const AlarmWindow = Vue.extend({
+            render: h => h(AlarmInfoWindow, { props: { alarmInfo: alarmInfo }})
+          })
+          const alarmWindow = new AlarmWindow().$mount()
+          const infoWindow = new window.AMap.InfoWindow({
+            content: alarmWindow.$el, // 显示内容
+            offset: [0, this.alarmOffset[1]], // 偏移
+            autoMove: true // 是否自动调整窗体到视野内
+          })
+          infoWindow.open(window.map, new toLngLat(coordinates))
+        }
+      })
+    },
+    /**
+     * 打开井详情弹窗
+     * @param wellId 井id
+     * @param coordinates 弹窗位置： [经度，纬度]
+     * @param offsetY 弹窗Y轴偏移，为负值
+     */
+    openInfoWindow(wellId, coordinates, offsetY) {
+      this.clearInfoWindow()
+      // 首先获取井详情
+      getWellInfo(wellId).then(response => {
+        if (response.code === 200) {
+          const wellInfo = { ...response.data }
+          // 加载弹窗组件
+          const WellInfo = Vue.extend({
+            render: h => h(WellInfoWindow, { props: { wellInfo: wellInfo }})
+          })
+          const wellWindow = new WellInfo().$mount()
+          const infoWindow = new window.AMap.InfoWindow({
+            content: wellWindow.$el, // 显示内容
+            offset: [0, offsetY], // 偏移
+            autoMove: true // 是否自动调整窗体到视野内
+          })
+          infoWindow.open(window.map, new toLngLat(coordinates))
+        }
+      })
+    },
+    // 关闭所有弹窗
+    clearInfoWindow() {
+      const { map } = this
+      map.clearInfoWindow()
+    },
+    // 点击报警列表
+    alarmRowClick(row) {
+      console.log('alarmRowClick')
+      const wellId = row.wellId
+      for (const alarmWell of this.alarmWells) {
+        if (alarmWell.wellId === wellId) {
+          // this.center = alarmWell.coordinates
+          if (this.zoom < 16) {
+            this.zoom = 16
+          }
+          this.openAlarmWindow(alarmWell.wellId, alarmWell.coordinates, true)
+        }
+      }
+    },
+    // 点击工具箱菜单, menu:{menu:'xxx', name:''}, 建议菜单menu属性的命名与自定义弹窗的show属性名称保持同一规则
+    clickMenu(menu) {
+      this.closeAllPopup()
+      const key = menu.menu + 'WindowShow'
+      const obj = {}
+      obj[key] = true // 将该值置为false, 需要借助obj中转
+      Object.assign(this.menus, obj)
+    },
+    // 关闭所有菜单点出的弹窗
+    closeAllPopup() {
+      for (const key in this.menus) {
+        if (key.indexOf('WindowShow') > -1) {
+          // 将该值置为false, 需要借助obj中转
+          const obj = {}
+          obj[key] = false
+          Object.assign(this.menus, obj)
+        }
+      }
+    },
+    // 关闭数据筛选弹窗
+    closePopupDataFilter() {
+      Object.assign(this.menus, { dataFilterWindowShow: false })
+    },
+    // 坐标定位，居中，绘点
+    setCenter(position) {
+      this.center = position
+      var center = { lat: this.center[1], lng: this.center[0], alt: 30000, heading: 360, pitch: -45 }
+      window.map.setCameraView(center)
+    },
+    // 坐标拾取， 在地图上绘点
+    pickerPosition() {
+      const { searchResultOffset, searchResultIcon, searchResultSize, center } = this
+      const icon = new window.AMap.Icon({
+        size: toSize(searchResultSize), // 图标尺寸
+        image: searchResultIcon, // Icon的图像
+        imageSize: toSize(searchResultSize) // 根据所设置的大小拉伸或压缩图片
+      })
+      const marker = new window.AMap.Marker({
+        icon: icon,
+        position: center,
+        offset: toPixel(searchResultOffset),
+        draggable: true
+      })
+      marker.on('dragend', e => {
+        const position = [e.lnglat.lng, e.lnglat.lat]
+        this.$refs.popupLocation.setQuery(position)
+      })
+      marker.setMap(window.map)
+      this.tempMarker = marker
+    },
+    // TODO: 关闭坐标定位窗口， 清除地图上的标注
+    closePopupLocation() {
+      Object.assign(this.menus, { locationWindowShow: false })
+    },
+    // 获取当前deptid的所有下级id,仅最多支持3级
+    fetchDeptList(deptid) {
+      console.log('fetchDeptList')
+      const deptids = [deptid] // 储存了该pid和其子集
+      const deptlist = this.$refs.deptSelect.fetchDeptTree()
+      for (const dept of deptlist) {
+        if (dept.pid === deptid) {
+          deptids.push(dept.id)
+        }
+      }
+      const result = []
+      // 查找所有列表中有没有deptids里面的本人或子集
+      if (deptlist.length > 0) {
+        for (const dept of deptlist) {
+          if (deptids.indexOf(dept.id) !== -1) {
+            result.push(dept.id)
+          } else if (deptids.indexOf(dept.pid) !== -1) {
+            result.push(dept.id)
+          }
+        }
+      }
+      console.log(result)
+      return result
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+// 地图
+.overview-map-container{
+  width: 100%;
+  height: 100%;
+}
+
+.search-marker{
+  position: relative;
+  .search-marker-image{
+    width: 100%;
+    height: 100%;
+  }
+  .search-marker-label{
+    position:absolute;
+    font-size: 14px;
+    font-weight: 600;
+    color:#FFF;
+    z-index:50;
+    top: 4px;
+    left: 50%;
+    transform: translateX(-50%)
+  }
+}
+.cover{
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  /*background-color: red;*/
+  background-color: #1a2126;
+  width: 100px;
+  height: 30px;
+}
+</style>
diff --git a/src/views/zhangqiu/zqindex.vue b/src/views/zhangqiu/zqindex.vue
index 6b395fc..a5623fd 100644
--- a/src/views/zhangqiu/zqindex.vue
+++ b/src/views/zhangqiu/zqindex.vue
@@ -4,16 +4,16 @@
     <header-title />
     <div class="content">
       <div class="center-bottom">
-        <overview3dzq style="height:100%;width:100%;" />
+        <map3d />
       </div>
       <!--左半-->
-      <div class="left">
+      <div v-if="chartShow" class="left">
         <device-installed />
         <device-alarm-sum />
         <handling-alarm />
       </div>
       <!--右半-->
-      <div class="right">
+      <div v-if="chartShow" class="right">
         <seven-days-operation-status />
         <line-department />
         <device-alarm />
@@ -24,7 +24,6 @@
 
 <script>
 
-import Overview3dzq from '@/views/overview/overview3dzq'
 import DeviceInstalled from '@/views/zhangqiu/components/deviceInstalled/deviceInstalled'
 import DeviceAlarmSum from '@/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum'
 import HandlingAlarm from '@/views/zhangqiu/components/handlingAlarm/handlingAlarm'
@@ -32,18 +31,15 @@
 import LineDepartment from '@/views/zhangqiu/components/lineDepartment/lineDepartment'
 import DeviceAlarm from '@/views/zhangqiu/components/deviceAlarm/deviceAlarm'
 import headerTitle from '@/views/zhangqiu/components/headerTitle.vue'
-import showItem from '@/views/zhangqiu/components/showItem.vue'
-import progressBar from '@/views/zhangqiu/components/progressBar.vue'
-import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
-import Chart from '@/views/zhangqiu/components/chart.vue'
-import tableData from '@/views/zhangqiu/components/tableData.vue'
-import TableData from '@/views/zhangqiu/components/tableData.vue'
+import Map3d from '@/views/zhangqiu/components/map3d'
 
 export default {
   name: 'Zqindex',
-  components: { DeviceAlarm, LineDepartment, SevenDaysOperationStatus, HandlingAlarm, DeviceAlarmSum, DeviceInstalled, headerTitle, showItem, progressBar, ProgressBar, tableData, TableData, Chart, Overview3dzq },
+  components: { Map3d, DeviceAlarm, LineDepartment, SevenDaysOperationStatus, HandlingAlarm, DeviceAlarmSum, DeviceInstalled, headerTitle },
   data() {
-    return {}
+    return {
+      chartShow: true
+    }
   }
 }
 </script>