diff --git a/src/components/Cindex.vue b/src/components/Cindex.vue
new file mode 100644
index 0000000..1690fe4
--- /dev/null
+++ b/src/components/Cindex.vue
@@ -0,0 +1,125 @@
+<template>
+    <div class="green"> 
+      <div class="index-top">
+  
+      </div>
+      <div class="index-bottom">
+        <div class="one-card">
+          <h2>数据显示</h2>
+            <div class="one-card-content">
+              <div>
+                <p>地块面积</p>
+                <font>730</font>
+                <font>㎡</font>
+              </div>
+              <div>
+                <p>地块调蓄容积</p>
+                <font>500</font>
+                <font>m³</font>
+              </div>
+              <div>
+                <p>调蓄池液位</p>
+                <font>3.6</font>
+                <font>m</font>
+              </div>
+              <div>
+                <p>溢流量</p>
+                <font>1.25</font>
+                <font>L/s</font>
+              </div>
+              <div>
+                <p>COD</p>
+                <font>8</font>
+                <font>mg/L</font>
+              </div>
+              <div>
+                <p>氨氮</p>
+                <font>12.5</font>
+                <font>mg/L</font>
+              </div>
+              <div>
+                <p>ss</p>
+                <font>20.7</font>
+                <font>mg/L</font>
+              </div>
+              <div>
+                <p>地块剩余调蓄容积</p>
+                <font>316</font>
+                <font>m³</font>
+              </div>
+            </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import Menus from "@/components/Menus.vue";
+  import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
+  export default {
+    name: 'green',
+    components: {
+      Menus
+    },
+    setup() {
+      const state = reactive({
+      })
+    }
+  }
+  </script>
+  <style lang="scss" scoped>
+  .mt10 {
+      margin-top: 10px;
+    }
+    .green {
+      width: 100%;
+      height:100%;
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      .index-top {
+        width: 100%;
+        height: 74%;
+        border: 1px solid rgb(179, 174, 174);
+      }
+      .index-bottom {
+        width: 100%;
+        height: 25%;
+        display: flex;
+        justify-content: space-between;
+        .one-card {
+          width: 100%;
+          height: 100%;
+          box-shadow: 0 0 8px #99ACB0 inset;
+          
+          h2 {
+            padding: 10px;
+            text-align: center;
+          }
+          .one-card-content {
+            width: 100%;
+            height: 73%;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            align-items: center;
+
+            >div {
+              width: 10%;
+              height: 80%;
+              border: 1px solid rgb(197, 195, 195);
+              display: flex;
+              flex-direction: column;
+              background:#d8e8f7;
+              // align-items: center;
+              justify-content: center;
+              text-align: center;
+              padding: 10px;
+              border-radius: 10px;
+              font-size: 20px;
+            }
+          }
+        }
+      }
+    }
+  </style>
\ No newline at end of file
diff --git a/src/components/Sindex.vue b/src/components/Sindex.vue
new file mode 100644
index 0000000..6193ec1
--- /dev/null
+++ b/src/components/Sindex.vue
@@ -0,0 +1,176 @@
+<template>
+    <div class="index"> 
+      <div class="index-left">
+        <div class="index-left-top">
+          
+        </div>
+        <div class="index-left-bottom">
+          <div class="one-card-content">
+              <div>
+                <p>透水铺砖储水量</p>
+                <font>200</font>
+                <font>m³</font>
+              </div>
+              <div>
+                <p>透水铺砖表面温度</p>
+                <font>16.5</font>
+                <font>℃</font>
+              </div>
+              <div>
+                <p>热岛消减率</p>
+                <font>19.6</font>
+                <font>%</font>
+              </div>
+              <div>
+                <p>孔隙率</p>
+                <font>10</font>
+                <font>%</font>
+              </div>
+            </div>
+        </div>
+      </div>
+      <div class="index-right">
+        <div class="one-card">
+          <h2>数据显示</h2>
+            <div class="one-card-content">
+              <div>
+                <p>透水铺装面积</p>
+                <font>500</font>
+                <font>㎡</font>
+              </div>
+              <div>
+                <p>入渗系统面积</p>
+                <font>437</font>
+                <font>㎡</font>
+              </div>
+              <div>
+                <p>透水系数</p>
+                <font>10</font>
+                <font>mm/min</font>
+              </div>
+              <div>
+                <p>入渗系数</p>
+                <font>1.3</font>
+                <font>mm/min</font>
+              </div>
+              <div>
+                <p>透水层厚度</p>
+                <font>300</font>
+                <font>mm</font>
+              </div>
+              <div>
+                <p>渗透量</p>
+                <font>362</font>
+                <font>m³</font>
+              </div>
+            </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import Menus from "@/components/Menus.vue";
+  import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
+  export default {
+    name: 'index',
+    components: {
+      Menus
+    },
+    setup() {
+      const state = reactive({
+      })
+    }
+  }
+  </script>
+  <style lang="scss" scoped>
+  .mt10 {
+      margin-top: 10px;
+    }
+    .index {
+      width: 100%;
+      height:100%;
+      display: flex;
+      justify-content: space-between;
+      .index-left {
+        width: 74%;
+        border: 1px solid rgb(179, 174, 174);
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        .index-left-top {
+          width: 100%;
+          height: 80%;
+          border: 1px solid red;
+        }
+        .index-left-bottom {
+          height: 20%;
+        }
+        .one-card-content {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            align-items: center;
+
+            >div {
+              width: 24%;
+              height: 80%;
+              border: 1px solid rgb(197, 195, 195);
+              display: flex;
+              flex-direction: column;
+              background:#d8e8f7;
+              // align-items: center;
+              justify-content: center;
+              text-align: center;
+              padding: 10px;
+              border-radius: 10px;
+              font-size: 26px;
+              line-height: 45px;
+            }
+          }
+      }
+      
+      .index-right {
+        width: 25%;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        .one-card {
+          width: 100%;
+          height: 100%;
+          box-shadow: 0 0 8px #99ACB0 inset;
+          .one-card-content {
+            width: 100%;
+            height: 90%;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            align-items: center;
+
+            >div {
+              width: 40%;
+              height: 30%;
+              border: 1px solid rgb(197, 195, 195);
+              display: flex;
+              flex-direction: column;
+              background:#d8e8f7;
+              // align-items: center;
+              justify-content: center;
+              text-align: center;
+              padding: 10px;
+              border-radius: 10px;
+              font-size: 26px;
+              line-height: 45px;
+            }
+          }
+          h2 {
+            padding: 20px;
+            text-align: center;
+          }
+          
+        }
+      }
+    }
+  </style>
\ No newline at end of file
diff --git a/src/components/Zhibiao.vue b/src/components/Zhibiao.vue
new file mode 100644
index 0000000..bcfd74c
--- /dev/null
+++ b/src/components/Zhibiao.vue
@@ -0,0 +1,273 @@
+<template>
+  <div class="analyse-container">
+    <div id="echartDiv1" class="echartDiv100"></div>
+    <div id="echartDiv2" class="echartDiv100"></div>
+    <div id="echartDiv3" class="echartDiv100"></div>
+    <div id="echartDiv4" class="echartDiv100"></div>
+    <div id="echartDiv5" class="echartDiv100"></div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { ElMessage } from "element-plus";
+import myApi from "@/api/myApi.js";
+import BarEchart from "./BarEchart.vue";
+import Process from "./Process.vue";
+import Date from "@/components/Date.vue";
+export default {
+  name: "Analyse",
+  components: {
+
+  },
+  setup() {
+    const state = reactive({
+      
+    });
+    onMounted(async () => { 
+      getChartsZfl("echartDiv1", '蒸腾量');
+      getChartsZfl("echartDiv2", 'COD')
+      getChartsZfl("echartDiv3", '氨氮');
+      getChartsZfl("echartDiv4", 'SS')
+      getChartsZfl("echartDiv5", '屋面温度')
+     });
+    const getChartsZfl = (id, text) => {
+      var dom = document.getElementById(id);
+      var op = {
+        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
+        title: {
+          text: text
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        legend: {
+          data: ['系统A', '系统B', '系统C', '系统D', '系统E']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: [
+              "00",
+              "01",
+              "02",
+              "03",
+              "04",
+              "05",
+              "06",
+              "07",
+              "08",
+              "09",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+              "16",
+              "17",
+              "18",
+              "19",
+              "20",
+              "21",
+              "22",
+              "23",
+            ]
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '系统A',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(128, 255, 165)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(1, 191, 236)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
+          },
+          {
+            name: '系统B',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(0, 221, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(77, 119, 255)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
+          },
+          {
+            name: '系统C',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(55, 162, 255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(116, 21, 219)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
+          },
+          {
+            name: '系统D',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 0, 135)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(135, 0, 157)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
+          },
+          {
+            name: '系统E',
+            type: 'line',
+            stack: 'Total',
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            areaStyle: {
+              opacity: 0.8,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255, 191, 0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(224, 62, 76)'
+                }
+              ])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
+          }
+        ]
+      };
+      getEchart(dom, op)
+    }
+    const getEchart = (dom, op) => {
+      if (dom) {
+        var myChart = echarts.init(dom);
+        var option = op;
+
+        option && myChart.setOption(option);
+      }
+    };
+    return {
+      ...toRefs(state),
+      getChartsZfl,
+      getEchart
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.analyse-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 10px;
+
+  .echartDiv100 {
+    width: 100%;
+    height: 20%;
+    margin: 0 auto;
+    // border: 1px solid red;
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 2276878..737f34d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -46,6 +46,16 @@ const router = createRouter({
       path: '/biology',
       name: 'biology',
       component: () => import(/* webpackChunkName: "link" */ '../views/Biology.vue')
+    },
+    {
+      path: '/shentou',
+      name: 'shentou',
+      component: () => import(/* webpackChunkName: "link" */ '../views/Shentou.vue')
+    },
+    {
+      path: '/chuxu',
+      name: 'chuxu',
+      component: () => import(/* webpackChunkName: "link" */ '../views/Chuxu.vue')
     }
   ]
 })
diff --git a/src/utils/index.js b/src/utils/index.js
index 75f087a..1f9423c 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -34,5 +34,7 @@ export const pathMap = {
   page: '世博浦西区活水公园',
   weather: '世博浦西区活水公园',
   green: '世博浦西区活水公园',
-  biology: '世博浦西区活水公园'
+  biology: '世博浦西区活水公园',
+  shentou: '世博浦西区活水公园',
+  chuxu: '世博浦西区活水公园'
 }
\ No newline at end of file
diff --git a/src/views/Chuxu.vue b/src/views/Chuxu.vue
new file mode 100644
index 0000000..7f6af0c
--- /dev/null
+++ b/src/views/Chuxu.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="cl-hy">
+    <div class="menus">
+      <Menus :activeI="0" @changeIndex="changeIndex" :menus="menus"/>
+    </div>
+    <div class="content">
+       <Cindex v-if="index === 0"/>
+      <Report v-else-if="index === 1"/>
+      <Ganalyse v-else-if="index === 2"/>
+      <History v-else-if="index === 3"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Menus from "@/components/Menus.vue";
+import Cindex from "@/components/Cindex.vue";
+import Report from "@/components/Report.vue";
+import Ganalyse from "@/components/Ganalyse.vue";
+import History from "@/components/History.vue";
+import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
+export default {
+  name: 'weather',
+  components: {
+    Menus,
+    Cindex,
+    Report,
+    Ganalyse,
+    History
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      index: 0,
+      menus:[
+        {
+          name: '首页',
+        },
+        {
+          name: '检测指标',
+        },
+        {
+          name: '数据分析',
+        },
+        {
+          name: '历史数据',
+        }
+      ],
+    })
+    const changeIndex = (index) => {
+      state.index = index;
+    }
+    return {
+      ...toRefs(state),
+      changeIndex
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.mt10 {
+    margin-top: 10px;
+  }
+  .cl-hy {
+    width: 100%;
+    height:100%;
+    display: flex;
+    justify-content: space-between;
+    // border: 1px solid red;
+      .menus {
+        width: 4%;
+        height: 700px;
+        // border: 1px solid red;
+      }
+      .content {
+        width: 96%;
+        height:100%;
+        // border: 1px solid red;
+      }
+    
+    
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/Green.vue b/src/views/Green.vue
index e216611..6e67cab 100644
--- a/src/views/Green.vue
+++ b/src/views/Green.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="content">
        <Gindex v-if="index === 0"/>
-      <Report v-else-if="index === 1"/>
+      <Zhibiao v-else-if="index === 1"/>
       <Ganalyse v-else-if="index === 2"/>
       <History v-else-if="index === 3"/>
     </div>
@@ -15,7 +15,7 @@
 <script>
 import Menus from "@/components/Menus.vue";
 import Gindex from "@/components/Gindex.vue";
-import Report from "@/components/Report.vue";
+import Zhibiao from "@/components/Zhibiao.vue";
 import Ganalyse from "@/components/Ganalyse.vue";
 import History from "@/components/History.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
@@ -24,7 +24,7 @@ export default {
   components: {
     Menus,
     Gindex,
-    Report,
+    Zhibiao,
     Ganalyse,
     History
   },
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c6c4857..faf280a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -32,10 +32,10 @@ export default {
         url: 'biology'
       }, {
         name: '透水铺装&入渗系统',
-        url: 'level'
+        url: 'shentou'
       }, {
         name: '调蓄系统&逆流监测系统',
-        url: 'level'
+        url: 'chuxu'
       }, {
         name: '气象监测系统',
         url: 'weather'
diff --git a/src/views/Shentou.vue b/src/views/Shentou.vue
new file mode 100644
index 0000000..9da0e1d
--- /dev/null
+++ b/src/views/Shentou.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="cl-hy">
+    <div class="menus">
+      <Menus :activeI="0" @changeIndex="changeIndex" :menus="menus"/>
+    </div>
+    <div class="content">
+      <Sindex v-if="index === 0"/>
+      <Report v-else-if="index === 1"/>
+      <Analyse v-else-if="index === 2"/>
+      <History v-else-if="index === 3"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import Menus from "@/components/Menus.vue";
+import Sindex from "@/components/Sindex.vue";
+import Report from "@/components/Report.vue";
+import Analyse from "@/components/Analyse.vue";
+import History from "@/components/History.vue";
+import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
+export default {
+  name: 'weather',
+  components: {
+    Menus,
+    Sindex,
+    Report,
+    Analyse,
+    History
+  },
+  setup(props, ctx) {
+    const state = reactive({
+      index: 0,
+      menus:[
+        {
+          name: '首页',
+        },
+        {
+          name: '气象预报',
+        },
+        {
+          name: '数据分析',
+        },
+        {
+          name: '历史数据',
+        }
+      ],
+    })
+    const changeIndex = (index) => {
+      state.index = index;
+    }
+    return {
+      ...toRefs(state),
+      changeIndex
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.mt10 {
+    margin-top: 10px;
+  }
+  .cl-hy {
+    width: 100%;
+    height:100%;
+    display: flex;
+    justify-content: space-between;
+    // border: 1px solid red;
+      .menus {
+        width: 4%;
+        height: 700px;
+        // border: 1px solid red;
+      }
+      .content {
+        width: 96%;
+        height:100%;
+        // border: 1px solid red;
+      }
+    
+    
+  }
+</style>
\ No newline at end of file