diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/border.png b/src/views/zhangqiu/resources/border.png
new file mode 100644
index 0000000..44a05d3
--- /dev/null
+++ b/src/views/zhangqiu/resources/border.png
Binary files differ

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/border.png b/src/views/zhangqiu/resources/border.png
new file mode 100644
index 0000000..44a05d3
--- /dev/null
+++ b/src/views/zhangqiu/resources/border.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/deviceInstalledIcon.png b/src/views/zhangqiu/resources/deviceInstalledIcon.png
new file mode 100644
index 0000000..7f3822b
--- /dev/null
+++ b/src/views/zhangqiu/resources/deviceInstalledIcon.png
Binary files differ

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/border.png b/src/views/zhangqiu/resources/border.png
new file mode 100644
index 0000000..44a05d3
--- /dev/null
+++ b/src/views/zhangqiu/resources/border.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/deviceInstalledIcon.png b/src/views/zhangqiu/resources/deviceInstalledIcon.png
new file mode 100644
index 0000000..7f3822b
--- /dev/null
+++ b/src/views/zhangqiu/resources/deviceInstalledIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle1.png b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
new file mode 100644
index 0000000..a0e7900
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
Binary files differ

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/border.png b/src/views/zhangqiu/resources/border.png
new file mode 100644
index 0000000..44a05d3
--- /dev/null
+++ b/src/views/zhangqiu/resources/border.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/deviceInstalledIcon.png b/src/views/zhangqiu/resources/deviceInstalledIcon.png
new file mode 100644
index 0000000..7f3822b
--- /dev/null
+++ b/src/views/zhangqiu/resources/deviceInstalledIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle1.png b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
new file mode 100644
index 0000000..a0e7900
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle2.png b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
new file mode 100644
index 0000000..523f402
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
Binary files differ

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/border.png b/src/views/zhangqiu/resources/border.png
new file mode 100644
index 0000000..44a05d3
--- /dev/null
+++ b/src/views/zhangqiu/resources/border.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/deviceInstalledIcon.png b/src/views/zhangqiu/resources/deviceInstalledIcon.png
new file mode 100644
index 0000000..7f3822b
--- /dev/null
+++ b/src/views/zhangqiu/resources/deviceInstalledIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle1.png b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
new file mode 100644
index 0000000..a0e7900
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle2.png b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
new file mode 100644
index 0000000..523f402
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle3.png b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
new file mode 100644
index 0000000..79bd1a6
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
Binary files differ

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/border.png b/src/views/zhangqiu/resources/border.png
new file mode 100644
index 0000000..44a05d3
--- /dev/null
+++ b/src/views/zhangqiu/resources/border.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/deviceInstalledIcon.png b/src/views/zhangqiu/resources/deviceInstalledIcon.png
new file mode 100644
index 0000000..7f3822b
--- /dev/null
+++ b/src/views/zhangqiu/resources/deviceInstalledIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle1.png b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
new file mode 100644
index 0000000..a0e7900
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle2.png b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
new file mode 100644
index 0000000..523f402
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle3.png b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
new file mode 100644
index 0000000..79bd1a6
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/headerTitle.png b/src/views/zhangqiu/resources/headerTitle.png
new file mode 100644
index 0000000..4c5861b
--- /dev/null
+++ b/src/views/zhangqiu/resources/headerTitle.png
Binary files differ

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/border.png b/src/views/zhangqiu/resources/border.png
new file mode 100644
index 0000000..44a05d3
--- /dev/null
+++ b/src/views/zhangqiu/resources/border.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/deviceInstalledIcon.png b/src/views/zhangqiu/resources/deviceInstalledIcon.png
new file mode 100644
index 0000000..7f3822b
--- /dev/null
+++ b/src/views/zhangqiu/resources/deviceInstalledIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle1.png b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
new file mode 100644
index 0000000..a0e7900
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle2.png b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
new file mode 100644
index 0000000..523f402
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle3.png b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
new file mode 100644
index 0000000..79bd1a6
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/headerTitle.png b/src/views/zhangqiu/resources/headerTitle.png
new file mode 100644
index 0000000..4c5861b
--- /dev/null
+++ b/src/views/zhangqiu/resources/headerTitle.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/littleTitle.png b/src/views/zhangqiu/resources/littleTitle.png
new file mode 100644
index 0000000..ce8a809
--- /dev/null
+++ b/src/views/zhangqiu/resources/littleTitle.png
Binary files differ

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/border.png b/src/views/zhangqiu/resources/border.png
new file mode 100644
index 0000000..44a05d3
--- /dev/null
+++ b/src/views/zhangqiu/resources/border.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/deviceInstalledIcon.png b/src/views/zhangqiu/resources/deviceInstalledIcon.png
new file mode 100644
index 0000000..7f3822b
--- /dev/null
+++ b/src/views/zhangqiu/resources/deviceInstalledIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle1.png b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
new file mode 100644
index 0000000..a0e7900
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle2.png b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
new file mode 100644
index 0000000..523f402
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle3.png b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
new file mode 100644
index 0000000..79bd1a6
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/headerTitle.png b/src/views/zhangqiu/resources/headerTitle.png
new file mode 100644
index 0000000..4c5861b
--- /dev/null
+++ b/src/views/zhangqiu/resources/headerTitle.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/littleTitle.png b/src/views/zhangqiu/resources/littleTitle.png
new file mode 100644
index 0000000..ce8a809
--- /dev/null
+++ b/src/views/zhangqiu/resources/littleTitle.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png b/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png
new file mode 100644
index 0000000..0e08c03
--- /dev/null
+++ b/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png
Binary files differ

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/border.png b/src/views/zhangqiu/resources/border.png
new file mode 100644
index 0000000..44a05d3
--- /dev/null
+++ b/src/views/zhangqiu/resources/border.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/deviceInstalledIcon.png b/src/views/zhangqiu/resources/deviceInstalledIcon.png
new file mode 100644
index 0000000..7f3822b
--- /dev/null
+++ b/src/views/zhangqiu/resources/deviceInstalledIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle1.png b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
new file mode 100644
index 0000000..a0e7900
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle2.png b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
new file mode 100644
index 0000000..523f402
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle3.png b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
new file mode 100644
index 0000000..79bd1a6
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/headerTitle.png b/src/views/zhangqiu/resources/headerTitle.png
new file mode 100644
index 0000000..4c5861b
--- /dev/null
+++ b/src/views/zhangqiu/resources/headerTitle.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/littleTitle.png b/src/views/zhangqiu/resources/littleTitle.png
new file mode 100644
index 0000000..ce8a809
--- /dev/null
+++ b/src/views/zhangqiu/resources/littleTitle.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png b/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png
new file mode 100644
index 0000000..0e08c03
--- /dev/null
+++ b/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png b/src/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png
new file mode 100644
index 0000000..fc5afc7
--- /dev/null
+++ b/src/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png
Binary files differ

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/border.png b/src/views/zhangqiu/resources/border.png
new file mode 100644
index 0000000..44a05d3
--- /dev/null
+++ b/src/views/zhangqiu/resources/border.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/deviceInstalledIcon.png b/src/views/zhangqiu/resources/deviceInstalledIcon.png
new file mode 100644
index 0000000..7f3822b
--- /dev/null
+++ b/src/views/zhangqiu/resources/deviceInstalledIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle1.png b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
new file mode 100644
index 0000000..a0e7900
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle2.png b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
new file mode 100644
index 0000000..523f402
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle3.png b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
new file mode 100644
index 0000000..79bd1a6
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/headerTitle.png b/src/views/zhangqiu/resources/headerTitle.png
new file mode 100644
index 0000000..4c5861b
--- /dev/null
+++ b/src/views/zhangqiu/resources/headerTitle.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/littleTitle.png b/src/views/zhangqiu/resources/littleTitle.png
new file mode 100644
index 0000000..ce8a809
--- /dev/null
+++ b/src/views/zhangqiu/resources/littleTitle.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png b/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png
new file mode 100644
index 0000000..0e08c03
--- /dev/null
+++ b/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png b/src/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png
new file mode 100644
index 0000000..fc5afc7
--- /dev/null
+++ b/src/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/sevenDaysOperationStatusTop.png b/src/views/zhangqiu/resources/sevenDaysOperationStatusTop.png
new file mode 100644
index 0000000..b328d3f
--- /dev/null
+++ b/src/views/zhangqiu/resources/sevenDaysOperationStatusTop.png
Binary files differ

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/border.png b/src/views/zhangqiu/resources/border.png
new file mode 100644
index 0000000..44a05d3
--- /dev/null
+++ b/src/views/zhangqiu/resources/border.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/deviceInstalledIcon.png b/src/views/zhangqiu/resources/deviceInstalledIcon.png
new file mode 100644
index 0000000..7f3822b
--- /dev/null
+++ b/src/views/zhangqiu/resources/deviceInstalledIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle1.png b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
new file mode 100644
index 0000000..a0e7900
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle2.png b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
new file mode 100644
index 0000000..523f402
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle3.png b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
new file mode 100644
index 0000000..79bd1a6
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/headerTitle.png b/src/views/zhangqiu/resources/headerTitle.png
new file mode 100644
index 0000000..4c5861b
--- /dev/null
+++ b/src/views/zhangqiu/resources/headerTitle.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/littleTitle.png b/src/views/zhangqiu/resources/littleTitle.png
new file mode 100644
index 0000000..ce8a809
--- /dev/null
+++ b/src/views/zhangqiu/resources/littleTitle.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png b/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png
new file mode 100644
index 0000000..0e08c03
--- /dev/null
+++ b/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png b/src/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png
new file mode 100644
index 0000000..fc5afc7
--- /dev/null
+++ b/src/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/sevenDaysOperationStatusTop.png b/src/views/zhangqiu/resources/sevenDaysOperationStatusTop.png
new file mode 100644
index 0000000..b328d3f
--- /dev/null
+++ b/src/views/zhangqiu/resources/sevenDaysOperationStatusTop.png
Binary files differ
diff --git a/src/views/zhangqiu/router/index.js b/src/views/zhangqiu/router/index.js
new file mode 100644
index 0000000..5ef5556
--- /dev/null
+++ b/src/views/zhangqiu/router/index.js
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '@/views/zhangqiu//charts.vue'
+
+const routes = [
+  {
+    path: '/home',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '.@/views/zhangqiu/zqindex.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router

diff --git a/src/router/modules/well.js b/src/router/modules/well.js
index 17ed4e1..8018bb8 100644
--- a/src/router/modules/well.js
+++ b/src/router/modules/well.js
@@ -233,5 +233,27 @@
         meta: { title: 'AI实验室', icon: 'icon-config', permission: ['/intelligence/statics'] }
       }
     ]
