diff --git a/package.json b/package.json
index 08fc1f3..4b4e458 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "^0.4.0",
     "animate.css": "^4.1.1",
     "axios": "^0.21.1",
@@ -29,6 +30,7 @@
     "nprogress": "^0.2.0",
     "uppercamelcase": "^3.0.0",
     "v-charts": "^1.19.0",
+    "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
     "vue-amap": "^0.5.10",
     "vue-router": "^3.2.0",

diff --git a/package.json b/package.json
index 08fc1f3..4b4e458 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "^0.4.0",
     "animate.css": "^4.1.1",
     "axios": "^0.21.1",
@@ -29,6 +30,7 @@
     "nprogress": "^0.2.0",
     "uppercamelcase": "^3.0.0",
     "v-charts": "^1.19.0",
+    "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
     "vue-amap": "^0.5.10",
     "vue-router": "^3.2.0",
diff --git a/src/main.js b/src/main.js
index cb309a1..1ceea3c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,6 +38,11 @@
 // 引入v-charts
 import VCharts from 'v-charts'
 Vue.use(VCharts)
+
+// 引入datav
+import dataV from '@jiaminghi/data-view'
+Vue.use(dataV)
+
 // 引入音频文件
 import audio from '@/assets/audio/alarm.mp3'
 

diff --git a/package.json b/package.json
index 08fc1f3..4b4e458 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "^0.4.0",
     "animate.css": "^4.1.1",
     "axios": "^0.21.1",
@@ -29,6 +30,7 @@
     "nprogress": "^0.2.0",
     "uppercamelcase": "^3.0.0",
     "v-charts": "^1.19.0",
+    "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
     "vue-amap": "^0.5.10",
     "vue-router": "^3.2.0",
diff --git a/src/main.js b/src/main.js
index cb309a1..1ceea3c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,6 +38,11 @@
 // 引入v-charts
 import VCharts from 'v-charts'
 Vue.use(VCharts)
+
+// 引入datav
+import dataV from '@jiaminghi/data-view'
+Vue.use(dataV)
+
 // 引入音频文件
 import audio from '@/assets/audio/alarm.mp3'
 
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
new file mode 100644
index 0000000..e67306d
--- /dev/null
+++ b/src/views/zhangqiu/components/topHeader.vue
@@ -0,0 +1,77 @@
+<!--顶部-->
+<template>
+  <div class="top-header">
+    <dv-decoration-8 class="header-left-decoration" :color="colors" />
+    <dv-decoration-5 class="header-center-decoration" :color="colors" />
+    <dv-decoration-8 class="header-right-decoration" :reverse="true" :color="colors" />
+    <div class="center-title">
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TopHeader',
+  props: {
+    colors: {
+      type: Array,
+      default: () => {
+        return ['#4f98ee', '#67adee']
+      }
+    }, // 边框主题颜色，支持两个颜色
+    title: {
+      type: String,
+      default: '数据可视化大屏'
+    }, // 标题文字
+    color: {
+      type: String,
+      default: '#ffffff'
+    }// 标题颜色
+
+  },
+  methods: {
+    jumpToMap: function() {
+      this.$router.push('/brain/map')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .top-header {
+    position: fixed;
+    z-index:1000;
+    top:0;
+    left:0;
+    width: 100%;
+    height: 80px;
+    //height: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-shrink: 0;
+    /*中间装饰*/
+    .header-center-decoration {
+      width: 60%;
+      height: 70%;
+      margin-top: 0.8rem;
+    }
+    /*左右装饰*/
+    .header-left-decoration, .header-right-decoration {
+      width: 18%;
+      height: 70%;
+    }
+
+    .center-title {
+      position: absolute;
+      font-size: 0.9rem;
+      top:0.04rem;
+      line-height: 1.5;
+      font-weight: bold;
+      left: 50%;
+      cursor: pointer;
+      color: white;
+      transform: translateX(-50%);
+    }
+  }
+</style>

diff --git a/package.json b/package.json
index 08fc1f3..4b4e458 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "^0.4.0",
     "animate.css": "^4.1.1",
     "axios": "^0.21.1",
@@ -29,6 +30,7 @@
     "nprogress": "^0.2.0",
     "uppercamelcase": "^3.0.0",
     "v-charts": "^1.19.0",
+    "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
     "vue-amap": "^0.5.10",
     "vue-router": "^3.2.0",
diff --git a/src/main.js b/src/main.js
index cb309a1..1ceea3c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,6 +38,11 @@
 // 引入v-charts
 import VCharts from 'v-charts'
 Vue.use(VCharts)
+
+// 引入datav
+import dataV from '@jiaminghi/data-view'
+Vue.use(dataV)
+
 // 引入音频文件
 import audio from '@/assets/audio/alarm.mp3'
 
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
new file mode 100644
index 0000000..e67306d
--- /dev/null
+++ b/src/views/zhangqiu/components/topHeader.vue
@@ -0,0 +1,77 @@
+<!--顶部-->
+<template>
+  <div class="top-header">
+    <dv-decoration-8 class="header-left-decoration" :color="colors" />
+    <dv-decoration-5 class="header-center-decoration" :color="colors" />
+    <dv-decoration-8 class="header-right-decoration" :reverse="true" :color="colors" />
+    <div class="center-title">
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TopHeader',
+  props: {
+    colors: {
+      type: Array,
+      default: () => {
+        return ['#4f98ee', '#67adee']
+      }
+    }, // 边框主题颜色，支持两个颜色
+    title: {
+      type: String,
+      default: '数据可视化大屏'
+    }, // 标题文字
+    color: {
+      type: String,
+      default: '#ffffff'
+    }// 标题颜色
+
+  },
+  methods: {
+    jumpToMap: function() {
+      this.$router.push('/brain/map')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .top-header {
+    position: fixed;
+    z-index:1000;
+    top:0;
+    left:0;
+    width: 100%;
+    height: 80px;
+    //height: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-shrink: 0;
+    /*中间装饰*/
+    .header-center-decoration {
+      width: 60%;
+      height: 70%;
+      margin-top: 0.8rem;
+    }
+    /*左右装饰*/
+    .header-left-decoration, .header-right-decoration {
+      width: 18%;
+      height: 70%;
+    }
+
+    .center-title {
+      position: absolute;
+      font-size: 0.9rem;
+      top:0.04rem;
+      line-height: 1.5;
+      font-weight: bold;
+      left: 50%;
+      cursor: pointer;
+      color: white;
+      transform: translateX(-50%);
+    }
+  }
+</style>
diff --git a/src/views/zhangqiu/zqindex.vue b/src/views/zhangqiu/zqindex.vue
index c5cdbca..3603f5d 100644
--- a/src/views/zhangqiu/zqindex.vue
+++ b/src/views/zhangqiu/zqindex.vue
@@ -1,15 +1,16 @@
 <template>
-  <div class="full-container">
-    <!--    <overview3dzq />-->
-    <!--    <iframe src="http://192.168.83.32/zq/" class="charts" />-->
-  </div>
+  <dv-full-screen-container>
+    <top-header title="章丘区燃气地下管网安全监测管理平台" />
+    <overview3dzq />
+  </dv-full-screen-container>
 </template>
 
 <script>
-// import Overview3dzq from '@/views/overview/overview3dzq'
+import Overview3dzq from '@/views/overview/overview3dzq'
+import TopHeader from '@/views/zhangqiu/components/topHeader'
 export default {
   name: 'Zqindex',
-  // components: { Overview3dzq },
+  components: { TopHeader, Overview3dzq },
   data() {
     return {}
   }