From f05f208360f31085aad7370f5ce9f38947332196 Mon Sep 17 00:00:00 2001
From: shixiaoman <531268472@qq.com>
Date: Tue, 23 Nov 2021 21:19:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B1=9F=E6=B2=B3=E6=B0=B4=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ecology/river-statis.js               |  46 +++++
 src/views/water/river/statistic/avg-index.vue | 162 +++++++++++++++++
 .../water/river/statistic/avg-standard.vue    | 170 ++++++++++++++++++
 .../water/river/statistic/base-index.vue      | 165 +++++++++++++++++
 .../water/river/statistic/base-standard.vue   | 167 +++++++++++++++++
 src/views/water/river/statistic/index.vue     |  19 +-
 6 files changed, 724 insertions(+), 5 deletions(-)
 create mode 100644 src/api/ecology/river-statis.js
 create mode 100644 src/views/water/river/statistic/avg-index.vue
 create mode 100644 src/views/water/river/statistic/avg-standard.vue
 create mode 100644 src/views/water/river/statistic/base-index.vue
 create mode 100644 src/views/water/river/statistic/base-standard.vue

diff --git a/src/api/ecology/river-statis.js b/src/api/ecology/river-statis.js
new file mode 100644
index 0000000..45d7e45
--- /dev/null
+++ b/src/api/ecology/river-statis.js
@@ -0,0 +1,46 @@
+import axios from 'axios';
+// -------------------江河--水功能数据统计列表-----------------------
+const autonomyWaterFunctionTotalUrl = '/waterFunctionArea/riverStatic/autoPage';
+const nationalWaterFunctionTotalUrl = '/waterFunctionArea/riverStatic/nationalPage';
+//国家级水功能统计
+const nationalWaterFunctionTotal = function (data) {
+    return axios.get("/waterFunctionArea/riverStatic/nationalPage",data)
+}
+// /自治区水功能统计
+const autonomyWaterFunctionTotal = function (data) {
+    return axios.get("/waterFunctionArea/riverStatic/autoPage",data)
+}
+
+
+// -------------------江河--水站数据统计列表--------------
+//水站同比环比统计
+const listWaterSiteYoy = function (data) {
+    return axios.post("/waterFunctionArea/riverStatic/waterSiteYoy",data)
+}
+// 水站日均值统计
+const listWaterSiteMonthTotal = function (data) {
+    return axios.post("/waterFunctionArea/riverStatic/waterSiteMonthTotal",data)
+}
+
+//水质达标统计
+const listMonthWaterQualitySandard = function (data) {
+    return axios.post("/waterFunctionArea/riverStatic/monthWaterQualitySandard",data)
+}
+
+//水质综合指数统计
+const listMonthCompositeIndex = function (data) {
+    return axios.post("/waterFunctionArea/riverStatic/monthCompositeIndex",data)
+}
+
+
+export {
+    autonomyWaterFunctionTotalUrl,
+    nationalWaterFunctionTotalUrl,
+    nationalWaterFunctionTotal,
+    autonomyWaterFunctionTotal,
+    listWaterSiteYoy,
+    listWaterSiteMonthTotal,
+    listMonthWaterQualitySandard,
+    listMonthCompositeIndex
+
+}
diff --git a/src/views/water/river/statistic/avg-index.vue b/src/views/water/river/statistic/avg-index.vue
new file mode 100644
index 0000000..b3916ed
--- /dev/null
+++ b/src/views/water/river/statistic/avg-index.vue
@@ -0,0 +1,162 @@
+<!-- 江河水查看数据页面-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
+        :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
+        <a-row>
+          <a-form-item label="断面名称">
+            <a-select v-model:value="where.sectionName" allowClear showSearch>
+              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="开始时间:">
+            <a-month-picker v-model:value="where.startTime" :disabled-date="disabledDate" />
+          </a-form-item>
+          <a-form-item label="结束时间:">
+            <a-month-picker v-model:value="where.endTime" :disabled-date="disabledDate" />
+          </a-form-item>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+            <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
+              <a-space>
+                <a-button type="primary" @click="reload">查询</a-button>
+                <a-button @click="reset">重置</a-button>
+                <a-button @click="exportFile">导出Excel</a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <!-- 表格 -->
+      <ele-pro-table ref="table" :datasource="momData" :columns="columns" :where="where" :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)">
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+  import {
+    listMonthCompositeIndex
+  } from "@/api/ecology/river-statis";
+  import {
+    listInfo
+  } from "@/api/ecology/water/river-plcae";
+  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+  import XLSX from "xlsx";
+  export default {
+    name: "RiverCollectWater",
+    components: {},
+    data() {
+      return {
+        data: [],
+        momData: [],
+        yoyData: [],
+        datasource: {},
+        columns: [{
+            title: '断面名称',
+            dataIndex: 'sectionName',
+            key: 'sectionName',
+          },
+          {
+            title: '水质综合指数排名',
+            dataIndex: 'orderBy',
+            key: 'orderBy',
+          },
+          {
+            title: "水质综合指数",
+            children: [{
+                title: "本月综合指数",
+                dataIndex: "baseIndex"
+              },
+              {
+                title: "上月综合指数",
+                dataIndex: "momIndex"
+              },
+              {
+                title: "上年同期指数",
+                dataIndex: "yoyIndex"
+              },
+            ]
+          },
+          {
+            title: "水质综合指数变化率",
+            children: [{
+                title: "上月",
+                dataIndex: "momRateChange"
+              },
+              {
+                title: "上年同期",
+                dataIndex: "yoyRateChange"
+              },
+            ]
+          },
+        ],
+        locale,
+        bill: {},
+        selection: [],
+        where: {},
+        sectionInfo: {},
+        loading: false,
+        rules: {},
+      };
+    },
+    created() {
+      listInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.visibleWater = true;
+          this.sectionInfo = res.data.data
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    methods: {
+      /* 刷新表格 */
+      reload() {
+        listMonthCompositeIndex(this.where).then((res) => {
+          console.log(res.data.data);
+          if (res.data.code == 0) {
+            this.$message.success(res.data.msg);
+            res.data.data.momData.forEach((m) => {
+              this.momData.push(m);
+            })
+            res.data.data.yoyData.forEach((y) => {
+              this.yoyData.push(y);
+            })
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        });
+      },
+      /* 重置搜索 */
+      reset() {
+        this.where = {};
+        this.reload();
+      },
+      /* 导出 */
+      exportFile() {
+        const columns = this.columns.filter(item => item.dataIndex);
+        const arr = [];
+        const th = columns.map((item) => item.title);
+        arr.push(th);
+        this.data.forEach((d) => {
+          const td = columns.map((item) => d[item.dataIndex]);
+          arr.push(td);
+        });
+
+        let sheet = XLSX.utils.aoa_to_sheet(arr);
+        this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+      }
+
+    },
+  };
+
+</script>
+
+<style scoped lang="less">
+</style>
diff --git a/src/views/water/river/statistic/avg-standard.vue b/src/views/water/river/statistic/avg-standard.vue
new file mode 100644
index 0000000..d5981d1
--- /dev/null
+++ b/src/views/water/river/statistic/avg-standard.vue
@@ -0,0 +1,170 @@
+<!-- 江河水查看数据页面-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
+        :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
+        <a-row>
+          <a-form-item label="断面名称">
+            <a-select v-model:value="where.sectionName" allowClear showSearch>
+              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <!-- <a-form-item label="年份:">
+            <a-date-picker valueFormat="YYYY" v-model:value="where.year"></a-date-picker>
+          </a-form-item>
+          <a-form-item label="月份:">
+            <a-date-picker valueFormat="MM" v-model:value="where.month"></a-date-picker>
+          </a-form-item> -->
+          <a-form-item label="开始时间:">
+            <a-month-picker v-model:value="where.startTime" :disabled-date="disabledDate" />
+          </a-form-item>
+          <a-form-item label="结束时间:">
+            <a-month-picker v-model:value="where.endTime" :disabled-date="disabledDate" />
+          </a-form-item>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+            <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
+              <a-space>
+                <a-button type="primary" @click="reload">查询</a-button>
+                <a-button @click="reset">重置</a-button>
+                <a-button @click="exportFile">导出Excel</a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <!-- 表格 -->
+      <ele-pro-table ref="table" :datasource="momData" :columns="columns" :where="where" :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)">
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+  import {
+    listMonthWaterQualitySandard
+  } from "@/api/ecology/river-statis";
+  import {
+    listInfo
+  } from "@/api/ecology/water/river-plcae";
+  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+  import XLSX from "xlsx";
+  export default {
+    name: "RiverCollectWater",
+    components: {},
+    data() {
+      return {
+        data: [],
+        momData: [],
+        yoyData: [],
+        datasource: {},
+        columns: [{
+            title: '断面类型',
+            dataIndex: 'sectionType',
+            key: 'sectionType',
+          },
+          {
+            title: '断面名称',
+            dataIndex: 'stationName',
+            key: 'stationName',
+          },
+          {
+            title: '考核城市',
+            dataIndex: 'city',
+            key: 'city',
+          },
+          {
+            title: '水质考核目标',
+            dataIndex: 'waterTarget',
+            key: 'waterTarget',
+          },
+          {
+            title: '平均水质类别',
+            dataIndex: 'waterQualityCategoryAvg',
+            key: 'waterQualityCategoryAvg',
+          },
+          {
+            title: '水质评价',
+            dataIndex: 'waterQualityEvaluate',
+            key: 'waterQualityEvaluate',
+          },
+          {
+            title: '超标项目',
+            dataIndex: 'transnormalItem',
+            key: 'transnormalItem',
+          },
+          {
+            title: '去年同期水质类别',
+            dataIndex: 'waterQualityCategoryYoy',
+            key: 'waterQualityCategoryYoy',
+          },
+        ],
+        locale,
+        bill: {},
+        selection: [],
+        where: {},
+        sectionInfo: {},
+        loading: false,
+        rules: {},
+      };
+    },
+    created() {
+      listInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.visibleWater = true;
+          this.sectionInfo = res.data.data
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    methods: {
+      /* 刷新表格 */
+      reload() {
+        listMonthWaterQualitySandard(this.where).then((res) => {
+          console.log(res.data.data);
+          if (res.data.code == 0) {
+            this.$message.success(res.data.msg);
+            res.data.data.momData.forEach((m) => {
+              this.momData.push(m);
+            })
+            res.data.data.yoyData.forEach((y) => {
+              this.yoyData.push(y);
+            })
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        });
+      },
+      /* 重置搜索 */
+      reset() {
+        this.where = {};
+        this.reload();
+      },
+      /* 导出 */
+      exportFile() {
+        const columns = this.columns.filter(item => item.dataIndex);
+        const arr = [];
+        const th = columns.map((item) => item.title);
+        arr.push(th);
+        this.data.forEach((d) => {
+          const td = columns.map((item) => d[item.dataIndex]);
+          arr.push(td);
+        });
+
+        let sheet = XLSX.utils.aoa_to_sheet(arr);
+        this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+      }
+
+    },
+  };
+
+</script>
+
+<style scoped lang="less">
+</style>
diff --git a/src/views/water/river/statistic/base-index.vue b/src/views/water/river/statistic/base-index.vue
new file mode 100644
index 0000000..fa01fd1
--- /dev/null
+++ b/src/views/water/river/statistic/base-index.vue
@@ -0,0 +1,165 @@
+<!-- 江河水查看数据页面-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
+        :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
+        <a-row>
+          <a-form-item label="断面名称">
+            <a-select v-model:value="where.sectionName" allowClear showSearch>
+              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <!-- <a-form-item label="年份:">
+            <a-date-picker valueFormat="YYYY" v-model:value="where.year"></a-date-picker>
+          </a-form-item>
+          <a-form-item label="月份:">
+            <a-date-picker valueFormat="MM" v-model:value="where.month"></a-date-picker>
+          </a-form-item> -->
+          <a-form-item label="查询时间:">
+            <a-month-picker v-model:value="where.startTime" :disabled-date="disabledDate" />
+          </a-form-item>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+            <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
+              <a-space>
+                <a-button type="primary" @click="reload">查询</a-button>
+                <a-button @click="reset">重置</a-button>
+                <a-button @click="exportFile">导出Excel</a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <!-- 表格 -->
+      <ele-pro-table ref="table" :datasource="momData" :columns="columns" :where="where" :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)">
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+  import {
+    listMonthCompositeIndex
+  } from "@/api/ecology/river-statis";
+  import {
+    listInfo
+  } from "@/api/ecology/water/river-plcae";
+  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+  import XLSX from "xlsx";
+  export default {
+    name: "RiverCollectWater",
+    components: {},
+    data() {
+      return {
+        data: [],
+        momData: [],
+        yoyData: [],
+        datasource: {},
+        columns: [{
+            title: '断面名称',
+            dataIndex: 'sectionName',
+            key: 'sectionName',
+          },
+          {
+            title: '水质综合指数排名',
+            dataIndex: 'orderBy',
+            key: 'orderBy',
+          },
+          {
+            title: "水质综合指数",
+            children: [{
+                title: "本月综合指数",
+                dataIndex: "baseIndex"
+              },
+              {
+                title: "上月综合指数",
+                dataIndex: "momIndex"
+              },
+              {
+                title: "上年同期指数",
+                dataIndex: "yoyIndex"
+              },
+            ]
+          },
+          {
+            title: "水质综合指数变化率",
+            children: [{
+                title: "上月",
+                dataIndex: "momRateChange"
+              },
+              {
+                title: "上年同期",
+                dataIndex: "yoyRateChange"
+              },
+            ]
+          },
+        ],
+        locale,
+        bill: {},
+        selection: [],
+        where: {},
+        sectionInfo: {},
+        loading: false,
+        rules: {},
+      };
+    },
+    created() {
+      listInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.visibleWater = true;
+          this.sectionInfo = res.data.data
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    methods: {
+      /* 刷新表格 */
+      reload() {
+        listMonthCompositeIndex(this.where).then((res) => {
+          console.log(res.data.data);
+          if (res.data.code == 0) {
+            this.$message.success(res.data.msg);
+            res.data.data.momData.forEach((m) => {
+              this.momData.push(m);
+            })
+            res.data.data.yoyData.forEach((y) => {
+              this.yoyData.push(y);
+            })
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        });
+      },
+      /* 重置搜索 */
+      reset() {
+        this.where = {};
+        this.reload();
+      },
+      /* 导出 */
+      exportFile() {
+        const columns = this.columns.filter(item => item.dataIndex);
+        const arr = [];
+        const th = columns.map((item) => item.title);
+        arr.push(th);
+        this.data.forEach((d) => {
+          const td = columns.map((item) => d[item.dataIndex]);
+          arr.push(td);
+        });
+
+        let sheet = XLSX.utils.aoa_to_sheet(arr);
+        this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+      }
+
+    },
+  };
+
+</script>
+
+<style scoped lang="less">
+</style>
diff --git a/src/views/water/river/statistic/base-standard.vue b/src/views/water/river/statistic/base-standard.vue
new file mode 100644
index 0000000..b0cef4d
--- /dev/null
+++ b/src/views/water/river/statistic/base-standard.vue
@@ -0,0 +1,167 @@
+<!-- 江河水查看数据页面-->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
+        :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
+        <a-row>
+          <a-form-item label="断面名称">
+            <a-select v-model:value="where.sectionName" allowClear showSearch>
+              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+          <!-- <a-form-item label="年份:">
+            <a-date-picker valueFormat="YYYY" v-model:value="where.year"></a-date-picker>
+          </a-form-item>
+          <a-form-item label="月份:">
+            <a-date-picker valueFormat="MM" v-model:value="where.month"></a-date-picker>
+          </a-form-item> -->
+          <a-form-item label="查询时间:">
+            <a-month-picker v-model:value="where.startTime" :disabled-date="disabledDate" />
+          </a-form-item>
+          <a-col :lg="6" :md="12" :sm="24" :xs="24">
+            <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
+              <a-space>
+                <a-button type="primary" @click="reload">查询</a-button>
+                <a-button @click="reset">重置</a-button>
+                <a-button @click="exportFile">导出Excel</a-button>
+              </a-space>
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <!-- 表格 -->
+      <ele-pro-table ref="table" :datasource="momData" :columns="columns" :where="where" :scroll="{ x: 'max-content' }"
+        @done="(d) => (data = d.data)">
+      </ele-pro-table>
+    </a-card>
+  </div>
+  <!-- 编辑弹窗 -->
+</template>
+
+<script>
+  import {
+    listMonthWaterQualitySandard
+  } from "@/api/ecology/river-statis";
+  import {
+    listInfo
+  } from "@/api/ecology/water/river-plcae";
+  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
+  import XLSX from "xlsx";
+  export default {
+    name: "RiverCollectWater",
+    components: {},
+    data() {
+      return {
+        data: [],
+        momData: [],
+        yoyData: [],
+        datasource: {},
+        columns: [{
+            title: '断面类型',
+            dataIndex: 'sectionType',
+            key: 'sectionType',
+          },
+          {
+            title: '断面名称',
+            dataIndex: 'stationName',
+            key: 'stationName',
+          },
+          {
+            title: '考核城市',
+            dataIndex: 'city',
+            key: 'city',
+          },
+          {
+            title: '考核目标',
+            dataIndex: 'waterTarget',
+            key: 'waterTarget',
+          },
+          {
+            title: '水质类别',
+            dataIndex: 'waterQualityCategory',
+            key: 'waterQualityCategory',
+          },
+          {
+            title: '水质评价',
+            dataIndex: 'waterQualityEvaluate',
+            key: 'waterQualityEvaluate',
+          },
+          {
+            title: '上期水质类别',
+            dataIndex: 'waterQualityCategoryMom',
+            key: 'waterQualityCategoryMom',
+          },
+          {
+            title: '去年同期水质类别',
+            dataIndex: 'waterQualityCategoryYoy',
+            key: 'waterQualityCategoryYoy',
+          },
+        ],
+        locale,
+        bill: {},
+        selection: [],
+        where: {},
+        sectionInfo: {},
+        loading: false,
+        rules: {},
+      };
+    },
+    created() {
+      listInfo().then((res) => {
+        if (res.data.code == 0) {
+          console.log(res.data.data)
+          this.visibleWater = true;
+          this.sectionInfo = res.data.data
+        } else {
+          this.$message.error(res.data.msg);
+        }
+      })
+    },
+    methods: {
+      /* 刷新表格 */
+      reload() {
+        listMonthWaterQualitySandard(this.where).then((res) => {
+          console.log(res.data.data);
+          if (res.data.code == 0) {
+            this.$message.success(res.data.msg);
+            res.data.data.momData.forEach((m) => {
+              this.momData.push(m);
+            })
+            res.data.data.yoyData.forEach((y) => {
+              this.yoyData.push(y);
+            })
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        });
+      },
+      /* 重置搜索 */
+      reset() {
+        this.where = {};
+        this.reload();
+      },
+      /* 导出 */
+      exportFile() {
+        const columns = this.columns.filter(item => item.dataIndex);
+        const arr = [];
+        const th = columns.map((item) => item.title);
+        arr.push(th);
+        this.data.forEach((d) => {
+          const td = columns.map((item) => d[item.dataIndex]);
+          arr.push(td);
+        });
+
+        let sheet = XLSX.utils.aoa_to_sheet(arr);
+        this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
+      }
+
+    },
+  };
+
+</script>
+
+<style scoped lang="less">
+</style>
diff --git a/src/views/water/river/statistic/index.vue b/src/views/water/river/statistic/index.vue
index f47460c..745d45c 100644
--- a/src/views/water/river/statistic/index.vue
+++ b/src/views/water/river/statistic/index.vue
@@ -8,16 +8,16 @@
               <base-statistic></base-statistic>
             </a-tab-pane>
             <a-tab-pane tab="当月水质达标" key="base1">
-              <function-bill ></function-bill>
+              <month-standard ></month-standard>
             </a-tab-pane>
             <a-tab-pane tab="平均水质达标" key="base2">
-              <function-bill></function-bill>
+              <avg-standard></avg-standard>
             </a-tab-pane>
             <a-tab-pane tab="当月综合指数" key="base3">
-              <function-bill></function-bill>
+              <month-index ></month-index>
             </a-tab-pane>
             <a-tab-pane tab="平均水质指数" key="base4">
-              <function-bill ></function-bill>
+              <avg-index ></avg-index>
             </a-tab-pane>
           </a-tabs>
         </a-tab-pane>
@@ -52,6 +52,11 @@
   import NationalStatis from "../../water-function-area/statistic/national.vue";
   import SiteStatis from "../../river-station/statistic/site.vue";
   import SiteDayStatis from "../../river-station/statistic/site-day-avg.vue";
+
+  import MonthStandard from "./base-standard.vue";
+  import AvgStandard from "./avg-standard.vue";
+  import MonthIndex from "./base-index.vue";
+  import AvgIndex from "./avg-index.vue";
   export default {
     name: 'StatisticAirIndex',
     components: {
@@ -59,7 +64,11 @@
       AutoStatis,
       NationalStatis,
       SiteStatis,
-      SiteDayStatis
+      SiteDayStatis,
+      MonthStandard,
+      AvgStandard,
+      MonthIndex,
+      AvgIndex,
     },
     data() {
       return {