+  },
+  {
+      path: 'zqindex',
+      component: Layout,
+      redirect: '/zqindex',
+      meta: {
+        title: '章丘燃气地下管网安全监测管理平台',
+        icon: 'icon-globe' // 图标
+        // permission: ['/overview/3d']// 权限名称
+    },
+    children: [
+      {
+        // path: '/overview3d',
+        // component: () => import('@/views/overview/overview3d'),
+        // name: 'overview3d',
+        // meta: { title: '管网运行总览', icon: 'icon-config', permission: ['/overview/3d'] }
+        path: '/zqindex',
+        component: () => import('@/views/zhangqiu/zqindex'),
+        name: 'zqindex',
+        meta: { title: '章丘燃气地下管网安全监测管理平台', icon: 'icon-config', permission: ['/zqindex'] }
+      }
+    ]
   }
 ]
diff --git a/src/views/zhangqiu/App.vue b/src/views/zhangqiu/App.vue
new file mode 100644
index 0000000..36420c5
--- /dev/null
+++ b/src/views/zhangqiu/App.vue
@@ -0,0 +1,4 @@
+<template>
+  <router-view/>
+</template>
+
diff --git a/src/views/zhangqiu/app.css b/src/views/zhangqiu/app.css
new file mode 100644
index 0000000..f310793
--- /dev/null
+++ b/src/views/zhangqiu/app.css
@@ -0,0 +1,10 @@
+*{
+    margin: 0;
+    padding:0;
+}
+html {
+    font-size: 100px;
+}
+body {
+    font-size: 12px;
+}
diff --git a/src/views/zhangqiu/components/chart.vue b/src/views/zhangqiu/components/chart.vue
new file mode 100644
index 0000000..a1a005f
--- /dev/null
+++ b/src/views/zhangqiu/components/chart.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="box">
+    <div id="container"></div>
+  </div>
+</template>
+
+<script>
+import { option2 } from "@/views/zhangqiu/js/data";
+import Charts from "@jiaminghi/charts";
+export default {
+  name: "Chart",
+  data() {
+    return {
+      data:option2,
+    };
+  },
+  mounted() {
+    this.chart();
+  },
+  methods: {
+    chart() {
+      const container = document.getElementById("container");
+      const myChart = new Charts(container);
+      myChart.setOption(this.data);
+    },
+  },
+};
+</script>
+
+<style>
+#container {
+  /*width: 350px;*/
+  height: 200px;
+  /* background: #f1f1f1; */
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
new file mode 100644
index 0000000..c4f3d68
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarm/deviceAlarm.vue
@@ -0,0 +1,27 @@
+<template>
+  <show-item>
+    {{ '设备警告' }}
+    <template #container>
+      <div class="table">
+        <table-data></table-data>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import tableData from '@/views/zhangqiu/components/tableData.vue'
+import TableData from '@/views/zhangqiu/components/tableData.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: "DeviceAlarm",
+  components: { tableData, TableData, showItem }
+  }
+</script>
+
+<style scoped>
+.table{
+  margin-top: 10px
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
new file mode 100644
index 0000000..8149bfd
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum.vue
@@ -0,0 +1,81 @@
+<template>
+  <show-item>
+    {{'报警设备汇总'}}
+    <template #container>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[0].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[0].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[1].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[1].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[2].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[2].title}}</progress-bar>
+      </div>
+      <div class="progressBox">
+        <progress-bar :deviceAlarm="deviceAlarm" :percent="deviceAlarm[3].context" wrapColor="" borderColor="" dotColor="#00A3CC" >{{deviceAlarm[3].title}}</progress-bar>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import progressBar from '@/views/zhangqiu/components/progressBar.vue'
+import ProgressBar from '@/views/zhangqiu/components/progressBar.vue'
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceAlarmSum',
+  components: {showItem, ProgressBar, progressBar },
+  data() {
+    return {
+      deviceAlarm: [
+        {
+          title: '井盖测试仪',
+          context: '',
+        },
+        {
+          title: '燃气智能监测终端',
+          context: '',
+        },
+        {
+          title: '可燃气体监测',
+          context: '',
+        },
+        {
+          title: '燃气管盯',
+          context: '',
+        }
+      ]
+    }
+  },
+  created() {
+    this.getWellPercent()
+    this.getGasPercent()
+    this.getGasdectorPercent()
+    this.getTubePercent()
+  },
+  methods: {
+    getWellPercent() {
+      this.deviceAlarm[0].context = '10'
+    },
+    getGasPercent() {
+      this.deviceAlarm[1].context = '70'
+    },
+    getGasdectorPercent() {
+      this.deviceAlarm[2].context = '50'
+    },
+    getTubePercent() {
+      this.deviceAlarm[3].context = '45'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  .progressBox{
+    margin-top: 15px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
new file mode 100644
index 0000000..c4cecac
--- /dev/null
+++ b/src/views/zhangqiu/components/deviceInstalled/deviceInstalled.vue
@@ -0,0 +1,222 @@
+<template>
+  <show-item>
+    {{'已安装设备'}}
+    <template #container>
+      <div class="showItem">
+        <div class="showItem_left">
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[0].context}}{{deviceInstalled[0].flag}}</div>
+                <div class="text2">{{deviceInstalled[0].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[1].context}}{{deviceInstalled[1].flag}}</div>
+                <div class="text2">{{deviceInstalled[1].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div :deviceInstalled="deviceInstalled" class="text1">{{deviceInstalled[2].context}}{{deviceInstalled[2].flag}}</div>
+                <div class="text2">{{deviceInstalled[2].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="showItem_right">
+          <!-- y右边 -->
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[3].context}}{{deviceInstalled[3].flag}}</div>
+                <div class="text2">{{deviceInstalled[3].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[4].context}}{{deviceInstalled[4].flag}}</div>
+                <div class="text2">{{deviceInstalled[4].title}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="itemconT">
+            <div class="itemconT_left">
+              <div class="itemconT_img">
+                <div class="itemconT_img_img">
+                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
+                </div>
+              </div>
+            </div>
+            <div class="itemconT_right">
+              <div class="right_text">
+                <div class="text1">{{deviceInstalled[5].context}}{{deviceInstalled[5].flag}}</div>
+                <div class="text2">{{deviceInstalled[5].title}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'DeviceInstalled',
+  components: {showItem},
+  data() {
+    return {
+      icon:{
+        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
+      },
+      deviceInstalled:
+        [
+          {
+            title: '井盖',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '燃气终端',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '云台',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '燃气管盯',
+            context: '',
+            flag: '个'
+          },
+          {
+            title: '可燃气体',
+            context: '',
+            flag: '台'
+          },
+          {
+            title: '电子标识器',
+            context: '',
+            flag: '个'
+          }
+        ]
+    }
+  },
+  created() {
+    this.getWellCount()
+    this.getGasCount()
+    this.getCloudCount()
+    this.getTubeCount()
+    this.getGasdectorCount()
+    this.getElecCount()
+  },
+  methods: {
+    getWellCount() {
+      this.deviceInstalled[0].context = '2250'
+    },
+    getGasCount() {
+      this.deviceInstalled[1].context = '1050'
+    },
+    getCloudCount() {
+      this.deviceInstalled[2].context = '8250'
+    },
+    getTubeCount() {
+      this.deviceInstalled[3].context = '1231'
+    },
+    getGasdectorCount() {
+      this.deviceInstalled[4].context = '2141'
+    },
+    getElecCount() {
+      this.deviceInstalled[5].context = '8250'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.showItem{
+  display: flex;
+  &_left,&_right{
+    flex: 1;
+  }
+  .itemconT{
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    &_left,&_right{
+      display: flex;
+      //display: 1;
+    }
+    &_img{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &_img{
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .text1{
+      font-size: 15px ;
+      color: #00A3CC;
+      font-weight: bolder;
+    }
+    .text2{
+      font-size: 15px ;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
new file mode 100644
index 0000000..1176ccd
--- /dev/null
+++ b/src/views/zhangqiu/components/handlingAlarm/handlingAlarm.vue
@@ -0,0 +1,218 @@
+<template>
+  <show-item>
+    {{ '报警处置情况' }}
+    <template #container>
+      <div class="situation">
+        <div class="situation_left">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[0].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[0].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[0].finished}}</span>%</div>
+              <div>未完成<span class="color_EE9611 right_text">{{handlingAlarm[0].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[1].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[1].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[1].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[1].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+        <div class="situation_right">
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[2].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[2].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[2].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[2].unfinished}}</span>%</div>
+            </div>
+          </div>
+          <div class="situation_item">
+            <div class="situation_item_left">
+              <div class="left_relative">
+                <img :src="icon.circle1" alt="" class="img1"/>
+                <img :src="icon.circle2" alt="" class="img2"/>
+                <img :src="icon.circle3" alt="" class="img3"/>
+                <div :handlingAlarm="handlingAlarm" class="vls">{{handlingAlarm[3].status}}</div>
+              </div>
+              <div :handlingAlarm="handlingAlarm" class="situation_text">{{handlingAlarm[3].title}}</div>
+            </div>
+            <div class="situation_item_right">
+              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{handlingAlarm[3].finished}}</span>%</div>
+              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{handlingAlarm[3].unfinished}}</span>%</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'HandlingAlarm',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        circle1: require('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
+        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
+        circle3: require('@/views/zhangqiu/resources/handlingAlarmCircle3.png')
+      },
+      handlingAlarm: [
+        {
+          title: '井盖',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '其他气体',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '燃气',
+          finished: '',
+          unfinished: '',
+          status: ''
+        },
+        {
+          title: '云台',
+          finished: '',
+          unfinished: '',
+          status: ''
+        }
+      ],
+    }
+  },
+  created() {
+    this.getWellSituation()
+    this.getOtherGasSituation()
+    this.getGasSituation()
+    this.getPantiltSituation()
+  },
+  methods: {
+    getWellSituation() {
+      this.handlingAlarm[0].status = '111';
+      this.handlingAlarm[0].finished = '88';
+      this.handlingAlarm[0].unfinished = 100-this.handlingAlarm[0].finished;
+    },
+    getOtherGasSituation() {
+      this.handlingAlarm[1].status = '222';
+      this.handlingAlarm[1].finished = '77';
+      this.handlingAlarm[1].unfinished = 100-this.handlingAlarm[1].finished;
+    },
+    getGasSituation() {
+      this.handlingAlarm[2].status = '333';
+      this.handlingAlarm[2].finished = '66';
+      this.handlingAlarm[2].unfinished = 100-this.handlingAlarm[2].finished;
+    },
+    getPantiltSituation() {
+      this.handlingAlarm[3].status = '444';
+      this.handlingAlarm[3].finished = '55';
+      this.handlingAlarm[3].unfinished = 100-this.handlingAlarm[3].finished;
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.situation{
+  width: 100%;
+  display: flex;
+
+  &_left,&_right{
+    flex: 1;
+  }
+}
+
+.situation_item{
+  display: flex;
+  align-items: center;
+  &_left,&_right{
+    flex: 1;
+  }
+  .left_relative{
+    width: 100%;
+    height: 84px;
+    overflow: hidden;
+    position: relative;
+    img{
+      position: absolute;
+    }
+    .img1{
+      width: 90%;
+      height: 90%;
+    }
+    .img3{
+      width: 70%;
+      height: 70%;
+      top: 47%;
+      left: 42%;
+      transform: translate(-50%, -50%);
+    }
+    .img2{
+      width: 60%;
+      height: 60%;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%);
+    }
+    .vls{
+      position:absolute;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #AAEEEE;
+      top: 48%;
+      left: 43%;
+      transform: translate(-50%, -50%)
+    }
+  }
+  .situation_text{
+    color: #AAEEEE;
+    font-size: 15px;
+    text-align: center;
+  }
+  .situation_item_right{
+    color:dimgray;
+    font-size: 12px;
+  }
+  .color_AAEEEE{
+    color: #AAEEEE;
+  }
+  .color_EE9611{
+    color: #EE9611;
+  }
+  .right_text{
+    font-size: 18px;
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/headerTitle.vue b/src/views/zhangqiu/components/headerTitle.vue
new file mode 100644
index 0000000..3ab25ff
--- /dev/null
+++ b/src/views/zhangqiu/components/headerTitle.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="header_title">
+    <img class="header_img" src="@/views/zhangqiu/resources/headerTitle.png" alt="头部标题">
+    <div class="header_content">
+      <div class="header_item"></div>
+      <div class="header_middle">章丘区燃气地下管网安全监测管理平台</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>
+      </div>
+    </div>
+   </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.header_title{
+   width: 100%;
+   height: 60px;
+   background: #000011;
+   box-shadow: 0 0 10px 10px  #000;
+   position: relative;
+   .color_fff{
+     color: #fff !important;
+   }
+   .header_img{
+    width: 100%;
+    height: auto;
+    position:absolute;
+    top:-25px;
+   }
+   .header_content{
+    position: relative;
+    z-index: 1;
+     width: 100%;
+     height: 100%;
+     display: flex;
+     color: #FFF;
+   }
+   .header_item{
+    width: 500px;
+    display: flex;
+    align-items: center;
+    &_btn{
+      flex: 1;
+      line-height: 90px;
+      height: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #00B1DD;
+      cursor: pointer;
+    }
+   }
+   .header_middle{
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: bold;
+    letter-spacing: 5px;  //letter-spacing 设置文字间隔
+   }
+}
+</style>
diff --git a/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
new file mode 100644
index 0000000..b99d3d3
--- /dev/null
+++ b/src/views/zhangqiu/components/lineDepartment/lineDepartment.vue
@@ -0,0 +1,24 @@
+<template>
+  <show-item>
+    {{ '管线权属单位' }}
+    <template #container>
+      <div>
+        <Chart></Chart>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+import Chart from '@/views/zhangqiu/components/chart.vue'
+export default {
+  name: "LineDepartment",
+  components: {showItem, Chart },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/zhangqiu/components/progressBar.vue b/src/views/zhangqiu/components/progressBar.vue
new file mode 100644
index 0000000..3ff1910
--- /dev/null
+++ b/src/views/zhangqiu/components/progressBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="title"><div> <slot>test</slot></div>  <div class="percent">{{percent}}% <img src="@/views/zhangqiu/resources/1.png" alt=""></div></div>
+    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
+    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
+    <div class="progress-dot" :style="{backgroundColor:'#888'}" v-for="i in (70-dotCount)" :key="i"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    percent: {
+      type: Number,
+      default: 0
+    },
+    wrapColor: {
+      type: String,
+      default: ''
+    },
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    dotColor: {
+      type: String,
+      default: ''
+    },
+  },
+  computed: {
+    dotCount() {
+      return this.percent < 0 ? 0 : (this.percent >= 100 ? 70 : ( Math.ceil(this.percent / 100 * 70)));
+    //    return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.title{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+}
+.percent{
+ position: relative;
+ img{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+ }
+}
+.progress-wrap {
+  display: inline-flex;
+  align-items: center;
+  min-width: 10px;
+  border-radius: 2px;
+  padding: 1px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  .progress-dot {
+    width: 4px;
+    height: 12px;
+    border-radius: 3px;
+    // background-color: #1661ad;
+    margin-right: 1px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
new file mode 100644
index 0000000..6844927
--- /dev/null
+++ b/src/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus.vue
@@ -0,0 +1,170 @@
+<template>
+  <show-item>
+    {{ '近7日运维状况' }}
+    <template #container>
+      <div class="operations">
+        <div class="operations_left">
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
+            </div>
+          </div>
+          <div class="leftItem">
+            <div class="leftItem_left">
+              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
+            </div>
+            <div class="leftItem_right">
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
+              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
+            </div>
+          </div>
+        </div>
+        <div class="operations_right">
+          <div class="imgbox">
+            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
+            <img :src="icon.top.src" class="img2" alt="icon3"/>
+            <div :vls="vls" class="vls">{{ vls }}</div>
+          </div>
+          <div class="desc">{{ '运维完结占比' }}</div>
+        </div>
+      </div>
+    </template>
+  </show-item>
+</template>
+
+<script>
+
+import showItem from '@/views/zhangqiu/components/showItem.vue'
+export default {
+  name: 'SevenDaysOperationStatus',
+  components: {showItem },
+  data() {
+    return {
+      icon: {
+        icon: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
+        },
+        top: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
+        },
+        bottom: {
+          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
+        }
+      },
+      sevenDaysOperationStatus: [
+        {
+          title: '运维任务',
+          context: '',
+        },
+        {
+          title: '运维事件',
+          context: '',
+        },
+        {
+          title: '运维工单',
+          context: '',
+        }
+      ],
+      vls:'444'
+    }
+  },
+  created() {
+    this.getMissionCount()
+    this.getEventCount()
+    this.getWorksheetCount()
+  },
+  methods: {
+    getMissionCount() {
+      this.sevenDaysOperationStatus[0].context = '111'
+    },
+    getEventCount() {
+      this.sevenDaysOperationStatus[1].context = '222'
+    },
+    getWorksheetCount() {
+      this.sevenDaysOperationStatus[2].context = '333'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.operations{
+  width: 100%;
+  display: flex;
+  &_left,&_right{
+    flex:1
+  }
+  .leftItem{
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    &_left{
+      width: 65px;
+      margin-right: 10px;
+      img{
+        width: 100%;
+      }
+    }
+    &_right{
+      &_text1{
+        color: #999;
+        font-size: 12px;
+      }
+      &_text2{
+        color: #fff;
+        font-size: 23px;
+        font-weight: bolder;
+        text-align: center;
+      }
+    }
+  }
+  &_right{
+    display: flex;
+    align-content:center;
+    flex-direction: column;
+    .imgbox{
+      flex: 2;
+      position: relative;
+      align-items: center;
+      img{
+        position:absolute;
+        width: 100%;
+      }
+      .img1{
+        top: 48px;
+      }
+      .img2{
+        top: 22px;
+      }
+      .vls{
+        font-size: 23px;
+        font-weight: bolder;
+        color: #fff;
+        text-align: center;
+        margin-top: 72px;
+
+      }
+    }
+    .desc{
+      flex: 1;
+      font-size: 23px;
+      font-weight: bolder;
+      color: #fff;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/views/zhangqiu/components/showItem.vue b/src/views/zhangqiu/components/showItem.vue
new file mode 100644
index 0000000..7f6a90a
--- /dev/null
+++ b/src/views/zhangqiu/components/showItem.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="showItem">
+          <div class="box">
+             <img class="border" src="@/views/zhangqiu/resources/border.png" alt=""/>
+              <div class="showItem_content">
+                <div class="title">
+                  <img class="title_bg" src="@/views/zhangqiu/resources/littleTitle.png" alt="小标题背景"/>
+                   <slot name="default">已安装设备</slot>
+                </div>
+                <div class="showItem_container">
+                <slot name="container"></slot>
+                </div>
+              </div>
+          </div>
+        </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.showItem{
+  margin-top: 10px;
+   width: 400px;
+   height: 32%;
+   .box{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+   }
+   .showItem_content{
+    width: 100%;
+    height: 100%;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+      width: 100%;
+      position: relative;
+      color: #fff;
+      font-size: 15px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+      font-weight: bold;
+      .title_bg{
+        position: absolute;
+        width: 80%;
+        height: 100%;
+      }
+
+    }
+   }
+ .border{
+  position:absolute;
+  width: 100%;
+  height: 100%;
+ }
+}
+</style>
diff --git a/src/views/zhangqiu/components/tableData.vue b/src/views/zhangqiu/components/tableData.vue
new file mode 100644
index 0000000..a834e73
--- /dev/null
+++ b/src/views/zhangqiu/components/tableData.vue
@@ -0,0 +1,84 @@
+<template>
+  <div >
+    <el-col class="cell" v-for="item in tableData" :key="item">
+        <el-row>{{item.road}}</el-row>
+        <el-row>{{item.length}}</el-row>
+        <el-row>{{item.dept}}</el-row>
+    </el-col>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data(){
+    return{
+      tableData:[
+        {
+          road: '所属街道',
+          length: '管线长度km',
+          dept: '权属单位',
+        },
+        {
+          road: '双山西街',
+          length: '54',
+          dept: '圣井燃气',
+        },
+        {
+          road: '绣水大街',
+          length: '32',
+          dept: '正和燃气',
+        },
+        {
+          road: '鲁宏大街',
+          length: '44',
+          dept: '正和燃气',
+        },
+        {
+          road: '清照大街',
+          length: '10',
+          dept: '中燃燃气',
+        },
+        {
+          road: '福泰路',
+          length: '2',
+          dept: '中燃燃气',
+        },
+        {
+          road: '唐王山路',
+          length: '37',
+          dept: '圣井燃气',
+        },
+        {
+          road: '经十东路',
+          length: '43',
+          dept: '圣井燃气',
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" >
+ .cell{
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    display: flex;
+    text-align:center;
+      color: #AAEEEE;
+    div{
+        flex: 1;
+    }
+ }
+ .cell:nth-child(odd) {
+    border-bottom: #AAEEEE;
+    background: transparent;
+ }
+ .cell:nth-child(even){
+    background: #141441;
+ }
+
+</style>
+
diff --git a/src/views/zhangqiu/components/topHeader.vue b/src/views/zhangqiu/components/topHeader.vue
deleted file mode 100644
index e67306d..0000000
--- a/src/views/zhangqiu/components/topHeader.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<!--顶部-->
-<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/index.html b/src/views/zhangqiu/index.html
new file mode 100644
index 0000000..c740dd0
--- /dev/null
+++ b/src/views/zhangqiu/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <script>
+      var width = document.documentElement.clientWidth || document.body.clientWidth;
+      if(width<=1200){
+        width=1200
+      }
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+      window.addEventListener('resize', function() {
+    // 变化后需要做的事
+    var width = document.documentElement.clientWidth || document.body.clientWidth;
+    console.log(width,width<1000);
+      if(width<=1200){
+
+        width=1200
+      }
+      console.log(width,width<1200);
+      var ratio = width / 1920;
+      var fontSize = 100 * ratio;
+      // console.log(fontSize);
+      document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
+
+})
+    </script>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/views/zhangqiu/js/data.js b/src/views/zhangqiu/js/data.js
new file mode 100644
index 0000000..1ca77ce
--- /dev/null
+++ b/src/views/zhangqiu/js/data.js
@@ -0,0 +1,37 @@
+
+const option2 = {
+  color : ["#F79709","#AAEEEE","#1A94E6"],
+  title: {
+    // text: '畅销饮料占比饼状图',
+    // style: {
+    //   fill: '#FFF',
+    //   fontSize: 14,
+    //   fontWeight: 'bold',
+    //   textAlign: 'center',
+    //   textBaseline: 'bottom',
+    // }
+    show:false
+  },
+  series: [
+    {
+      type: 'pie',
+      data: [
+        { name: '中燃燃气', value: 2000 },
+        { name: '圣井燃气', value: 2400 },
+        { name: '正和燃气', value: 3200 },
+      ],
+      radius : 60,
+      insideLabel: { //内部标签
+        show: true,
+      },
+      outsideLabel:{
+        labelLineBendGap:10,
+        labelLineEndLength:12,
+      }
+
+    }
+  ]
+}
+
+
+  export  {option2}
diff --git a/src/views/zhangqiu/main.js b/src/views/zhangqiu/main.js
new file mode 100644
index 0000000..5b6a2ed
--- /dev/null
+++ b/src/views/zhangqiu/main.js
@@ -0,0 +1,11 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import dataV from '@jiaminghi/data-view'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import './app.css'
+
+createApp(App).use(dataV).use(ElementPlus).use(router).mount('#app')
+// createApp(App).use(ElementPlus).use(router).mount('#app')
+
diff --git a/src/views/zhangqiu/resources/1.png b/src/views/zhangqiu/resources/1.png
new file mode 100644
index 0000000..51a59ca
--- /dev/null
+++ b/src/views/zhangqiu/resources/1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/31.png b/src/views/zhangqiu/resources/31.png
new file mode 100644
index 0000000..9cffbce
--- /dev/null
+++ b/src/views/zhangqiu/resources/31.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/border.png b/src/views/zhangqiu/resources/border.png
new file mode 100644
index 0000000..44a05d3
--- /dev/null
+++ b/src/views/zhangqiu/resources/border.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/deviceInstalledIcon.png b/src/views/zhangqiu/resources/deviceInstalledIcon.png
new file mode 100644
index 0000000..7f3822b
--- /dev/null
+++ b/src/views/zhangqiu/resources/deviceInstalledIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle1.png b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
new file mode 100644
index 0000000..a0e7900
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle1.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle2.png b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
new file mode 100644
index 0000000..523f402
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle2.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/handlingAlarmCircle3.png b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
new file mode 100644
index 0000000..79bd1a6
--- /dev/null
+++ b/src/views/zhangqiu/resources/handlingAlarmCircle3.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/headerTitle.png b/src/views/zhangqiu/resources/headerTitle.png
new file mode 100644
index 0000000..4c5861b
--- /dev/null
+++ b/src/views/zhangqiu/resources/headerTitle.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/littleTitle.png b/src/views/zhangqiu/resources/littleTitle.png
new file mode 100644
index 0000000..ce8a809
--- /dev/null
+++ b/src/views/zhangqiu/resources/littleTitle.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png b/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png
new file mode 100644
index 0000000..0e08c03
--- /dev/null
+++ b/src/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png b/src/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png
new file mode 100644
index 0000000..fc5afc7
--- /dev/null
+++ b/src/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png
Binary files differ
diff --git a/src/views/zhangqiu/resources/sevenDaysOperationStatusTop.png b/src/views/zhangqiu/resources/sevenDaysOperationStatusTop.png
new file mode 100644
index 0000000..b328d3f
--- /dev/null
+++ b/src/views/zhangqiu/resources/sevenDaysOperationStatusTop.png
Binary files differ
diff --git a/src/views/zhangqiu/router/index.js b/src/views/zhangqiu/router/index.js
new file mode 100644
index 0000000..5ef5556
--- /dev/null
+++ b/src/views/zhangqiu/router/index.js
@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '@/views/zhangqiu//charts.vue'
+
+const routes = [
+  {
+    path: '/home',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '.@/views/zhangqiu/zqindex.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router
diff --git a/src/views/zhangqiu/zqindex.vue b/src/views/zhangqiu/zqindex.vue
index 3603f5d..271e99e 100644
--- a/src/views/zhangqiu/zqindex.vue
+++ b/src/views/zhangqiu/zqindex.vue
@@ -1,33 +1,105 @@
 <template>
-  <dv-full-screen-container>
-    <top-header title="章丘区燃气地下管网安全监测管理平台" />
-    <overview3dzq />
+  <dv-full-screen-container >
+    <div class="zqindex">
+      <header-title></header-title>
+<!--      <div><overview3dzq /></div>-->
+      <div class="content">
+        <div class="left">
+          <device-installed></device-installed>
+          <device-alarm-sum></device-alarm-sum>
+          <handling-alarm></handling-alarm>
+        </div>
+<!--        <div class="middle"><overview3dzq /></div>-->
+        <div class="middle"></div>
+        <div class="right">
+          <seven-days-operation-status></seven-days-operation-status>
+          <line-department></line-department>
+          <device-alarm></device-alarm>
+        </div>
+      </div>
+    </div>
   </dv-full-screen-container>
 </template>
 
 <script>
+
 import Overview3dzq from '@/views/overview/overview3dzq'
-import TopHeader from '@/views/zhangqiu/components/topHeader'
-export default {
+import DeviceInstalled from '@/views/zhangqiu/components/deviceInstalled/deviceInstalled'
+import DeviceAlarmSum from '@/views/zhangqiu/components/deviceAlarmSum/deviceAlarmSum'
+import HandlingAlarm from '@/views/zhangqiu/components/handlingAlarm/handlingAlarm'
+import SevenDaysOperationStatus from '@/views/zhangqiu/components/sevenDaysOperationStatus/sevenDaysOperationStatus'
+import LineDepartment from "@/views/zhangqiu/components/lineDepartment/lineDepartment";
+import DeviceAlarm from '@/views/zhangqiu/components/deviceAlarm/deviceAlarm'
+import { defineComponent } from 'vue'
+import headerTitle from '@/views/zhangqiu/components/headerTitle.vue'
+import showItem from '@/views/zhangqiu/components/showItem.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'
+
+
+export default defineComponent({
   name: 'Zqindex',
-  components: { TopHeader, Overview3dzq },
+  components: { DeviceAlarm, LineDepartment, SevenDaysOperationStatus, HandlingAlarm, DeviceAlarmSum, DeviceInstalled, headerTitle, showItem, progressBar, ProgressBar, tableData, TableData, Chart, Overview3dzq },
   data() {
     return {}
   }
-}
+})
 </script>
 <style lang="scss" scoped>
+
+.zqindex{
+  width: 100%;
+  //height: 100%;
+}
+
+.content{
+
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .left{
+    z-index: 1001;
+    flex:1;
+    padding: 15px 20px;
+    background-image: linear-gradient(to right, #131320 50%, #fff 100%);
+  }
+  .middle{
+    position: absolute;
+    flex:1;
+    z-index: 1000;
+    //background: #fff;
+    width: 100%;
+  }
+  .right{
+    z-index: 1000;
+    flex:1;
+    display: flex;
+    //justify-content: end;
+    justify-content: right;
+    flex-direction: column;
+    align-items: end;
+    padding: 15px 20px;
+    background-image: linear-gradient(to left, #131320 50%, #fff 100%);
+  }
+}
+
 .full-container{
   width:100%;
-  height: 100%;
+  //height: 100%;
   position: relative;
   .charts{
     position: absolute;
     width: 100%;
     height: 100%;
-    z-index: 9999;
+    z-index: 1;
     left: 0px;
     top: 0px;
+    //background-color: #1a2126;
 
   }
 }