From 4f74dda53af6509d21bbb071984e395af5512577 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Wed, 15 Dec 2021 10:02:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=98=B2=E8=BF=94=E8=B4=AB=E6=8E=A5=E5=85=A5?=
 =?UTF-8?q?=E4=BC=81=E5=BE=AE=E4=BA=A7=E5=93=81=E5=BA=93=E5=92=8C=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AiTMap.vue                     | 150 +++++
 src/pages/Monitor/Add.vue                     | 365 ++++++++++++
 src/pages/Monitor/AddFamilyMember.vue         | 461 +++++++++++++++
 src/pages/Monitor/AddLog.vue                  | 159 ++++++
 src/pages/Monitor/Detail.vue                  | 539 ++++++++++++++++++
 src/pages/Monitor/FamilyMember.vue            | 336 +++++++++++
 src/pages/Monitor/FamilySituation.vue         | 259 +++++++++
 src/pages/Monitor/Income.vue                  | 267 +++++++++
 src/pages/Monitor/Monitor.vue                 |  87 +++
 src/pages/Monitor/PoorStatus.vue              | 350 ++++++++++++
 src/pages/Monitor/components/List.vue         | 295 ++++++++++
 src/pages/Monitor/components/Statistics.vue   | 439 ++++++++++++++
 src/pages/PovertyAlleviation/News.vue         | 228 ++++++++
 src/pages/PovertyAlleviation/NewsDetail.vue   |  98 ++++
 .../PovertyAlleviation/PovertyAlleviation.vue | 169 ++++++
 src/pages/povertyMonitor/Detail.vue           | 250 ++++++++
 src/pages/povertyMonitor/Form.vue             | 112 ++++
 src/pages/povertyMonitor/components/List.vue  | 209 +++++++
 .../povertyMonitor/components/Statistics.vue  | 329 +++++++++++
 src/pages/povertyMonitor/povertyMonitor.vue   |  89 +++
 20 files changed, 5191 insertions(+)
 create mode 100644 src/components/AiTMap.vue
 create mode 100644 src/pages/Monitor/Add.vue
 create mode 100644 src/pages/Monitor/AddFamilyMember.vue
 create mode 100644 src/pages/Monitor/AddLog.vue
 create mode 100644 src/pages/Monitor/Detail.vue
 create mode 100644 src/pages/Monitor/FamilyMember.vue
 create mode 100644 src/pages/Monitor/FamilySituation.vue
 create mode 100644 src/pages/Monitor/Income.vue
 create mode 100644 src/pages/Monitor/Monitor.vue
 create mode 100644 src/pages/Monitor/PoorStatus.vue
 create mode 100644 src/pages/Monitor/components/List.vue
 create mode 100644 src/pages/Monitor/components/Statistics.vue
 create mode 100644 src/pages/PovertyAlleviation/News.vue
 create mode 100644 src/pages/PovertyAlleviation/NewsDetail.vue
 create mode 100644 src/pages/PovertyAlleviation/PovertyAlleviation.vue
 create mode 100644 src/pages/povertyMonitor/Detail.vue
 create mode 100644 src/pages/povertyMonitor/Form.vue
 create mode 100644 src/pages/povertyMonitor/components/List.vue
 create mode 100644 src/pages/povertyMonitor/components/Statistics.vue
 create mode 100644 src/pages/povertyMonitor/povertyMonitor.vue

diff --git a/src/components/AiTMap.vue b/src/components/AiTMap.vue
new file mode 100644
index 00000000..124cce88
--- /dev/null
+++ b/src/components/AiTMap.vue
@@ -0,0 +1,150 @@
+<template>
+  <section class="AiTMap">
+    <div ref="tmap" class="map"/>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "AiTMap",
+  props: {
+    /**
+     * 地区id
+     */
+    areaId: String,
+    /**
+     * 地图参数,详情见https://lbs.qq.com/webApi/javascriptGL/glDoc/docIndexMap
+     */
+    ops: {default: () => ({})},
+    /**
+     * 加载三方库,以腾讯地图文档要求进行添加
+     */
+    libraries: {default: () => ["service"]},
+    /**
+     * 地图实例,支持用.sync绑定获取
+     */
+    map: Object,
+    /**
+     * 地图库,支持用.sync绑定获取
+     */
+    lib: Object,
+  },
+  data() {
+    return {
+      key: "3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY",
+      tmap: null,
+      mapLib: null
+    }
+  },
+  methods: {
+    injectLib(url, cb) {
+      const script = document.createElement('script')
+      script.type = 'text/javascript';
+      script.id = "aitmap";
+      script.src = url;
+      script.addEventListener('load', () => {
+        cb && cb()
+      })
+      document.body.appendChild(script);
+    },
+    initTMap() {
+      this.mapLib = TMap
+      this.tmap = new TMap.Map(this.$refs.tmap, {
+        zoom: 11,
+        ...this.ops
+      })
+      this.$emit('loaded')
+      this.$emit('update:lib', TMap)
+      this.$emit('update:map', this.tmap)
+      this.areaId && this.getMapArea()
+    },
+    getMapArea() {
+      let {mapLib, areaId, tmap: map} = this, keyword = areaId.substring(0, 6)
+      const fitBounds = (latLngList) => {
+        // 由多边形顶点坐标数组计算能完整呈现该多边形的最小矩形范围
+        if (latLngList.length === 0) {
+          return null;
+        }
+        let boundsN = latLngList[0].getLat();
+        let boundsS = boundsN;
+        let boundsW = latLngList[0].getLng();
+        let boundsE = boundsW;
+        latLngList.forEach((point) => {
+          point.getLat() > boundsN && (boundsN = point.getLat());
+          point.getLat() < boundsS && (boundsS = point.getLat());
+          point.getLng() > boundsE && (boundsE = point.getLng());
+          point.getLng() < boundsW && (boundsW = point.getLng());
+        });
+        return new TMap.LatLngBounds(
+            new TMap.LatLng(boundsS, boundsW),
+            new TMap.LatLng(boundsN, boundsE)
+        );
+      }
+      let polygons = new TMap.MultiPolygon({map, geometries: []});
+      new mapLib.service.District({
+        polygon: 2,
+        maxOffset: 100
+      }).search({keyword}).then(res => {
+        if (res?.result) {
+          let center = res.result?.[0]?.[0]?.location
+          this.tmap.setCenter(center)
+          res.result.forEach((level) => {
+            level.forEach((place) => {
+              let bounds = [];
+              let newGeometries = place.polygon.map((polygon, index) => {
+                bounds.push(fitBounds(polygon)); // 计算能完整呈现行政区边界的最小矩形范围
+                return {
+                  id: `${place.id}_${index}`,
+                  paths: polygon, // 将得到的行政区划边界用多边形标注在地图上
+                };
+              });
+              bounds = bounds.reduce((a, b) => {
+                return fitBounds([
+                  a.getNorthEast(),
+                  a.getSouthWest(),
+                  b.getNorthEast(),
+                  b.getSouthWest(),
+                ]);
+              }); // 若一行政区有多个多边形边界，应计算能包含所有多边形边界的范围。
+              polygons.updateGeometries(newGeometries);
+              this.tmap.fitBounds(bounds);
+            });
+          });
+        }
+      })
+    }
+  },
+  mounted() {
+    if (!window?.TMap) {
+      window.initTMap = this.initTMap
+      this.injectLib(`https://map.qq.com/api/gljs?v=1.exp&key=${this.key}&libraries=${this.libraries.toString()}&callback=initTMap`)
+    } else {
+      this.initTMap()
+    }
+  },
+  destroyed() {
+    this.map.destroy()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiTMap {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+
+  ::v-deep.map {
+    height: 100%;
+
+    & > div > div {
+      &:nth-of-type(2), &:nth-of-type(3) {
+        display: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/Monitor/Add.vue b/src/pages/Monitor/Add.vue
new file mode 100644
index 00000000..883b1e95
--- /dev/null
+++ b/src/pages/Monitor/Add.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="add">
+    <div class="form-group">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>监测对象类型</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpType" v-model="form.type"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>联系方式</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" type="number" v-model="form.phone" :maxlength="11" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>地址</span>
+          </div>
+          <div class="right">
+            <!-- <AiArea class="aiArea" v-model="form.addressAreaId" mode="custom" fullname :areaRange="$areaId" :name.sync="form.addressArea">
+              <span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
+              <i v-else>请选择</i>
+              <u-icon name="arrow-right" color="#ddd"/>
+            </AiArea> -->
+            <AiAreaPicker ref="address" class="aiArea" :areaId="$areaId" mode="custom" all @select="onAreaChange">
+              <span class="label" v-if="form.addressArea">{{ form.addressArea }}</span>
+              <i v-else>请选择</i>
+              <u-icon name="arrow-right" color="#ddd"/>
+            </AiAreaPicker>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>家庭住址</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" v-model="form.address" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>是否扶贫搬迁</span>
+          </div>
+          <div class="right">
+            <u-radio-group v-model="form.move">
+              <u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
+            </u-radio-group>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="form-group" v-if="form.move === '01'">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>安置地区</span>
+          </div>
+          <div class="right">
+            <AiAreaPicker ref="area" class="aiArea" :areaId.sync="form.placeAreaId" mode="custom" all @select="onChange">
+              <span class="label" v-if="form.placeArea">{{ form.placeArea }}</span>
+              <i v-else>请选择</i>
+              <u-icon name="arrow-right" color="#ddd"/>
+            </AiAreaPicker>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>安置地区详细地址</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" v-model="form.place" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btn" hover-class="text" @click="submit"> {{ isEdit ? '保存' : '提交' }}</div>
+  </div>
+</template>
+
+<script>
+  import AiUploader from '@/components/AiUploader'
+  import AiSelect from '@/components/AiSelect'
+  import AiArea from '@/components/AiArea'
+  import AiAreaPicker from '@/components/AiAreaPicker'
+
+  export default {
+    data () {
+      return {
+        form: {
+          addressAreaId: '',
+          address: '',
+          addressArea: '',
+          move: '02',
+          place: '',
+          placeAreaId: '',
+          placeArea: '',
+          type: ''
+        },
+        $areaId: '',
+        isEdit: false,
+        id: '',
+        areaName: ''
+      }
+    },
+
+    components: {
+      AiArea,
+      AiSelect,
+      AiUploader,
+      AiAreaPicker
+    },
+
+    created () {
+      this.$areaId = this.$store.state.user.areaId
+      this.areaName = this.$store.state.user.areaFullName
+      this.$dict.load(['fpType', 'fpYesOrNo'])
+    },
+
+    onLoad (query) {
+      if (query.id) {
+        this.isEdit = true
+        this.id = query.id
+
+        this.getInfo(this.id)
+      }
+    },
+
+    methods: {
+      submit () {
+        if (!this.form.type) {
+          return this.$u.toast('请选择监测类型')
+        }
+
+        if (!this.form.phone) {
+          return this.$u.toast('请输入联系方式')
+        }
+
+        if (!this.form.addressAreaId) {
+          return this.$u.toast('请选择住址')
+        }
+
+        uni.showLoading()
+        this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
+          ...this.form,
+          id: this.isEdit ? this.id : ''
+        }).then(res => {
+          if (res.code === 0) {
+            this.$u.toast(this.isEdit ? '保存成功' : '提交成功')
+            uni.$emit('reload')
+            uni.navigateBack({
+              delta: 1
+            })
+          }
+          uni.hideLoading()
+        })
+      },
+
+      onAreaChange (e) {
+        this.form.addressAreaId = e.id
+        const areaList = this.$refs.address.fullArea
+        let fullAreaName = ''
+        areaList.forEach(item => {
+          fullAreaName = fullAreaName + item.name
+        })
+
+        this.form.addressArea = fullAreaName.replace('全国', '')
+      },
+
+      onChange (e) {
+        this.form.placeAreaId = e.id
+        const areaList = this.$refs.area.fullArea
+        let fullAreaName = ''
+        areaList.forEach(item => {
+          fullAreaName = fullAreaName + item.name
+        })
+
+        this.form.placeArea = fullAreaName.replace('全国', '')
+      },
+
+      getInfo (id) {
+        this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = {
+              ...this.form,
+              ...res.data
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .add {
+    padding-bottom: 120px;
+
+    .aiArea {
+      display: flex;
+      align-items: center;
+      .label {
+        color: #303133!important;
+        font-size: 30px;
+      }
+
+      i {
+        margin-left: 4px;
+        font-style: normal;
+        color: #999999;
+        font-size: 30px;
+      }
+    }
+
+    ::v-deep .u-radio {
+      &:last-child {
+        .u-radio__label {
+          margin-right: 0;
+        }
+      }
+    }
+
+    & > div {
+      margin-bottom: 16px;
+      background: #fff;
+    }
+
+    .form-group {
+      .form-item {
+        padding-left: 32px;
+
+        .form-item__wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 112px;
+          border-bottom: 1px solid #E4E5E6;
+        }
+
+        .right {
+          height: 112px;
+          line-height: 112px;
+          padding-right: 32px;
+
+          span {
+            font-size: 30px;
+            color: #999999;
+          }
+        }
+
+        input {
+          height: 100%;
+          text-align: right;
+        }
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          span {
+            color: #333333;
+            font-size: 32px;
+          }
+
+          i {
+            margin-right: 4px;
+            font-style: normal;
+            color: #FF4466;
+            font-size: 32px;
+          }
+        }
+
+        &:last-child {
+          .form-item__wrapper {
+            border: none;
+          }
+        }
+      }
+    }
+
+    .form-item__imgs {
+      padding: 32px;
+
+      .form-item__title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 34px;
+
+        h2 {
+          color: #333333;
+          font-weight: normal;
+          font-size: 32px;
+        }
+
+        i {
+          color: #999999;
+          font-size: 28px;
+          font-style: normal;
+        }
+      }
+
+      textarea {
+        width: 100%;
+      }
+    }
+
+    .form-type {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 112px;
+      padding: 0 32px;
+
+      h2 {
+        font-weight: normal;
+        color: #333333;
+        font-size: 32px;
+      }
+
+      span {
+        color: #999999;
+        font-size: 28px;
+      }
+    }
+
+    .btn {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 11;
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      margin: 0;
+      text-align: center;
+      color: #FFFFFF;
+      font-size: 32px;
+      background: #3192F4;
+    }
+  }
+</style>
diff --git a/src/pages/Monitor/AddFamilyMember.vue b/src/pages/Monitor/AddFamilyMember.vue
new file mode 100644
index 00000000..13ee6a61
--- /dev/null
+++ b/src/pages/Monitor/AddFamilyMember.vue
@@ -0,0 +1,461 @@
+<template>
+  <div class="add">
+    <div class="form-group">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>与户主关系</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpRelationship" v-model="form.relationship"></AiSelect>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>姓名</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" v-model="form.name" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>身份证号</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" v-model="form.idNumber" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>性别</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="sex" v-model="form.sex"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>民族</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpNation" v-model="form.nation"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>政治面貌</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpPoliticalOutlook" v-model="form.politicalOutlook"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>文化程度</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpEducation" v-model="form.education"></AiSelect>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>在校情况</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpStudentsInSchool" v-model="form.studentsInSchool"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>健康状况</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpHealth" v-model="form.health"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>劳动技能</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpLaborSkills" v-model="form.laborSkills"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>务工区域</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" v-model="form.workArea" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>务工时长(月)</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" type="number" v-model="form.workingMonths" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否参加医保</span>
+          </div>
+          <div class="right">
+            <u-radio-group v-model="form.medicalInsurance">
+              <u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
+            </u-radio-group>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否参加大病保险</span>
+          </div>
+          <div class="right">
+            <u-radio-group v-model="form.sicknessInsurance">
+              <u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
+            </u-radio-group>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否参加养老保险</span>
+          </div>
+          <div class="right">
+            <u-radio-group v-model="form.endowmentInsurance">
+              <u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
+            </u-radio-group>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否享受最低生活保障</span>
+          </div>
+          <div class="right">
+            <u-radio-group v-model="form.subsistenceAllowance">
+              <u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
+            </u-radio-group>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否特困供养</span>
+          </div>
+          <div class="right">
+            <u-radio-group v-model="form.destitute">
+              <u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
+            </u-radio-group>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btn" @click="submit">提交</div>
+  </div>
+</template>
+
+<script>
+  import AiSelect from '@/components/AiSelect'
+  import AiDate from '@/components/AiDate'
+  export default {
+    data () {
+      return {
+        form: {
+          destitute: '',
+          education: '',
+          endowmentInsurance: '',
+          health: '',
+          idNumber: '',
+          laborSkills: '',
+          medicalInsurance: '',
+          name: '',
+          nation: '',
+          politicalOutlook: '',
+          relationship: '',
+          relocation: '',
+          sex: '',
+          sicknessInsurance: '',
+          studentsInSchool: '',
+          subsistenceAllowance: '',
+          workArea: '',
+          workingMonths: ''
+        },
+        id: '',
+        info: {},
+        isEdit: false,
+        index: ''
+      }
+    },
+
+    components: {
+      AiSelect,
+      AiDate
+    },
+
+    onLoad (query) {
+      uni.showLoading()
+      this.id = query.id
+      this.$dict.load(['fpRelationship', 'sex', 'fpNation', 'fpHealth', 'fpEducation', 'fpYesOrNo', 'fpLaborSkills', 'fpPoliticalOutlook', 
+        'fpRelationship', 'fpStudentsInSchool', 'fpFnancialAssistance', 'fpHealthAssistance', 'fpHousingSecurity']).then(() => {
+        this.getInfo(query.id)
+      })
+
+      if (query.index > -1) {
+        this.isEdit = true
+        this.index = Number(query.index)
+      }
+    },
+
+    methods: {
+      getInfo (id) {
+        this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            if (this.isEdit) {
+              this.form = {
+                ...res.data.familyList[this.index]
+              }
+            }
+            this.info = res.data
+          }
+
+          uni.hideLoading()
+        })
+      },
+
+      rules () {
+        return {
+          relationship: '请选择与户主关系',
+          name: '请输入姓名',
+          idNumber: '请输入身份证号',
+          sex: '请选择性别',
+          studentsInSchool: '请选择在校情况',
+          health: '请选择健康状况',
+          medicalInsurance: '请选择是否参加医保',
+          sicknessInsurance: '请选择是否参加大病保险',
+          endowmentInsurance: '请选择是否参加养老保险',
+          subsistenceAllowance: '请选择是否享受最低生活保障',
+          destitute: '请选择是否特困供养',
+        }
+      },
+
+      submit () {
+        const rules = this.rules()
+
+        for (let v of Object.keys(rules)) {
+          if (!this.form[v]) {
+            return this.$u.toast(rules[v])
+          }
+        }
+
+        uni.showLoading()
+        let familyList = this.info.familyList
+        if (this.isEdit) {
+          familyList[this.index] = this.form
+        } else {
+          familyList.push(this.form)
+        }
+        this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
+          ...this.info,
+          familyList, 
+          id: this.id
+        }).then(res => {
+          if (res.code === 0) {
+            this.$u.toast(this.isEdit ? '编辑成功' : '提交成功')
+            uni.$emit('reload')
+            uni.navigateBack({
+              delta: 1
+            })
+          }
+          uni.hideLoading()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .add {
+    padding-bottom: 120px;
+
+    ::v-deep .u-radio {
+      &:last-child {
+        .u-radio__label {
+          margin-right: 0;
+        }
+      }
+    }
+
+    & > div {
+      margin-bottom: 16px;
+      background: #fff;
+    }
+
+    .form-group {
+      .form-item {
+        padding-left: 32px;
+
+        .form-item__wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 112px;
+          border-bottom: 1px solid #E4E5E6;
+        }
+
+        .right {
+          height: 112px;
+          line-height: 112px;
+          padding-right: 32px;
+
+          span {
+            font-size: 30px;
+            color: #999999;
+          }
+        }
+
+        input {
+          height: 100%;
+          text-align: right;
+        }
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          span {
+            color: #333333;
+            font-size: 32px;
+          }
+
+          i {
+            margin-right: 4px;
+            font-style: normal;
+            color: #FF4466;
+            font-size: 32px;
+          }
+        }
+
+        &:last-child {
+          .form-item__wrapper {
+            border: none;
+          }
+        }
+      }
+    }
+
+    .form-item__imgs {
+      padding: 32px;
+
+      .form-item__title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 34px;
+
+        h2 {
+          color: #333333;
+          font-weight: normal;
+          font-size: 32px;
+        }
+
+        i {
+          color: #999999;
+          font-size: 28px;
+          font-style: normal;
+        }
+      }
+
+      textarea {
+        width: 100%;
+      }
+    }
+
+    .form-type {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 112px;
+      padding: 0 32px;
+
+      h2 {
+        font-weight: normal;
+        color: #333333;
+        font-size: 32px;
+      }
+
+      span {
+        color: #999999;
+        font-size: 28px;
+      }
+    }
+
+    .btn {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 11;
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      margin: 0;
+      text-align: center;
+      color: #FFFFFF;
+      font-size: 32px;
+      background: #3192F4;
+    }
+  }
+</style>
diff --git a/src/pages/Monitor/AddLog.vue b/src/pages/Monitor/AddLog.vue
new file mode 100644
index 00000000..afbdad1f
--- /dev/null
+++ b/src/pages/Monitor/AddLog.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="form">
+    <div class="form-item form-item__textarea">
+      <div class="form-item__title">
+        <em>*</em>
+        <h2>帮扶内容</h2>
+      </div>
+      <textarea :maxlength="500" v-model="detail" placeholder="请输入帮扶内容"></textarea>
+    </div>
+    <div class="form-item form-item__imgs">
+      <div class="form-item__title">
+        <h2>图片</h2>
+        <i>（最多9张）</i>
+      </div>
+      <div>
+        <AiUploader :limit="9" multiple :def.sync="picture"></AiUploader>
+      </div>
+    </div>
+    <div class="btn" @click="submit">提交</div>
+  </div>
+</template>
+
+<script>
+  import AiUploader from '@/components/AiUploader'
+
+  export default {
+    data () {
+      return {
+        detail: '',
+        pid: '',
+        id: '',
+        picture: []
+      }
+    },
+
+    components: {
+      AiUploader
+    },
+
+    onLoad (query) {
+      if (query.id) {
+        this.getInfo(query.id)
+        this.id = query.id
+      }
+      this.pid = query.pid
+    },
+
+    methods: {
+      getInfo (id) {
+        this.$http.post(`/app/apppreventionreturntopovertylog/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.detail = res.data.detail
+            this.picture = JSON.parse(res.data.picture)
+          }
+        })
+      },
+
+      submit () {
+        if (!this.detail) {
+          return this.$u.toast('请输入帮扶内容')
+        }
+
+        uni.showLoading()
+        this.$http.post('/app/apppreventionreturntopovertylog/addOrUpdate', {
+          detail: this.detail,
+          picture: JSON.stringify(this.picture),
+          pid: this.pid,
+          id: this.id || ''
+        }).then(res => {
+          if (res.code === 0) {
+            this.$u.toast(this.isEdit ? '保存成功' : '提交成功')
+            uni.$emit('reload')
+            uni.navigateBack({
+              delta: 1
+            })
+          }
+          uni.hideLoading()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .form {
+    padding-bottom: 120px;
+
+    div {
+      margin-bottom: 16px;
+      background: #fff;
+    }
+
+    .form-item {
+      padding: 32px;
+
+      .form-item__title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 34px;
+
+        em {
+          margin-right: 4px;
+          font-style: normal;
+          color: #FF4466;
+        }
+
+        h2 {
+          color: #333333;
+          font-weight: normal;
+          font-size: 32px;
+        }
+
+        i {
+          color: #999999;
+          font-size: 28px;
+          font-style: normal;
+        }
+      }
+
+      textarea {
+        width: 100%;
+      }
+    }
+
+    .form-type {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 112px;
+      padding: 0 32px;
+
+      h2 {
+        font-weight: normal;
+        color: #333333;
+        font-size: 32px;
+      }
+
+      span {
+        color: #999999;
+        font-size: 28px;
+      }
+    }
+
+    .btn {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 11;
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      margin: 0;
+      text-align: center;
+      color: #FFFFFF;
+      font-size: 32px;
+      background: #3192F4;
+    }
+  }
+</style>
diff --git a/src/pages/Monitor/Detail.vue b/src/pages/Monitor/Detail.vue
new file mode 100644
index 00000000..ee4ad61e
--- /dev/null
+++ b/src/pages/Monitor/Detail.vue
@@ -0,0 +1,539 @@
+<template>
+  <div class="detail" v-if="pageShow" :class="[isFrom ? 'active' : '']">
+    <div class="tab" v-if="!isFrom">
+      <span @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">基本信息</span>
+      <span @click="changeTab(1)" :class="[currIndex === 1 ? 'active' : '']">帮扶日志</span>
+    </div>
+    <div class="tab-content">
+      <div class="tab-content__item" v-show="currIndex === 0">
+        <div class="item-wrapper">
+          <div class="item-header item-avatar">
+            <div class="left">
+              <image src="/static/images/avatar.png" />
+              <div class="left-right">
+                <h2>{{ info.name }}</h2>
+                <p>{{ info.phone }}</p>
+              </div>
+            </div>
+            <span @click="linkTo('/pages/Monitor/Add?id=' + info.id)">编辑</span>
+          </div>
+          <div class="item-info">
+            <label>行政区划</label>
+            <span>{{ info.addressArea }}</span>
+          </div>
+          <div class="item-info">
+            <label>家庭地址</label>
+            <span>{{ info.address }}</span>
+          </div>
+          <div class="item-info">
+            <label>是否扶贫搬迁</label>
+            <span>{{ $dict.getLabel('fpYesOrNo', info.move) }}</span>
+          </div>
+          <div class="item-info" v-if="info.move === '01'">
+            <label>安置地区</label>
+            <span>{{ info.placeArea }}</span>
+          </div>
+          <div class="item-info" v-if="info.move === '01'">
+            <label>安置详细地址</label>
+            <span>{{ info.place }}</span>
+          </div>
+          <div class="item-info">
+            <label>纳入监测时间</label>
+            <span>{{ info.createTime }}</span>
+          </div>
+          <div class="item-info">
+            <label>监测员</label>
+            <span>{{ info.monitoringContact || '-' }}</span>
+          </div>
+          <div class="item-info">
+            <label>监测员电话</label>
+            <span style="color: #3D94FB;" @click="call(info.monitoringContactPhone)">{{ info.monitoringContactPhone || '-' }}</span>
+          </div>
+        </div>
+        <div class="item-wrapper">
+          <div class="item-header">
+            <div class="left">
+              <h2>家庭成员</h2>
+              <i :style="{color: info.familyList.length ? '#2EA222' : '#FF4466'}">({{ info.familyList.length ? '已填写' : '未填写' }})</i>
+            </div>
+            <span @click="linkTo('/pages/Monitor/FamilyMember?id=' + info.id)">编辑</span>
+          </div>
+          <div class="item-info">
+            <label>未参加医疗参保</label>
+            <span>{{ info.ylbxCount }}人</span>
+          </div>
+          <div class="item-info">
+            <label>未参加养老保险</label>
+            <span>{{ info.ylCount }}人</span>
+          </div>
+        </div>
+        <div class="item-wrapper">
+          <div class="item-header">
+            <div class="left">
+              <h2>家庭情况</h2>
+              <i :style="{color: isFamilySituation ? '#2EA222' : '#FF4466'}">({{ isFamilySituation ? '已填写' : '未填写' }})</i>
+            </div>
+            <span @click="linkTo('/pages/Monitor/FamilySituation?id=' + info.id)">编辑</span>
+          </div>
+          <div class="item-info">
+            <label>是否危房</label>
+            <span>{{ $dict.getLabel('fpYesOrNo', info.dilapidatedHouse) || '-' }}</span>
+          </div>
+          <div class="item-info">
+            <label>饮用水安全问题</label>
+            <span>{{ $dict.getLabel('fpYesOrNo', info.drinkingWaterSafety) || '-' }}</span>
+          </div>
+        </div>
+        <div class="item-wrapper">
+          <div class="item-header">
+            <div class="left">
+              <h2>收支情况</h2>
+              <i :style="{color: isIncome ? '#2EA222' : '#FF4466'}">({{ isIncome ? '已填写' : '未填写' }})</i>
+            </div>
+            <span @click="linkTo('/pages/Monitor/Income?id=' + info.id)">编辑</span>
+          </div>
+          <div class="item-info">
+            <label>家庭纯收入</label>
+            <span>{{ info.income6 }}元</span>
+          </div>
+          <div class="item-info">
+            <label>家庭人均纯收入</label>
+            <span>{{ info.income7 }}元</span>
+          </div>
+        </div>
+        <div class="item-wrapper">
+          <div class="item-header">
+            <div class="left">
+              <h2>风险解除</h2>
+              <i :style="{color: isPoorStatus ? '#2EA222' : '#FF4466'}">({{ isPoorStatus ? '已填写' : '未填写' }})</i>
+            </div>
+            <span @click="linkTo('/pages/Monitor/PoorStatus?id=' + info.id)">编辑</span>
+          </div>
+          <div class="item-info">
+            <label>是否消除风险</label>
+            <span>{{ info.riskEliminationMethod ? '是' : '-'  }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="tab-content__item" v-show="currIndex === 1">
+        <div class="log-item" v-for="(item, index) in list" :key="index">
+          <div class="log-item__wrapper">
+            <div class="log-item__user">
+              <div class="left">
+                <div class="user">
+                  <span>{{ item.createUserName.substr(item.createUserName.length - 2)}}</span>
+                </div>
+                <h2>{{ item.createUserName }}</h2>
+              </div>
+              <div class="right">
+                <span>{{ item.createTime }}</span>
+                <image src="/static/images/more.png" @click="edit(item.id)" />
+              </div>
+            </div>
+            <p>{{ item.detail }}</p>
+            <div class="imgs">
+              <image :src="img.url" @click="prevImg(item.imgs, img.url)" v-for="(img, index) in item.imgs" :key="index" />
+            </div>
+          </div>
+        </div>
+        <ai-empty v-if="!list.length" style="padding-bottom: 20px;"></ai-empty>
+      </div>
+    </div>
+    <ai-fixed-btn v-if="currIndex === 1">
+      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog"></div>
+    </ai-fixed-btn>
+  </div>
+</template>
+
+<script>
+  import AiFixedBtn from '@/components/AiFixedBtn'
+  import AiEmpty from '@/components/AiEmpty/AiEmpty'
+  export default {
+    name: 'detail',
+
+    data () {
+      return {
+        info: {},
+        pageShow: false,
+        currIndex: 0,
+        list: [],
+        isFrom: false
+      }
+    },
+
+    components: {
+      AiEmpty,
+      AiFixedBtn
+    },
+
+    computed: {
+      isIncome () {
+        if (!this.info.id) {
+          return false
+        }
+
+        return this.info.income6 > 0 && this.info.income7 > 0;
+
+
+      },
+
+      isPoorStatus () {
+        if (!this.info.id) {
+          return false
+        }
+
+        return !!this.info.riskEliminationMethod;
+
+
+      },
+
+      isFamilySituation () {
+        if (!this.info.id) {
+          return false
+        }
+
+        return !!(this.info.drinkingWaterSafety && this.info.dilapidatedHouse);
+
+
+      }
+    },
+
+    onLoad (query) {
+      if (query.isFrom) {
+        this.isFrom = true
+        uni.setNavigationBarTitle({
+          title: '风险预警详情'
+        })
+      }
+      uni.showLoading()
+      this.$dict.load(['fpType', 'riskEliminationMethod', 'fpRiskType', 'fpYesOrNo']).then(() => {
+        this.getInfo(query.id)
+      })
+
+      this.id = query.id
+      uni.$on('reload', () => {
+        this.getInfo(query.id)
+      })
+    },
+
+    methods: {
+      linkTo (url) {
+        uni.navigateTo({
+          url
+        })
+      },
+
+      call (phone) {
+        if (phone) {
+          uni.makePhoneCall({
+            phoneNumber: phone
+          })
+        }
+      },
+
+      edit (id) {
+        uni.showActionSheet({
+          itemList: ['编辑', '删除'],
+          success: res => {
+            if (res.tapIndex === 0) {
+              uni.navigateTo({
+                url: `/pages/Monitor/AddLog?pid=${this.info.id}&id=${id}`
+              })
+            } else if (res.tapIndex === 1) {
+              this.$confirm('确定删除该数据？').then(() => {
+                uni.showLoading()
+                this.$http.post(`/app/apppreventionreturntopovertylog/delete?ids=${id}`).then(res => {
+                  if (res.code === 0) {
+                    this.$u.toast('删除成功')
+                    this.getInfo(this.id)
+                  }
+                  uni.hideLoading()
+                })
+              }).catch(() => {
+              })
+            }
+          }
+        })
+      },
+
+      prevImg (urls, img) {
+        const imgs = urls.map(v => v.url)
+        uni.previewImage({
+          urls: imgs,
+          current: img
+        })
+      },
+
+      toAddLog () {
+        uni.navigateTo({
+          url: '/pages/Monitor/AddLog?pid=' + this.info.id
+        })
+      },
+
+      changeTab (index) {
+        this.currIndex = index
+      },
+
+      getInfo (id) {
+        this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+
+            let ylbxCount = 0
+            let ylCount = 0
+            res.data.familyList.forEach(item => {
+              if (item.medicalInsurance === '02') {
+                ylbxCount = ylbxCount + 1
+              }
+              if (item.endowmentInsurance === '02') {
+                ylCount = ylCount + 1
+              }
+            })
+            this.info.ylbxCount = ylbxCount
+            this.info.ylCount = ylCount
+            this.pageShow = true
+          }
+
+          uni.hideLoading()
+        })
+        this.$http.post(`/app/apppreventionreturntopovertylog/list?pid=${id}&size=1000&current=1`).then(res => {
+          if (res.code === 0) {
+            this.list = res.data.records.map(item => {
+              return {
+                ...item,
+                imgs: JSON.parse(item.picture)
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .detail {
+    padding-top: 96px;
+    padding-bottom: 60px;
+
+    &.active {
+      padding-top: 0;
+    }
+
+    .addBtn {
+      width: 96px;
+      height: 96px;
+      flex-shrink: 0;
+      background: $uni-color-primary;
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+      font-size: 48px;
+      color: #fff;
+      border-radius: 50%;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+    }
+
+    .tab {
+      display: flex;
+      position: fixed;
+      align-items: center;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      width: 100%;
+      height: 96px;
+      padding: 0 60px;
+      background: #FFFFFF;
+      border-bottom: 1px solid #D4D4D4;
+      box-sizing: border-box;
+
+      * {
+        box-sizing: border-box;
+      }
+
+      span {
+        position: relative;
+        flex: 1;
+        height: 96rpx;
+        line-height: 96rpx;
+        color: #000000;
+        text-align: center;
+        font-size: 32px;
+
+        &::after {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          width: 192px;
+          height: 6px;
+          background: transparent;
+          transform: translateX(-50%);
+          content: ' ';
+        }
+
+        &.active {
+          color: #1365DD;
+
+          &::after {
+            background: #1365DD;
+          }
+        }
+      }
+    }
+
+    .item-wrapper {
+      background: #fff;
+      margin-bottom: 16px;
+      padding: 0 32px 16px;
+
+      .item-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 96px;
+
+        & > span {
+          color: #3975C6;
+          font-size: 32px;
+        }
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          h2 {
+            color: #333333;
+            font-size: 32px;
+            font-weight: 500;
+          }
+
+          i {
+            font-style: normal;
+            color: #2EA222;
+            font-size: 32px;
+          }
+        }
+      }
+
+      .item-info {
+        display: flex;
+        justify-content: space-between;
+        padding: 14px 0;
+
+        label {
+          color: #999999;
+          font-size: 32px;
+        }
+
+        span {
+          max-width: 496px;
+          text-align: right;
+          color: #333333;
+          font-size: 32px;
+        }
+      }
+
+      .item-avatar {
+        height: 192px;
+
+        image {
+          width: 112px;
+          height: 112px;
+          margin-right: 24px;
+        }
+
+        .left-right {
+          p {
+            margin-top: 8px;
+            color: #999999;
+            font-size: 28px;
+          }
+        }
+      }
+    }
+
+    .log-item {
+      padding: 0 0 0 32px;
+      background: #fff;
+
+      &:first-child {
+        margin-top: 16px;
+      }
+
+      &:last-child {
+        .log-item__wrapper {
+          border: none!important;
+        }
+      }
+
+      .log-item__wrapper {
+        padding: 32px 32px 32px 0;
+        border-bottom: 1px solid #E4E5E6;
+
+        .log-item__user {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          & > div {
+            display: flex;
+            align-items: center;
+          }
+
+          .left {
+            .user, image {
+              width: 80px;
+              height: 80px;
+              line-height: 80px;
+              margin-right: 16px;
+              text-align: center;
+              border-radius: 50%;
+              background: #2266FF;
+
+              span {
+                color: #fff;
+                font-size: 28px;
+              }
+            }
+
+            h2 {
+              color: #333;
+              font-size: 32px;
+            }
+          }
+
+          .right {
+            image {
+              width: 32px;
+              height: 32px;
+            }
+
+            span {
+              margin-right: 6px;
+              color: #999999;
+              font-size: 28px;
+            }
+          }
+        }
+
+        p {
+          margin: 4px 0 16px 96px;
+          color: #343D65;
+          font-size: 28px;
+        }
+
+        .imgs {
+          margin-left: 96px;
+
+          image {
+            width: 136px;
+            height: 136px;
+            margin-right: 8px;
+            margin-bottom: 8px;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/Monitor/FamilyMember.vue b/src/pages/Monitor/FamilyMember.vue
new file mode 100644
index 00000000..03a5dcc9
--- /dev/null
+++ b/src/pages/Monitor/FamilyMember.vue
@@ -0,0 +1,336 @@
+<template>
+  <div class="familyMember" v-if="pageShow">
+    <div class="item" v-for="(item, index) in list" :key="index">
+      <div class="item-title">
+        <div class="top">
+          <div class="left">
+            <h2>{{ item.name }}</h2>
+            <span>{{ item.idNumber }}</span>
+          </div>
+          <span>{{ $dict.getLabel('fpRelationship', item.relationship) }}</span>
+        </div>
+        <div class="bottom">
+          <span>{{ $dict.getLabel('sex', item.sex) }}</span>
+          <span>{{ item.age }}岁</span>
+        </div>
+      </div>
+      <div class="item-info" v-if="item.isShow">
+        <div class="item-info__item">
+          <label>民族</label>
+          <span>{{ $dict.getLabel('fpNation', item.nation) }}</span>
+        </div>
+        <div class="item-info__item">
+          <label>政治面貌</label>
+          <span>{{ $dict.getLabel('fpPoliticalOutlook', item.politicalOutlook) }}</span>
+        </div>
+        <div class="item-info__item">
+          <label>文化程度</label>
+          <span>{{ $dict.getLabel('fpEducation', item.education) }}</span>
+        </div>
+        <div class="item-info__item">
+          <label>在校情况</label>
+          <span>{{ $dict.getLabel('fpStudentsInSchool', item.studentsInSchool) }}</span>
+        </div>
+        <div class="item-info__item">
+          <label>健康状况</label>
+          <span>{{ $dict.getLabel('fpHealth', item.health) }}</span>
+        </div>
+        <div class="item-info__item">
+          <label>劳动技能</label>
+          <span>{{ $dict.getLabel('fpLaborSkills', item.laborSkills) }}</span>
+        </div>
+        <div class="item-info__item">
+          <label>务工区域</label>
+          <span>{{ item.workArea }}</span>
+        </div>
+        <div class="item-info__item">
+          <label>务工时间</label>
+          <span>{{ item.workingMonths }}月</span>
+        </div>
+        <div class="item-info__item">
+          <label>是否参加医疗参保</label>
+          <span>{{ $dict.getLabel('fpYesOrNo', item.medicalInsurance) }}</span>
+        </div>
+        <div class="item-info__item">
+          <label>是否参加大病保险</label>
+          <span>{{ $dict.getLabel('fpYesOrNo', item.sicknessInsurance) }}</span>
+        </div>
+        <div class="item-info__item">
+          <label>是否参加养老保险</label>
+          <span>{{ $dict.getLabel('fpYesOrNo', item.endowmentInsurance) }}</span>
+        </div>
+        <div class="item-info__item">
+          <label>是否享受最低生活保障</label>
+          <span>{{ $dict.getLabel('fpYesOrNo', item.subsistenceAllowance) }}</span>
+        </div>
+        <div class="item-info__item">
+          <label>是否特困供养</label>
+          <span>{{ $dict.getLabel('fpYesOrNo', item.destitute) }}</span>
+        </div>
+        <div class="item-info__item">
+        </div>
+      </div>
+      <div class="item-bottom">
+        <span @click="showMore(index)">{{ item.isShow ? '收起详情' : '展开详情' }}</span>
+        <span @click="toEdit(index)">编辑</span>
+        <span @click="remove(index)">删除</span>
+      </div>
+    </div>
+    <ai-fixed-btn>
+      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAdd"></div>
+    </ai-fixed-btn>
+    <div class="no-more" v-if="!list.length">
+      <image src="/static/images/empty.png" />
+      <div>
+        <span>您还未添加过家庭成员点击</span>
+        <i>新增按钮</i>
+        <span>试试吧~</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import AiFixedBtn from '@/components/AiFixedBtn'
+  import AiBack from '@/components/AiBack'
+
+  export default {
+    data () {
+      return {
+        list: [],
+        id: '',
+        info: {},
+        pageShow: false
+      }
+    },
+
+    components: {
+      AiBack,
+      AiFixedBtn
+    },
+
+    onLoad (query) {
+      uni.showLoading()
+      this.id = query.id
+      this.$dict.load(['fpRelationship', 'sex', 'fpNation', 'fpHealth', 'fpEducation', 'fpYesOrNo', 'fpLaborSkills', 'fpPoliticalOutlook',
+        'fpRelationship', 'fpStudentsInSchool', 'fpFnancialAssistance', 'fpHealthAssistance', 'fpHousingSecurity']).then(() => {
+        this.getInfo(query.id)
+      })
+
+      uni.$on('reload', () => {
+        this.getInfo(query.id)
+      })
+    },
+
+    methods: {
+      toAdd () {
+        uni.navigateTo({
+          url: '/pages/Monitor/AddFamilyMember?id=' + this.id
+        })
+      },
+
+      toEdit (index) {
+        this.$confirm('确定编辑该数据？').then(() => {
+          uni.navigateTo({
+            url: `/pages/Monitor/AddFamilyMember?id=${this.id}&index=${index}`
+          })
+        }).catch(() => {
+        })
+      },
+
+      remove (index) {
+        this.$confirm('确定删除该数据？').then(() => {
+          let familyList = JSON.parse(JSON.stringify(this.list))
+          familyList.splice(index, 1)
+          uni.showLoading()
+          this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
+            ...this.info,
+            familyList,
+            id: this.id
+          }).then(res => {
+            if (res.code === 0) {
+              this.$u.toast('删除成功')
+              this.getInfo(this.id)
+            }
+            uni.hideLoading()
+          })
+        }).catch(() => {
+        })
+      },
+
+      showMore (index) {
+        this.list[index].isShow = !this.list[index].isShow
+      },
+
+      getInfo (id) {
+        this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+            this.list = res.data.familyList.map(item => {
+              return {
+                ...item,
+                isShow: false,
+                age: this.$calcAge(item.idNumber)
+              }
+            })
+
+            this.pageShow = true
+          }
+
+          uni.hideLoading()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .familyMember {
+    padding: 32px 0;
+
+    .no-more {
+      padding-top: 160px;
+      text-align: center;
+
+      image {
+        width: 282px;
+        height: 304px;
+      }
+
+      div {
+        width: 280px;
+        margin: 0 auto;
+
+        span {
+          color: #999999;
+          font-size: 28px;
+        }
+
+        i {
+          font-style: normal;
+          color: #467DFE;
+          font-size: 28px;
+        }
+      }
+    }
+
+    .addBtn {
+      width: 96px;
+      height: 96px;
+      flex-shrink: 0;
+      background: $uni-color-primary;
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+      font-size: 48px;
+      color: #fff;
+      border-radius: 50%;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+    }
+
+    .item {
+      width: 686px;
+      margin: 0 auto 32px;
+      border-radius: 16px;
+      overflow: hidden;
+      background: #fff;
+
+      .item-bottom {
+        display: flex;
+        align-items: center;
+        height: 94px;
+
+        span {
+          flex: 1;
+          height: 100%;
+          line-height: 96px;
+          color: #3975C6;
+          font-size: 26px;
+          text-align: center;
+        }
+      }
+
+      .item-title {
+        padding: 32px;
+        background: #FFFFFF;
+        border-bottom: 1px solid #DDDDDD;
+
+        .top {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 8px;
+
+          .left {
+            display: flex;
+            align-items: center;
+
+            h2 {
+              margin-right: 32px;
+              color: #333333;
+              font-size: 40px;
+              font-weight: 500;
+            }
+
+            span {
+              color: #999999;
+              font-size: 28px;
+            }
+          }
+
+          & > span {
+            color: #3975C6;
+            font-size: 28px;
+          }
+        }
+      }
+
+      .item-info {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        background: #F9F9F9;
+
+        .item-info__item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 50%;
+          height: 72px;
+          padding: 0 20px;
+          border-bottom: 1px solid #DDDDDD;
+          border-right: 1px solid #DDDDDD;
+          box-sizing: border-box;
+
+          &:nth-of-type(2n) {
+            border-right: none;
+          }
+        }
+
+        label {
+          color: #999999;
+          font-size: 26px;
+        }
+
+        span {
+          color: #3975C6;
+          font-size: 26px;
+        }
+      }
+
+      .bottom {
+        display: flex;
+        align-items: center;
+
+        span {
+          color: #999999;
+          font-size: 28px;
+
+          &:first-child {
+            margin-right: 20px;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/Monitor/FamilySituation.vue b/src/pages/Monitor/FamilySituation.vue
new file mode 100644
index 00000000..042b12bd
--- /dev/null
+++ b/src/pages/Monitor/FamilySituation.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="add">
+    <div class="form-group">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否危房</span>
+          </div>
+          <div class="right">
+            <u-radio-group v-model="form.dilapidatedHouse">
+              <u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
+            </u-radio-group>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否饮水安全问题</span>
+          </div>
+          <div class="right">
+            <u-radio-group v-model="form.drinkingWaterSafety">
+              <u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
+            </u-radio-group>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>风险类型</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpRiskType" v-model="form.riskType"></AiSelect>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="form-group form-textarea">
+      <h2>备注</h2>
+      <textarea placeholder-style="color: #999; font-size: 30rpx;" placeholder="请输入"></textarea>
+    </div> -->
+    <div class="btn" hover-class="text" @click="submit">保存</div>
+    <AiBack></AiBack>
+  </div>
+</template>
+
+<script>
+  import AiBack from '@/components/AiBack'
+  import AiSelect from '@/components/AiSelect'
+
+  export default {
+    data () {
+      return {
+        form: {
+          dilapidatedHouse: '',
+          drinkingWaterSafety: '',
+          riskType: ''
+        },
+        id: ''
+      }
+    },
+
+    components: {
+      AiBack,
+      AiSelect
+    },
+
+    onLoad (query) {
+      this.$dict.load(['fpYesOrNo', 'fpRiskType'])
+      uni.showLoading()
+      this.id = query.id
+      this.getInfo(query.id)
+    },
+
+    methods: {
+      getInfo (id) {
+        this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = {
+              ...this.form,
+              ...res.data
+            }
+          }
+
+          uni.hideLoading()
+        })
+      },
+
+      submit () {
+        uni.showLoading()
+        this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
+          ...this.form,
+          id: this.id
+        }).then(res => {
+          if (res.code === 0) {
+            this.$u.toast(this.isEdit ? '保存成功' : '提交成功')
+            uni.$emit('reload')
+            uni.navigateBack({
+              delta: 1
+            })
+          }
+          uni.hideLoading()
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss">
+  .add {
+    padding-bottom: 120px;
+
+    .form-textarea {
+      padding: 32px;
+
+      h2 {
+        margin-bottom: 32px;
+        color: #333333;
+        font-size: 32px;
+        font-weight: 500;
+      }
+
+      textarea {
+        width: 100%;
+        height: 200px;
+      }
+    }
+
+    & > div {
+      margin-bottom: 16px;
+      background: #fff;
+    }
+
+    ::v-deep .u-radio {
+      &:last-child {
+        .u-radio__label {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .form-group {
+      .form-item {
+        padding-left: 32px;
+
+        .form-item__wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 112px;
+          border-bottom: 1px solid #E4E5E6;
+        }
+
+        .right {
+          height: 112px;
+          line-height: 112px;
+          padding-right: 32px;
+
+          span {
+            font-size: 30px;
+            color: #999999;
+          }
+        }
+
+        input {
+          height: 100%;
+          text-align: right;
+        }
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          span {
+            color: #333333;
+            font-size: 32px;
+          }
+
+          i {
+            margin-right: 4px;
+            font-style: normal;
+            color: #FF4466;
+            font-size: 32px;
+          }
+        }
+
+        &:last-child {
+          .form-item__wrapper {
+            border: none;
+          }
+        }
+      }
+    }
+
+    .form-item__imgs {
+      padding: 32px;
+
+      .form-item__title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 34px;
+
+        h2 {
+          color: #333333;
+          font-weight: normal;
+          font-size: 32px;
+        }
+
+        i {
+          color: #999999;
+          font-size: 28px;
+          font-style: normal;
+        }
+      }
+
+      textarea {
+        width: 100%;
+      }
+    }
+
+    .form-type {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 112px;
+      padding: 0 32px;
+
+      h2 {
+        font-weight: normal;
+        color: #333333;
+        font-size: 32px;
+      }
+
+      span {
+        color: #999999;
+        font-size: 28px;
+      }
+    }
+
+    .btn {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 11;
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      margin: 0;
+      text-align: center;
+      color: #FFFFFF;
+      font-size: 32px;
+      background: #3192F4;
+    }
+  }
+</style>
diff --git a/src/pages/Monitor/Income.vue b/src/pages/Monitor/Income.vue
new file mode 100644
index 00000000..f5df1bf8
--- /dev/null
+++ b/src/pages/Monitor/Income.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="add">
+    <div class="form-group">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <span>工资收入</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" v-model="form.income1" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <span>生产经营收入</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" v-model="form.income2" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <span>财产性收入</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" v-model="form.income3" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <span>转移性收入</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" v-model="form.income4" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <span>理赔收入</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" v-model="form.income8" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <span>生产经营支出</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" v-model="form.income5" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <span>合规自然支出</span>
+          </div>
+          <div class="right">
+            <input placeholder="请输入" v-model="form.income9" type="number" placeholder-style="color: #999; font-size: 30rpx;" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <p class="tips">*不填时默认为0元</p>
+    <div class="btn" hover-class="text" @click="submit">保存</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        form: {
+          income1: '',
+          income2: '',
+          income3: '',
+          income4: '',
+          income5: '',
+          income8: '',
+          income9: ''
+        },
+        id: ''
+      }
+    },
+
+    onLoad (query) {
+      uni.showLoading()
+      this.id = query.id
+      this.getInfo(query.id)
+    },
+
+    methods: {
+      getInfo (id) {
+        this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = {
+              ...this.form,
+              ...res.data
+            }
+          }
+
+          uni.hideLoading()
+        })
+      },
+
+      submit () {
+        uni.showLoading()
+        this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
+          ...this.form,
+          id: this.id
+        }).then(res => {
+          if (res.code === 0) {
+            this.$u.toast(this.isEdit ? '保存成功' : '提交成功')
+            uni.$emit('reload')
+            uni.navigateBack({
+              delta: 1
+            })
+          }
+          uni.hideLoading()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .add {
+    padding-bottom: 120px;
+
+    .tips {
+      margin: 32px 0 0 32px;
+      color: #999999;
+      font-size: 26px;
+    }
+
+    & > div {
+      margin-bottom: 16px;
+      background: #fff;
+    }
+
+    .form-group {
+      .form-item {
+        padding-left: 32px;
+
+        .form-item__wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 112px;
+          border-bottom: 1px solid #E4E5E6;
+        }
+
+        .right {
+          height: 112px;
+          line-height: 112px;
+          padding-right: 32px;
+
+          span {
+            font-size: 30px;
+            color: #999999;
+          }
+        }
+
+        input {
+          height: 100%;
+          text-align: right;
+        }
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          span {
+            color: #333333;
+            font-size: 32px;
+          }
+
+          i {
+            margin-right: 4px;
+            font-style: normal;
+            color: #FF4466;
+            font-size: 32px;
+          }
+        }
+
+        &:last-child {
+          .form-item__wrapper {
+            border: none;
+          }
+        }
+      }
+    }
+
+    .form-item__imgs {
+      padding: 32px;
+
+      .form-item__title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 34px;
+
+        h2 {
+          color: #333333;
+          font-weight: normal;
+          font-size: 32px;
+        }
+
+        i {
+          color: #999999;
+          font-size: 28px;
+          font-style: normal;
+        }
+      }
+
+      textarea {
+        width: 100%;
+      }
+    }
+
+    .form-type {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 112px;
+      padding: 0 32px;
+
+      h2 {
+        font-weight: normal;
+        color: #333333;
+        font-size: 32px;
+      }
+
+      span {
+        color: #999999;
+        font-size: 28px;
+      }
+    }
+
+    .btn {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 11;
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      margin: 0;
+      text-align: center;
+      color: #FFFFFF;
+      font-size: 32px;
+      background: #3192F4;
+    }
+  }
+</style>
diff --git a/src/pages/Monitor/Monitor.vue b/src/pages/Monitor/Monitor.vue
new file mode 100644
index 00000000..9b02c420
--- /dev/null
+++ b/src/pages/Monitor/Monitor.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="povertyMonitor">
+    <div class="form-content">
+      <List ref="list" v-if="currIndex === 0"></List>
+      <Statistics ref="statistics" v-if="currIndex === 1"></Statistics>
+    </div>
+    <div class="footer">
+      <div @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">监测对象列表</div>
+      <div @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">数据统计</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Statistics from './components/Statistics.vue'
+  import List from './components/List.vue'
+
+  export default {
+    data () {
+      return {
+        currIndex: 0
+      }
+    },
+
+    components: {
+      List,
+      Statistics
+    },
+
+    computed: {
+      tabBar () {
+        const link = icon => `${this.$cdn}askform/${icon}.png`
+        return [
+          {text: "监测对象列表", iconPath: "bdlb1", selectedIconPath: "bdlb2" },
+          {text: "数据统计", iconPath: "xjxm1", selectedIconPath: "xjxm2" }
+        ].map(e => ({
+          ...e,
+          iconPath: link(e.iconPath),
+          selectedIconPath: link(e.selectedIconPath)
+        }))
+      }
+    },
+
+    onLoad () {
+      uni.$on('reload', () => {
+        if (this.currIndex === 0) {
+          this.$refs.list.reload()
+        }
+      })
+    },
+
+    onReachBottom() {
+      if (this.currIndex === 0) {
+        this.$refs.list.getList()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .povertyMonitor {
+    .footer {
+      display: flex;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 11;
+      width: 100%;
+      height: 98px;
+
+      div {
+        flex: 1;
+        height: 98px;
+        line-height: 98px;
+        text-align: center;
+        color: #333333;
+        font-size: 32px;
+        background: #fff;
+
+        &.active {
+          color: #fff;
+          background: #3192F4;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/Monitor/PoorStatus.vue b/src/pages/Monitor/PoorStatus.vue
new file mode 100644
index 00000000..5f8c85bb
--- /dev/null
+++ b/src/pages/Monitor/PoorStatus.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="add">
+    <div class="form-group">
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>产业帮扶</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpIndustrialAssistance" v-model="form.industrialAssistance"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>健康帮扶</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpHealthAssistance" v-model="form.healthAssistance"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>就业帮扶</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpEmploymentAssistance" v-model="form.employmentAssistance"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>教育帮扶</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpEducationalAssistance" v-model="form.educationalAssistance"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>金融帮扶</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpFinancialAssistance" v-model="form.financialAssistance"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>社会帮扶</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpSocialAssistance" v-model="form.socialAssistance"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i style="opacity: 0;">*</i>
+            <span>公益岗位帮扶</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpPublicWelfarePostAssistance" v-model="form.publicWelfarePostAssistance"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>是否消除风险</span>
+          </div>
+          <div class="right">
+            <u-radio-group v-model="form.isRisk" @change="onRiskChange">
+              <u-radio :name="item.dictValue" v-for="(item, index) in $dict.getDict('fpYesOrNo')" :key="index">{{ item.dictName }}</u-radio>
+            </u-radio-group>
+          </div>
+        </div>
+      </div>
+      <div class="form-item" v-if="form.isRisk === '01'">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>风险消除方式</span>
+          </div>
+          <div class="right">
+            <AiSelect dict="fpRiskEliminationMethod" v-model="form.riskEliminationMethod"></AiSelect>
+          </div>
+        </div>
+      </div>
+      <div class="form-item" v-if="form.isRisk === '01'">
+        <div class="form-item__wrapper">
+          <div class="left">
+            <i>*</i>
+            <span>风险消除时间</span>
+          </div>
+          <div class="right">
+            <AiDate v-model="form.riskEliminationDate"></AiDate>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="btn" hover-class="text" @click="submit">保存</div>
+  </div>
+</template>
+
+<script>
+  import AiSelect from '@/components/AiSelect'
+  import AiDate from '@/components/AiDate'
+
+  export default {
+    data () {
+      return {
+        result: '',
+        form: {
+          isRisk: '02',
+          riskEliminationMethod: '',
+          riskEliminationDate: '',
+          industrialAssistance: '',
+          healthAssistance: '',
+          employmentAssistance: '',
+          educationalAssistance: '',
+          financialAssistance: '',
+          socialAssistance: '',
+          publicWelfarePostAssistance: ''
+        },
+        id: ''
+      }
+    },
+
+    components: {
+      AiDate,
+      AiSelect
+    },
+
+    onLoad (query) {
+      uni.showLoading()
+      this.$dict.load(['fpYesOrNo', 'fpRiskEliminationMethod', 'fpIndustrialAssistance', 'fpHealthAssistance', 'fpEmploymentAssistance', 
+      'fpEducationalAssistance', 'fpFinancialAssistance', 'fpSocialAssistance', 'fpPublicWelfarePostAssistance']).then(() => {
+        this.getInfo(query.id)
+      })
+      this.id = query.id
+    },
+
+    methods: {
+      getInfo (id) {
+        this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.form = {
+              ...this.form,
+              ...res.data
+            }
+
+            if (this.form.riskEliminationMethod) {
+              this.form.isRisk = '01'
+            }
+          }
+
+          uni.hideLoading()
+        })
+      },
+
+      onRiskChange (e) {
+        if (e === '02') {
+          this.form.riskEliminationMethod = ''
+          this.form.riskEliminationDate = ''
+        }
+      },
+
+      submit () {
+        if (!this.form.isRisk) {
+          return this.$u.toast('请选择是否消除风险')
+        }
+
+        if (this.form.isRisk === '01') {
+          if (!this.form.riskEliminationMethod) {
+            return this.$u.toast('请选择风险消除方式')
+          }
+
+          if (!this.form.riskEliminationDate) {
+            return this.$u.toast('请选择风险消除时间')
+          }
+        }
+
+        uni.showLoading()
+        this.$http.post('/app/apppreventionreturntopoverty/addOrUpdate', {
+          ...this.form,
+          riskEliminationMethod: this.form.isRisk ? this.form.riskEliminationMethod : '',
+          id: this.id,
+          status: this.form.isRisk === '01' ? 1 : ''
+        }).then(res => {
+          if (res.code === 0) {
+            this.$u.toast(this.isEdit ? '保存成功' : '提交成功')
+            uni.$emit('reload')
+            uni.navigateBack({
+              delta: 1
+            })
+          }
+          uni.hideLoading()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .add {
+    padding-bottom: 120px;
+
+    & > div {
+      margin-bottom: 16px;
+      background: #fff;
+    }
+
+    ::v-deep .u-radio {
+      &:last-child {
+        .u-radio__label {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .form-group {
+      .form-item {
+        padding-left: 32px;
+
+        .form-item__wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 112px;
+          border-bottom: 1px solid #E4E5E6;
+        }
+
+        .right {
+          height: 112px;
+          line-height: 112px;
+          padding-right: 32px;
+
+          span {
+            font-size: 30px;
+            color: #999999;
+          }
+        }
+
+        input {
+          height: 100%;
+          text-align: right;
+        }
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          span {
+            color: #333333;
+            font-size: 32px;
+          }
+
+          i {
+            margin-right: 4px;
+            font-style: normal;
+            color: #FF4466;
+            font-size: 32px;
+          }
+        }
+
+        &:last-child {
+          .form-item__wrapper {
+            border: none;
+          }
+        }
+      }
+    }
+
+    .form-item__imgs {
+      padding: 32px;
+
+      .form-item__title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 34px;
+
+        h2 {
+          color: #333333;
+          font-weight: normal;
+          font-size: 32px;
+        }
+
+        i {
+          color: #999999;
+          font-size: 28px;
+          font-style: normal;
+        }
+      }
+
+      textarea {
+        width: 100%;
+      }
+    }
+
+    .form-type {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 112px;
+      padding: 0 32px;
+
+      h2 {
+        font-weight: normal;
+        color: #333333;
+        font-size: 32px;
+      }
+
+      span {
+        color: #999999;
+        font-size: 28px;
+      }
+    }
+
+    .btn {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 11;
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      margin: 0;
+      text-align: center;
+      color: #FFFFFF;
+      font-size: 32px;
+      background: #3192F4;
+    }
+  }
+</style>
diff --git a/src/pages/Monitor/components/List.vue b/src/pages/Monitor/components/List.vue
new file mode 100644
index 00000000..dc2f2b6f
--- /dev/null
+++ b/src/pages/Monitor/components/List.vue
@@ -0,0 +1,295 @@
+<template>
+  <div class="list">
+    <div class="area">
+      <i>可选范围</i>
+      <span class="separat">/</span>
+      <!-- <AiArea class="aiArea" v-model="addressAreaId" mode="custom" fullname :areaRange="$areaId" :name.sync="addressArea" @change="reload">
+        <div class="label" v-if="addressArea">{{ addressArea }}</div>
+        <i v-else>请选择</i>
+      </AiArea> -->
+      <AiAreaPicker ref="area" class="aiArea" :name.sync="addressArea" :areaId="areaId" mode="custom" @select="onChange">
+        <span class="label" v-if="addressArea">{{ addressArea }}</span>
+        <i v-else>请选择</i>
+      </AiAreaPicker>
+    </div>
+    <div class="list-wrapper">
+      <div class="tab">
+        <span @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">已登记监测对象</span>
+        <span @click="changeTab(1)" :class="[currIndex === 1 ? 'active' : '']">已消除风险对象</span>
+      </div>
+      <div class="search">
+        <u-search
+          placeholder="请输入"
+          :show-action="false"
+          search-icon-color="#ccc"
+          v-model="name"
+          @search="reload">
+        </u-search>
+      </div>
+      <div class="list-item__wrapper">
+        <div class="list-item" v-for="(item, index) in list" :key="index" @click="toDetail(item.id)">
+          <image src="/static/images/avatar.png" />
+          <div class="right">
+            <h2>{{ item.name || item.phone }}</h2>
+            <p>{{ item.addressArea }}</p>
+          </div>
+        </div>
+      </div>
+      <ai-empty v-if="!list.length && isMore" style="padding-bottom: 20px;"></ai-empty>
+    </div>
+    <ai-fixed-btn>
+      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAdd"></div>
+    </ai-fixed-btn>
+  </div>
+</template>
+
+<script>
+  import AiArea from '@/components/AiArea'
+  import AiFixedBtn from '@/components/AiFixedBtn'
+  import AiEmpty from '@/components/AiEmpty/AiEmpty'
+  import AiAreaPicker from '@/components/AiAreaPicker'
+
+  export default {
+    name: 'list',
+
+    data () {
+      return {
+        currIndex: 0,
+        name: '',
+        list: [],
+        areaId: '',
+        addressAreaId: '',
+        addressArea: '',
+        isMore: false,
+        current: 1
+      }
+    },
+
+    components: {
+      AiArea,
+      AiEmpty,
+      AiAreaPicker,
+      AiFixedBtn
+    },
+
+    created () {
+      uni.showLoading()
+      this.areaId = this.$store.state.user.areaId
+      this.addressAreaId = this.$store.state.user.areaId
+      this.addressArea = this.$store.state.user.areaName
+
+      this.$nextTick(() => {
+        this.getList()
+      })
+      uni.$on('reload', () => {
+        if (this.currIndex === 0) {
+        } else {
+        }
+      })
+    },
+
+    methods: {
+      toDetail (id) {
+        uni.navigateTo({
+          url: '/pages/Monitor/Detail?id=' + id
+        })
+      },
+
+      onChange (e) {
+        this.addressAreaId = e.id
+
+        this.$nextTick(() => {
+          this.reload()
+        })
+      },
+
+      toAdd () {
+        uni.navigateTo({
+          url: '/pages/Monitor/Add'
+        })
+      },
+
+      reload() {
+        this.isMore = false
+        this.current = 1
+        uni.showLoading()
+
+        this.$nextTick(() => {
+          this.getList()
+        })
+      },
+
+      changeTab (index) {
+        this.currIndex = index
+        this.reload()
+      },
+
+      getList() {
+        if (this.isMore) return
+
+        this.$http.post(`/app/apppreventionreturntopoverty/list`, null, {
+          params: {
+            current: this.current,
+            size: 15,
+            status: this.currIndex === 1 ? '1' : '',
+            addressAreaId: this.addressAreaId,
+            name: this.name
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (this.current > 1) {
+              this.list = [...this.list, ...res.data.records]
+            } else {
+              this.list = res.data.records
+            }
+
+            uni.hideLoading()
+
+            if (res.data.records.length < 10) {
+              this.isMore = true
+
+              return false
+            }
+
+            this.current = this.current + 1
+          } else {
+            uni.hideLoading()
+          }
+        }).catch(() => {
+          uni.hideLoading()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .list {
+    padding: 112px 0 120px;
+
+    .addBtn {
+      width: 96px;
+      height: 96px;
+      flex-shrink: 0;
+      background: $uni-color-primary;
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+      font-size: 48px;
+      color: #fff;
+      border-radius: 50%;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+    }
+
+    .list-wrapper {
+      margin-top: 16px;
+      background: #fff;
+
+      .list-item {
+        display: flex;
+        align-items: center;
+        padding: 20px 32px;
+
+        image {
+          width: 80px;
+          height: 80px;
+          margin-right: 32px;
+        }
+
+        .right {
+          flex: 1;
+        }
+
+        p {
+          color: #999999;
+          font-size: 26px;
+        }
+
+        h2 {
+          margin-bottom: 10px;
+          color: #333333;
+          font-size: 32px;
+        }
+      }
+
+      .search {
+        margin: 20px 0;
+        padding: 0 32px;
+      }
+
+      .tab {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 96px;
+        padding: 0 60px;
+        background: #FFFFFF;
+        border-bottom: 1px solid #D4D4D4;
+        box-sizing: border-box;
+
+        * {
+          box-sizing: border-box;
+        }
+
+        span {
+          position: relative;
+          flex: 1;
+          height: 96rpx;
+          line-height: 96rpx;
+          color: #000000;
+          text-align: center;
+          font-size: 32px;
+
+          &::after {
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            width: 192px;
+            height: 6px;
+            background: transparent;
+            transform: translateX(-50%);
+            content: ' ';
+          }
+
+          &.active {
+            color: #1365DD;
+
+            &::after {
+              background: #1365DD;
+            }
+          }
+        }
+      }
+    }
+
+    .area {
+      display: flex;
+      position: fixed;
+      align-items: center;
+      top: 0;
+      left: 0;
+      z-index: 11;
+      width: 100%;
+      padding: 0 32px;
+      height: 112px;
+      color: #333333;
+      font-size: 30px;
+      background: #fff;
+
+      .separat {
+        padding: 0 8px;
+      }
+
+      i {
+        color: #3F8DF5;
+        font-size: 30px;
+        font-style: normal;
+      }
+
+      span {
+        color: #333333;
+        font-size: 30px;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/Monitor/components/Statistics.vue b/src/pages/Monitor/components/Statistics.vue
new file mode 100644
index 00000000..b16e8f3e
--- /dev/null
+++ b/src/pages/Monitor/components/Statistics.vue
@@ -0,0 +1,439 @@
+<template>
+  <div class="statistics">
+    <div class="area">
+      <i>可选范围</i>
+      <span class="separat">/</span>
+      <AiAreaPicker ref="area" class="aiArea" :areaId="areaId" :name.sync="addressArea" mode="custom" @select="onChange">
+        <span class="label" v-if="addressArea">{{ addressArea }}</span>
+        <i v-else>请选择</i>
+      </AiAreaPicker>
+    </div>
+    <div class="charts-wrapper">
+      <div class="total">
+        <div class="total-item">
+          <h2>{{ info.jths }}</h2>
+          <p>检测家庭户数</p>
+        </div>
+        <div class="total-item">
+          <h2>{{ info.zrs }}</h2>
+          <p>监测对象总人数</p>
+        </div>
+      </div>
+      <div class="charts">
+        <h2>近半年风险人数变化趋势</h2>
+        <div id="chart1" style="height: 400rpx"></div>
+      </div>
+      <div class="total middle-total">
+        <div class="total-item">
+          <h2>{{ info['饮水安全'] || 0 }}</h2>
+          <p>住房安全</p>
+        </div>
+        <div class="total-item">
+          <h2>{{ info['饮水安全'] || 0 }}</h2>
+          <p>饮水安全</p>
+        </div>
+        <div class="total-item">
+          <h2>{{ info['失学辍学'] || 0 }}</h2>
+          <p>失学辍学</p>
+        </div>
+        <div class="total-item">
+          <h2>{{ info['医疗保险'] || 0 }}</h2>
+          <p>医疗保险</p>
+        </div>
+      </div>
+      <div class="charts">
+        <h2>风险类型排行TOP10</h2>
+        <div id="chart3" style="height: 400rpx"></div>
+      </div>
+      <div class="charts">
+        <h2>风险消除方式</h2>
+        <div id="chart4" style="height: 400rpx"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+  import AiArea from '@/components/AiArea'
+  import AiAreaPicker from '@/components/AiAreaPicker'
+
+  export default {
+    name: 'statistics',
+
+    data () {
+      return {
+        addressAreaId: '',
+        addressArea: '',
+        chart1: null,
+        chart2: null,
+        chart3: null,
+        chart4: null,
+        areaId: '',
+        info: {},
+        pageShow: false
+      }
+    },
+
+    components: {
+      AiArea,
+      AiAreaPicker
+    },
+
+    created () {
+      this.areaId = this.$store.state.user.areaId
+      this.addressAreaId = this.$store.state.user.areaId
+      this.addressArea = this.$store.state.user.areaName
+    },
+
+    mounted () {
+      window.scrollTo(0,0)
+      this.chart1 = echarts.init(document.getElementById('chart1'))
+      this.chart4 = echarts.init(document.getElementById('chart4'))
+      this.chart3 = echarts.init(document.getElementById('chart3'))
+
+      this.$dict.load(['fpRiskType', 'fpRiskEliminationMethod']).then(() => {
+        this.getInfo()
+      })
+    },
+
+    methods: {
+      reload () {
+        this.$nextTick(() => {
+          this.getInfo()
+        })
+      },
+
+      onChange (e) {
+        this.addressAreaId = e.id
+
+        this.$nextTick(() => {
+          this.reload()
+        })
+      },
+
+      initChart1 (data) {
+        const x = data.map(v => v.m)
+        const v = data.map(v => v.c)
+        const option =  {
+          color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
+          xAxis: {
+            type: 'category',
+            data: x,
+            splitLine: {
+              show: true,
+              lineStyle:{
+                width: 1,
+                type: 'solid',
+                color: '#f5f5f5'
+              }
+            },
+            axisLabel: {
+              align: 'center',
+              padding: [2, 0, 0, 0],
+              interval: 0,
+              fontSize: 14,
+              color: '#999'
+            },
+            axisTick: {
+              length: 1,
+              show: true
+            },
+            boundaryGap: true,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#aaa'
+              }
+            }
+          },
+          grid: {
+            top: '4%',
+            left: '4%',
+            right: '6%',
+            bottom: '0%',
+            containLabel: true
+          },
+          yAxis: {
+            type: 'value',
+            boundaryGap: true,
+            axisTick: {
+              length: 1,
+              show: true
+            },
+            splitLine: {
+              show: true,
+              lineStyle:{
+                width: 1,
+                type: 'solid',
+                color: '#f5f5f5'
+              }
+            },
+            nameTextStyle: {
+              color: '#f5f5f5',
+              align: 'left'
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                width: 1,
+                type: 'solid',
+                color: '#aaa'
+              }
+            },
+            axisLabel: {
+              color: '#999'
+            }
+          },
+          series: [
+            {
+              data: v,
+              type: 'line'
+            }
+          ]
+        }
+
+        this.chart1.setOption(option)
+      },
+
+      initChart3 (data) {
+        const y = data.map(v => this.$dict.getLabel('fpRiskType', v.risk_type) || '其他')
+        const v = data.map(v => v.c)
+        const option = {
+          tooltip: {
+          },
+          color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
+          grid: {
+            top: '4%',
+            left: '4%',
+            right: '6%',
+            bottom: '0%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'value',
+            splitLine: {
+              show: true,
+              lineStyle:{
+                width: 1,
+                type: 'solid',
+                color: '#f5f5f5'
+              }
+            },
+            axisTick: {
+              length: 1,
+              show: true
+            },
+            axisLabel: {
+              align: 'center',
+              padding: [2, 0, 0, 0],
+              interval: 0,
+              fontSize: 14,
+              color: '#999'
+            },
+            boundaryGap: true,
+            axisLine: {
+              show: true,
+              lineStyle:{
+                width: 1,
+                type: 'solid',
+                color: '#aaa'
+              }
+            },
+          },
+          yAxis: {
+            type: 'category',
+            data: y,
+            boundaryGap: true,
+            axisTick: {
+              length: 0,
+              show: false
+            },
+            splitLine: {
+              show: true,
+              lineStyle:{
+                color: ['#e9e9e9'],
+                width: 1,
+                type: 'solid'
+              }
+            },
+            nameTextStyle: {
+              color: '#999',
+              align: 'left'
+            },
+            axisLine: {
+              show: true,
+              lineStyle:{
+                width: 1,
+                type: 'solid',
+                color: '#aaa'
+              }
+            },
+            axisLabel: {
+              color: '#999'
+            }
+          },
+          series: [
+            {
+              name: '2011',
+              type: 'bar',
+              data: v
+            }
+          ]
+        }
+
+        this.chart3.setOption(option)
+      },
+
+      initChart4 (data) {
+        const values = data.map(v => {
+          return {
+            value: v.c,
+            name: this.$dict.getLabel('fpRiskEliminationMethod', v.risk_elimination_method) || '其他'
+          }
+        })
+        const option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '40px',
+            containLabel: true
+          },
+          color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
+          series: [
+            {
+              name: '本月纳入监测人群属性分析',
+              type: 'pie',
+              radius: ['40%', '70%'],
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  fontWeight: 'bold'
+                }
+              },
+              data: values
+            }
+          ]
+        }
+
+        this.chart4.setOption(option)
+      },
+
+      getInfo () {
+        this.$http.post(`/app/apppreventionreturntopoverty/statistics-prtp?areaId=${this.addressAreaId}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+            this.initChart1(res.data['近半年趋势'])
+            this.initChart3(res.data['风险类型排行'])
+            this.initChart4(res.data['风险消除方式'])
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .statistics {
+    padding: 112px 0 120px;
+
+    .area {
+      display: flex;
+      position: fixed;
+      align-items: center;
+      top: 0;
+      left: 0;
+      z-index: 11;
+      width: 100%;
+      padding: 0 32px;
+      height: 112px;
+      color: #333333;
+      font-size: 30px;
+      background: #fff;
+
+      .separat {
+        padding: 0 8px;
+      }
+
+      i {
+        color: #3F8DF5;
+        font-size: 30px;
+        font-style: normal;
+      }
+
+      span {
+        color: #333333;
+        font-size: 30px;
+      }
+    }
+
+    .charts-wrapper {
+      position: relative;
+      z-index: 1;
+      padding: 0 32px;
+
+      .total {
+        display: flex;
+        align-items: center;
+        height: 200px;
+        margin-top: 32px;
+        background: #FFFFFF;
+        border-radius: 8px;
+
+        .total-item {
+          flex: 1;
+          text-align: center;
+
+          h2 {
+            font-size: 64px;
+            color: #3192F4;
+          }
+
+          p {
+            margin-top: 10px;
+            color: #999999;
+            font-size: 28px;
+          }
+        }
+      }
+
+      .middle-total {
+        height: 160px;
+
+        h2 {
+          font-size: 48px!important;
+        }
+
+        p {
+          margin-top: 8px!important;
+        }
+      }
+
+      .charts {
+        margin-top: 32px;
+        background: #FFFFFF;
+        border-radius: 8px;
+
+        & > h2 {
+          height: 96px;
+          line-height: 96px;
+          padding: 0 32px;
+          color: #333333;
+          font-size: 32px;
+          border-bottom: 1px solid #DDDDDD;
+        }
+
+        & > div {
+          width: 686px;
+          margin: 0 auto;
+          padding: 32px 0;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/PovertyAlleviation/News.vue b/src/pages/PovertyAlleviation/News.vue
new file mode 100644
index 00000000..ffbaec59
--- /dev/null
+++ b/src/pages/PovertyAlleviation/News.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="news">
+    <div class="tab">
+      <span
+        @click="changeTab(index, item.dictValue)"
+        v-for="(item, index) in tabList"
+        :key="index"
+        :class="[currIndex === index ? 'active' : '']">
+        {{ item.dictName }}
+      </span>
+    </div>
+    <div class="list">
+      <div class="item" v-for="(item, index) in list" :key="index" @click="linkTo('/pages/PovertyAlleviation/NewsDetail?id=' + item.id)">
+        <div class="left">
+          <h2>{{ item.title }}</h2>
+          <div class="item-bottom">
+            <span>{{ $dict.getLabel('newsCenterPolicyType', item.policyType) }}</span>
+            <span>{{ item.createTime }}</span>
+          </div>
+        </div>
+        <image v-if="item.coverFile" :src="item.coverFile ? item.coverFile.url : ''" />
+      </div>
+      <ai-empty v-if="!list.length && isMore" style="padding-bottom: 20px;"></ai-empty>
+    </div>
+  </div>
+</template>
+
+<script>
+  import AiEmpty from '@/components/AiEmpty/AiEmpty'
+  export default {
+    data () {
+      return {
+        currIndex: 0,
+        list: [],
+        current: 1,
+        size: 15,
+        type: '',
+        tabList: [],
+        isMore: false
+      }
+    },
+
+    components: {
+      AiEmpty
+    },
+
+    onLoad() {
+      uni.showLoading()
+      this.$dict.load(['newsCenterPolicyType']).then(() => {
+        this.tabList = this.$dict.getDict('newsCenterPolicyType')
+        this.type = this.$dict.getDict('newsCenterPolicyType')[0].dictValue
+        this.getList()
+      })
+    },
+
+    methods: {
+      changeTab (index, type) {
+        this.type = type
+        this.currIndex = index
+
+        this.current = 1
+        this.isMore = false
+
+        uni.showLoading()
+        this.$nextTick(() => {
+          this.getList()
+        })
+      },
+
+      linkTo (url) {
+        uni.navigateTo({
+          url
+        })
+      },
+
+      getList() {
+        if (this.isMore) return
+
+        this.$http.post(`/app/appnewscenterinfo/listForWx`, null, {
+          params: {
+            current: this.current,
+            size: this.size,
+            status: 1,
+            policyType: this.type
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (this.current > 1) {
+              this.list = [...this.list, ...res.data.records]
+            } else {
+              this.list = res.data.records
+            }
+
+            uni.hideLoading()
+
+            if (res.data.records.length < 10) {
+              this.isMore = true
+
+              return false
+            }
+
+            this.current = this.current + 1
+          } else {
+            uni.hideLoading()
+          }
+        }).catch(() => {
+          uni.hideLoading()
+        })
+      }
+    },
+
+    onReachBottom() {
+      this.getList()
+    }
+  }
+</script>
+
+<style lang="scss">
+  .news {
+    padding: 96px 0 40px;
+
+    .list {
+      padding: 0 30px;
+      background: #fff;
+
+      .item {
+        display: flex;
+        align-items: center;
+        padding: 32px 0;
+        border-bottom: 1px solid #DDDDDD;
+
+        &:active {
+          background: #ddd;
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .left {
+          flex: 1;
+          margin-right: 20px;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+        }
+
+        & > image {
+          width: 200px;
+          height: 140px;
+        }
+
+        h2 {
+          margin-bottom: 32px;
+          color: #333333;
+          font-size: 30px;
+          font-weight: 600;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+        }
+
+        .item-bottom {
+          display: flex;
+          align-items: center;
+
+          span {
+            color: #999999;
+            font-size: 24px;
+
+            &:first-child {
+              margin-right: 32px;
+            }
+          }
+        }
+      }
+    }
+
+    .tab {
+      display: flex;
+      position: fixed;
+      align-items: center;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 96px;
+      background: #FFFFFF;
+      border-bottom: 1px solid #D4D4D4;
+      box-sizing: border-box;
+
+      * {
+        box-sizing: border-box;
+      }
+
+      span {
+        position: relative;
+        flex: 1;
+        height: 96rpx;
+        line-height: 96rpx;
+        color: #999999;
+        text-align: center;
+        font-size: 28px;
+
+        &::after {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          width: 88px;
+          height: 6px;
+          background: transparent;
+          transform: translateX(-50%);
+          content: ' ';
+        }
+
+        &.active {
+          color: #1365DD;
+
+          &::after {
+            background: #1365DD;
+          }
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/PovertyAlleviation/NewsDetail.vue b/src/pages/PovertyAlleviation/NewsDetail.vue
new file mode 100644
index 00000000..a46638f5
--- /dev/null
+++ b/src/pages/PovertyAlleviation/NewsDetail.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="detail" v-if="pageShow">
+    <h2>{{ info.title }}</h2>
+    <span>发布时间：{{ info.createTime }}</span>
+    <div class="content">
+      <u-parse :html="info.content" v-if="info.type === '0'"></u-parse>
+      <video class="video" v-else :src="info.videoFile.url"></video>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        pageShow: false,
+        info: {},
+        content: `
+					<p>露从今夜白，月是故乡明</p>
+					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
+				`
+      }
+    },
+
+    onLoad (query) {
+      uni.showLoading()
+      this.getInfo(query.id)
+    },
+
+    methods: {
+      getInfo (id) {
+        this.$http.post(`/app/appnewscenterinfo/queryDetailById?id=${id}`).then(res => {
+          if (res.code == 0) {
+            this.info = res.data
+
+            this.$nextTick(() => {
+              this.pageShow = true
+            })
+          }
+          uni.hideLoading()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .detail {
+    min-height: 100vh;
+    padding: 40px 32px 40px;
+    box-sizing: border-box;
+    background: #fff;
+
+    & > h2 {
+      margin-bottom: 16px;
+      line-height: 1.3;
+      font-size: 40px;
+      color: #333;
+      font-weight: 600;
+    }
+
+    & > span {
+      font-size: 28px;
+      color: #999;
+    }
+
+    .content {
+      width: 100%;
+      margin-top: 40px;
+
+      ::v-deep * {
+        box-sizing: border-box;
+      }
+
+      ::v-deep p {
+        margin: 20px 0;
+        line-height: 1.4;
+        color: #666;
+        font-size: 28px;
+        text-align: justify;
+      }
+
+      ::v-deep img {
+        width: 100%;
+      }
+
+      ::v-deep br {
+        display: block;
+        margin: 20px 0;
+      }
+
+      .video {
+        width: 100%;
+        height: 600px;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/PovertyAlleviation/PovertyAlleviation.vue b/src/pages/PovertyAlleviation/PovertyAlleviation.vue
new file mode 100644
index 00000000..3c42b646
--- /dev/null
+++ b/src/pages/PovertyAlleviation/PovertyAlleviation.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="info">
+    <div class="info-top">
+      <div class="info-top__item" @click="linkTo('/pages/Monitor/Monitor')">
+        <image src="/static/images/wdbf.png" />
+        <h2>监测对象</h2>
+      </div>
+      <div class="info-top__item" @click="linkTo('/pages/povertyMonitor/povertyMonitor')">
+        <image src="/static/images/yjjk.png" />
+        <h2>预警监控</h2>
+      </div>
+      <div class="info-top__item" @click="linkTo('/pages/PovertyAlleviation/News')">
+        <image src="/static/images/news.png" />
+        <h2>政策动态</h2>
+      </div>
+    </div>
+    <div class="news">
+      <h2>最新动态</h2>
+      <div class="news-list">
+        <div class="news-item" v-for="(item, index) in list" :key="index" @click="linkTo(`/pages/PovertyAlleviation/NewsDetail?id=${item.id}`)">
+          <div class="left">
+            <h2>{{ item.title }}</h2>
+            <div class="item-bottom">
+              <span>{{ $dict.getLabel('newsCenterPolicyType', item.policyType) }}</span>
+              <span>{{ item.createTime }}</span>
+            </div>
+          </div>
+          <image v-if="item.coverFile" :src="item.coverFile ? item.coverFile.url : ''" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        list: []
+      }
+    },
+
+    onLoad () {
+      this.$dict.load(['newsCenterPolicyType']).then(() => {
+        this.getList()
+      })
+    },
+
+    methods: {
+      linkTo (url) {
+        uni.navigateTo({
+          url
+        })
+      },
+
+      getList () {
+        this.$http.post(`/app/appnewscenterinfo/listForWx`, null, {
+          params: {
+            current: 1,
+            size: 10,
+            status: 1
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            this.list = res.data.records
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .info {
+    padding: 32px 30px;
+    
+    .info-top {
+      display: flex;
+      align-items: center;
+      margin-bottom: 32px;
+      background: #FFFFFF;
+      border-radius: 16px;
+
+      div {
+        flex: 1;
+        padding: 32px 0;
+        text-align: center;
+
+        image {
+          width: 80px;
+          height: 80px;
+        }
+
+        h2 {
+          margin-top: 4px;
+          color: #3D434A;
+          font-size: 28px;
+          font-weight: normal;
+        }
+      }
+    }
+
+    .news {
+      & > h2 {
+        margin-bottom: 32px;
+        color: #333333;
+        font-weight: 600;
+        font-size: 32px;
+      }
+
+      .news-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        padding: 32px 24px;
+        background: #fff;
+        border-radius: 14px;
+
+        &:active {
+          background: #eee;
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .left {
+          flex: 1;
+          margin-right: 20px;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+        }
+
+        & > image {
+          width: 200px;
+          height: 140px;
+        }
+
+        h2 {
+          width: 100%;
+          margin-bottom: 32px;
+          color: #333333;
+          font-size: 30px;
+          font-weight: 600;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+        }
+
+        .item-bottom {
+          display: flex;
+          align-items: center;
+
+          span {
+            color: #999999;
+            font-size: 24px;
+
+            &:first-child {
+              margin-right: 32px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/povertyMonitor/Detail.vue b/src/pages/povertyMonitor/Detail.vue
new file mode 100644
index 00000000..fc44b4c4
--- /dev/null
+++ b/src/pages/povertyMonitor/Detail.vue
@@ -0,0 +1,250 @@
+<template>
+  <div class="detail" v-if="pageShow">
+    <div class="info">
+      <div class="info-top">
+        <div class="left">
+          <image src="/static/images/avatar.png" />
+          <h2>{{ info.name || info.phone }}</h2>
+        </div>
+        <div class="right">
+          <image src="/static/images/phone.png" />
+          <p>拨打电话</p>
+        </div>
+      </div>
+      <div class="info-item__wrapper">
+        <div class="info-item">
+          <label>风险类型：</label>
+          <span>大额医疗支出</span>
+        </div>
+        <div class="info-item">
+          <label>联系电话：</label>
+          <span>13782909781</span>
+        </div>
+        <div class="info-item">
+          <label>所在地址：</label>
+          <span>{{ info.addressArea }} {{ info.address }}</span>
+        </div>
+        <div class="info-item">
+          <label>情况描述：</label>
+          <span>全身大面积烧伤，预计手术费30万元</span>
+        </div>
+      </div>
+    </div>
+    <div class="result" v-if="false">
+      <div class="result-top">
+        <h2>处理结果</h2>
+        <span>已解除风险</span>
+      </div>
+      <div class="info-item__wrapper">
+        <div class="info-item">
+          <label>受理人：</label>
+          <span>张三</span>
+        </div>
+        <div class="info-item">
+          <label>处理时间：</label>
+          <span>2021-10-10 10:10:10</span>
+        </div>
+        <div class="info-item">
+          <label>联系方式：</label>
+          <span>17964042574</span>
+        </div>
+        <div class="info-item">
+          <label>处理结果：</label>
+          <span>经现场了解，该人员家庭有多出房产，无返贫风险倾向。</span>
+        </div>
+        <div class="info-item">
+          <label>图片：</label>
+          <div class="imgs">
+            <image v-for="(item, index) in 6" :key="index" src="/static/images/avatar.png" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <span>纳入监测对象</span>
+      <span @click="linkTo">解除预警</span>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'detail',
+
+    data () {
+      return {
+        info: {},
+        id: '',
+        pageShow: false
+      }
+    },
+
+    onLoad (query) {
+      uni.showLoading()
+      this.id = query.id
+
+      this.getInfo(query.id)
+    },
+
+    methods: {
+      linkTo () {
+        uni.navigateTo({
+          url: '/pages/povertyMonitor/Form'
+        })
+      },
+
+      getInfo (id) {
+        this.$http.post(`/app/apppreventionreturntopoverty/queryDetailById?id=${id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+
+            this.pageShow = true
+          }
+
+          uni.hideLoading()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .detail {
+    padding-bottom: 122rpx;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .footer {
+      display: flex;
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 1;
+      width: 100%;
+      height: 112px;
+
+      span {
+        flex: 1;
+        height: 112px;
+        line-height: 112px;
+        text-align: center;
+        color: #FF4466;
+        font-size: 32px;
+        background: #fff;
+
+        &:last-child {
+          color: #fff;
+          background: #3192F4;
+        }
+      }
+    }
+
+    .info {
+      background: #fff;
+
+      .info-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 136px;
+        padding: 0 32px;
+        background: #FFFFFF;
+        border-bottom: 1px solid #D8DDE6;
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          image {
+            width: 80px;
+            height: 80px;
+            margin-right: 16px;
+          }
+
+          h2 {
+            color: #333333;
+            font-size: 36px;
+            font-weight: 600;
+          }
+        }
+
+        .right {
+          text-align: center;
+          image {
+            width: 64px;
+            height: 64px;
+          }
+
+          p {
+            color: #3D94FB;
+            font-size: 24px;
+          }
+        }
+      }
+    }
+
+    .result {
+      margin-top: 20px;
+      background: #fff;
+
+      .result-top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 96px;
+        padding: 0 32px;
+        border-bottom: 1px solid #DDDDDD;
+
+        h2 {
+          font-size: 32px;
+          color: #333;
+          font-weight: 600;
+        }
+
+        span {
+          color: #2EA222;
+          font-size: 30px;
+        }
+      }
+    }
+    
+    .info-item__wrapper {
+      padding: 32px;
+
+      .info-item {
+        display: flex;
+        margin-bottom: 12px;
+
+        label {
+          flex-shrink: 0;
+          width: 150px;
+          line-height: 1.3;
+          text-align: right;
+          color: #999999;
+          font-size: 30rpx;
+        }
+
+        span {
+          flex: 1;
+          line-height: 1.3;
+          text-align: justify;
+          color: #343D65;
+        }
+
+        .imgs {
+          flex: 1;
+
+          image {
+            width: 160px;
+            height: 160px;
+            margin-right: 16px;
+            margin-bottom: 16px;
+            border-radius: 4px;
+          }
+        }
+      } 
+    }
+  }
+</style>
diff --git a/src/pages/povertyMonitor/Form.vue b/src/pages/povertyMonitor/Form.vue
new file mode 100644
index 00000000..841f000c
--- /dev/null
+++ b/src/pages/povertyMonitor/Form.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="form">
+    <div class="form-type">
+      <h2>处理方式</h2>
+      <span>解除风险</span>
+    </div>
+    <div class="form-item form-item__textarea">
+      <div class="form-item__title">
+        <h2>帮扶结果</h2>
+      </div>
+      <textarea :maxlength="-1" v-model="result" placeholder="请详细说明跟进情况"></textarea>
+    </div>
+    <div class="form-item form-item__imgs">
+      <div class="form-item__title">
+        <h2>图片</h2>
+        <i>（最多9张）</i>
+      </div>
+      <div>
+        <AiUploader :limit="9" multiple></AiUploader>
+      </div>
+    </div>
+    <div class="btn">提交</div>
+  </div>
+</template>
+
+<script>
+  import AiUploader from '@/components/AiUploader'
+
+  export default {
+    data () {
+      return {
+        result: '',
+
+      }
+    },
+
+    components: {
+      AiUploader
+    }
+  }
+</script>
+
+<style lang="scss">
+  .form {
+    padding-bottom: 120px;
+
+    div {
+      margin-bottom: 16px;
+      background: #fff;
+    }
+
+    .form-item {
+      padding: 32px;
+
+      .form-item__title {
+        display: flex;
+        align-items: center;
+        margin-bottom: 34px;
+
+        h2 {
+          color: #333333;
+          font-weight: normal;
+          font-size: 32px;
+        }
+
+        i {
+          color: #999999;
+          font-size: 28px;
+          font-style: normal;
+        }
+      }
+
+      textarea {
+        width: 100%;
+      }
+    }
+
+    .form-type {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 112px;
+      padding: 0 32px;
+
+      h2 {
+        font-weight: normal;
+        color: #333333;
+        font-size: 32px;
+      }
+
+      span {
+        color: #999999;
+        font-size: 28px;
+      }
+    }
+
+    .btn {
+      position: fixed;
+      left: 0;
+      bottom: 0;
+      z-index: 11;
+      width: 100%;
+      height: 112px;
+      line-height: 112px;
+      margin: 0;
+      text-align: center;
+      color: #FFFFFF;
+      font-size: 32px;
+      background: #3192F4;
+    }
+  }
+</style>
diff --git a/src/pages/povertyMonitor/components/List.vue b/src/pages/povertyMonitor/components/List.vue
new file mode 100644
index 00000000..85967ec8
--- /dev/null
+++ b/src/pages/povertyMonitor/components/List.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="list">
+    <!-- <div class="tab">
+      <span @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">高返贫风险人员</span>
+      <span @click="changeTab(1)" :class="[currIndex === 1 ? 'active' : '']">监测对象风险解除</span>
+    </div> -->
+    <div class="list-wrapper">
+      <div class="item" v-for="(item, index) in list" :key="index" hover-class="bg-hover" @click="toDetail(item.id)">
+        <div class="item-top">
+          <h2>{{ item.name || item.phone }}</h2>
+          <span :style="{color: item.riskEliminationMethod ? '#2EA222' : '#FF4466'}">{{ item.riskEliminationMethod ? '已解除' : '未解除' }}</span>
+        </div>
+        <p>{{ item.addressArea }} {{ item.address }}</p>
+        <div class="item-bottom">家庭收入</div>
+      </div>
+      <ai-empty v-if="!list.length && isMore" style="padding-bottom: 20px;"></ai-empty>
+    </div>
+  </div>
+</template>
+
+<script>
+  import AiEmpty from '@/components/AiEmpty/AiEmpty'
+  export default {
+    name: 'list',
+
+    data () {
+      return {
+        list: [],
+        isMore: false,
+        current: 1,
+        currIndex: 0
+      }
+    },
+
+    components: {
+      AiEmpty
+    },
+
+    created () {
+      uni.showLoading()
+      this.$nextTick(() => {
+        this.getList()
+      })
+      uni.$on('reload', () => {
+        this.reload()
+      })
+    },
+
+    methods: {
+      changeTab (index) {
+        this.currIndex = index
+      },
+
+      toDetail (id) {
+        uni.navigateTo({
+          url: `/pages/Monitor/Detail?id=${id}&isFrom=1`
+        })
+      },
+
+      reload() {
+        this.isMore = false
+        this.current = 1
+
+        this.getList()
+        uni.showLoading()
+      },
+
+      getList() {
+        if (this.isMore) return
+
+        this.$http.post(`/app/apppreventionreturntopoverty/list`, null, {
+          params: {
+            current: this.current,
+            size: 15,
+            status: 2
+          }
+        }).then(res => {
+          if (res.code == 0) {
+            if (this.current > 1) {
+              this.list = [...this.list, ...res.data.records]
+            } else {
+              this.list = res.data.records
+            }
+
+            uni.hideLoading()
+
+            if (res.data.records.length < 10) {
+              this.isMore = true
+
+              return false
+            }
+
+            this.current = this.current + 1
+          } else {
+            uni.hideLoading()
+          }
+        }).catch(() => {
+          uni.hideLoading()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .list {
+    padding: 30px 0 120px;
+
+    .tab {
+      display: flex;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      align-items: center;
+      width: 100%;
+      height: 96px;
+      padding: 0 60px;
+      background: #FFFFFF;
+      border-bottom: 1px solid #D4D4D4;
+      box-sizing: border-box;
+
+      * {
+        box-sizing: border-box;
+      }
+
+      span {
+        position: relative;
+        flex: 1;
+        height: 96rpx;
+        line-height: 96rpx;
+        color: #000000;
+        text-align: center;
+        font-size: 32px;
+
+        &::after {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          width: 192px;
+          height: 6px;
+          background: transparent;
+          transform: translateX(-50%);
+          content: ' ';
+        }
+
+        &.active {
+          color: #1365DD;
+
+          &::after {
+            background: #1365DD;
+          }
+        }
+      }
+    }
+
+    .list-wrapper {
+      .item {
+        margin: 0 32px 32px;
+        padding-bottom: 10px;
+        background: #FFFFFF;
+        border-radius: 16px;
+
+        .item-bottom {
+          height: 94px;
+          line-height: 94px;
+          padding: 0 32px;
+          border-top: 1px solid #DDDDDD;
+          color: #3975C6;
+          font-size: 26px;
+        }
+
+        .item-top {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 16px;
+          padding: 32px 32px 0;
+
+          h2 {
+            color: #333333;
+            font-size: 32px;
+            font-weight: 700;
+          }
+
+          span {
+            color: #FFBB00;
+
+            &.status0 {
+              color: #FF4466;
+            }
+
+            &.status1 {
+              color: 已解除风险;
+            }
+          }
+        }
+
+        p {
+          line-height: 1.4;
+          margin-bottom: 32rpx;
+          padding: 0 32px;
+          color: #999999;
+          font-size: 26px;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/povertyMonitor/components/Statistics.vue b/src/pages/povertyMonitor/components/Statistics.vue
new file mode 100644
index 00000000..da8e574f
--- /dev/null
+++ b/src/pages/povertyMonitor/components/Statistics.vue
@@ -0,0 +1,329 @@
+<template>
+  <div class="statistics">
+    <div class="block"></div>
+    <div class="charts-wrapper">
+      <div class="total">
+        <!-- <div class="total-item">
+          <h2>2</h2>
+          <p>高返贫风险人数</p>
+        </div> -->
+        <div class="total-item">
+          <h2>{{ info.fxyjCount }}</h2>
+          <p>监测对象风险预警</p>
+        </div>
+      </div>
+      <div class="charts" v-if="false">
+        <h2>本月高风险预警转换统计</h2>
+        <div id="chart1" style="height: 400rpx"></div>
+      </div>
+      <div class="charts">
+        <h2>本月纳入监测人群属性分析</h2>
+        <div id="chart2" style="height: 400rpx"></div>
+      </div>
+      <div class="charts">
+        <h2>本月风险消除方式统计</h2>
+        <div id="chart3" style="height: 400rpx"></div>
+      </div>
+      <div class="charts">
+        <h2>本月监测对象预警转换统计</h2>
+        <div id="chart4" style="height: 400rpx"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import echarts from 'echarts'
+
+  export default {
+    name: 'statistics',
+
+    data () {
+      return {
+        chart1: null,
+        chart2: null,
+        chart3: null,
+        chart4: null,
+        info: {}
+      }
+    },
+
+    mounted () {
+      window.scrollTo(0,0)
+      // this.chart1 = echarts.init(document.getElementById('chart1'))
+      this.chart4 = echarts.init(document.getElementById('chart4'))
+      this.chart2 = echarts.init(document.getElementById('chart2'))
+      this.chart3 = echarts.init(document.getElementById('chart3'))
+      this.$dict.load(['fpType', 'fpRiskEliminationMethod'])
+      this.getInfo()
+    },
+
+    methods: {
+      getInfo () {
+        this.$http.post(`/app/apppreventionreturntopoverty/statistics-h5`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+            this.initChart2(res.data.byxzMap)
+            this.initChart3(res.data.byxcMap)
+            this.initChart4(res.data.fxxcCount, res.data.fxyjCount)
+          }
+        })
+      },
+
+      initChart1 () {
+        const option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c}%'
+          },
+          color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
+          series: [
+            {
+              name: 'Funnel',
+              type: 'funnel',
+              left: '0%',
+              top: 0,
+              bottom: 0,
+              width: '100%',
+              min: 0,
+              max: 100,
+              minSize: '0%',
+              maxSize: '100%',
+              sort: 'descending',
+              gap: 2,
+              label: {
+                show: true,
+                position: 'inside'
+              },
+              labelLine: {
+                length: 10,
+                lineStyle: {
+                  width: 1,
+                  type: 'solid'
+                }
+              },
+              itemStyle: {
+                borderColor: '#fff',
+                borderWidth: 1
+              },
+              emphasis: {
+                label: {
+                  fontSize: 20
+                }
+              },
+              data: [
+                { value: 60, name: '总上报' },
+                { value: 40, name: '纳入监测' },
+                { value: 20, name: '已处理' }
+              ]
+            }
+          ]
+        }
+
+        this.chart1.setOption(option)
+      },
+
+      initChart2 (data) {
+        const values = data.map(item => {
+          return {
+            value: item.typeCount,
+            name: this.$dict.getLabel('fpType', item.type)
+          }
+        })
+        const option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '40px',
+            containLabel: true
+          },
+          color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
+          series: [
+            {
+              name: '本月纳入监测人群属性分析',
+              type: 'pie',
+              radius: ['40%', '70%'],
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  fontWeight: 'bold'
+                }
+              },
+              data: values
+            }
+          ]
+        }
+
+        this.chart2.setOption(option)
+      },
+
+      initChart3 (data) {
+        const values = data.map(item => {
+          return {
+            value: item.typeCount,
+            name: this.$dict.getLabel('fpRiskEliminationMethod', item.risk_elimination_method)
+          }
+        })
+        const option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          grid: {
+            left: '0%',
+            right: '0%',
+            bottom: '0%',
+            top: '40px',
+            containLabel: true
+          },
+          color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
+          series: [
+            {
+              name: '本月纳入监测人群属性分析',
+              type: 'pie',
+              radius: ['40%', '70%'],
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '40',
+                  fontWeight: 'bold'
+                }
+              },
+              data: values
+            }
+          ]
+        }
+
+        this.chart3.setOption(option)
+      },
+
+      initChart4 (x, y) {
+        const option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
+          series: [
+            {
+              name: '',
+              type: 'funnel',
+              left: '0%',
+              top: 0,
+              bottom: 0,
+              width: '100%',
+              min: 0,
+              max: 100,
+              minSize: '0%',
+              maxSize: '100%',
+              sort: 'descending',
+              gap: 2,
+              label: {
+                show: true,
+                position: 'inside'
+              },
+              labelLine: {
+                length: 10,
+                lineStyle: {
+                  width: 1,
+                  type: 'solid'
+                }
+              },
+              itemStyle: {
+                borderColor: '#fff',
+                borderWidth: 1
+              },
+              emphasis: {
+                label: {
+                  fontSize: 20
+                }
+              },
+              data: [
+                { value: y, name: '纳入监测' },
+                { value: x, name: '消除监测' }
+              ]
+            }
+          ]
+        }
+
+        this.chart4.setOption(option)
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .statistics {
+    padding: 40px 0 120px;
+
+    .block {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 140px;
+      background: #3975C6;
+    }
+
+    .charts-wrapper {
+      position: relative;
+      z-index: 1;
+      padding: 0 32px;
+
+      .total {
+        display: flex;
+        align-items: center;
+        height: 200px;
+        background: #FFFFFF;
+        border-radius: 8px;
+
+        .total-item {
+          flex: 1;
+          text-align: center;
+
+          h2 {
+            font-size: 64px;
+            color: #3192F4;
+          }
+
+          p {
+            margin-top: 10px;
+            color: #999999;
+            font-size: 28px;
+          }
+
+          &:last-child {
+            h2 {
+              color: #F09535;
+            }
+          }
+        }
+      }
+
+      .charts {
+        margin-top: 32px;
+        background: #FFFFFF;
+        border-radius: 8px;
+
+        & > h2 {
+          height: 96px;
+          line-height: 96px;
+          padding: 0 32px;
+          color: #333333;
+          font-size: 32px;
+          border-bottom: 1px solid #DDDDDD;
+        }
+
+        & > div {
+          width: 686px;
+          margin: 0 auto;
+          padding: 32px 0;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/pages/povertyMonitor/povertyMonitor.vue b/src/pages/povertyMonitor/povertyMonitor.vue
new file mode 100644
index 00000000..d3e19b52
--- /dev/null
+++ b/src/pages/povertyMonitor/povertyMonitor.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="povertyMonitor">
+    <div class="form-content">
+      <List ref="list" v-if="currIndex === 0"></List>
+      <Statistics ref="statistics" v-if="currIndex === 1"></Statistics>
+    </div>
+    <div class="footer">
+      <div @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">监控预警</div>
+      <div @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">数据统计</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Statistics from './components/Statistics.vue'
+  import List from './components/List.vue'
+
+  export default {
+    data () {
+      return {
+        currIndex: 0
+      }
+    },
+
+    components: {
+      List,
+      Statistics
+    },
+
+    computed: {
+      tabBar () {
+        const link = icon => `${this.$cdn}askform/${icon}.png`
+        return [
+          {text: "预警监控", iconPath: "bdlb1", selectedIconPath: "bdlb2" },
+          {text: "数据统计", iconPath: "xjxm1", selectedIconPath: "xjxm2" }
+        ].map(e => ({
+          ...e,
+          iconPath: link(e.iconPath),
+          selectedIconPath: link(e.selectedIconPath)
+        }))
+      }
+    },
+
+    onLoad () {
+      uni.$on('reload', () => {
+        if (this.currIndex === 0) {
+          this.$refs.list.reload()
+        } else {
+          this.$refs.addList.getList()
+        }
+      })
+    },
+
+    onReachBottom() {
+      if (this.currIndex === 0) {
+        this.$refs.list.getList()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .povertyMonitor {
+    .footer {
+      display: flex;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 11;
+      width: 100%;
+      height: 98px;
+
+      div {
+        flex: 1;
+        height: 98px;
+        line-height: 98px;
+        text-align: center;
+        color: #333333;
+        font-size: 32px;
+        background: #fff;
+
+        &.active {
+          color: #fff;
+          background: #3192F4;
+        }
+      }
+    }
+  }
+</style>