diff --git a/src/views/modules/secretaryLog/humanisticCare/careDetail.vue b/src/views/modules/secretaryLog/humanisticCare/careDetail.vue
new file mode 100644
index 000000000..8e9796692
--- /dev/null
+++ b/src/views/modules/secretaryLog/humanisticCare/careDetail.vue
@@ -0,0 +1,311 @@
+<template>
+  <div>
+
+    <div class="dialog-h-content scroll-h">
+      <el-form ref="ref_form"
+               :inline="true"
+               :model="formData"
+               class="form">
+
+        <el-form-item label="服务事项"
+                      label-width="150px"
+                      prop="serviceMatterShow">
+          <span class="detail_span">{{formData.serviceMatterShow}}</span>
+
+        </el-form-item>
+
+        <el-form-item label="单位名称"
+                      prop="unitId"
+                      label-width="150px"
+                      style="display: block">
+          <span class="detail_span">{{formData.unitName}}</span>
+
+        </el-form-item>
+
+        <el-form-item label="活动标题"
+                      prop="title"
+                      label-width="150px"
+                      style="display: block">
+          <span class="detail_span">{{formData.title}}</span>
+
+        </el-form-item>
+
+        <el-form-item label="活动目标"
+                      prop="target"
+                      label-width="150px"
+                      style="display: block">
+          <span class="detail_span">{{formData.target}}</span>
+
+        </el-form-item>
+        <el-form-item label="活动内容"
+                      prop="target"
+                      label-width="150px"
+                      style="display: block">
+          <p class="text_p"
+             v-html="formData.content"></p>
+
+        </el-form-item>
+
+        <el-form-item label="服务人数"
+                      style="display: block"
+                      prop="peopleCount"
+                      label-width="150px">
+          <span class="detail_span">{{formData.peopleCount}}</span>
+
+        </el-form-item>
+        <el-form-item label="活动时间"
+                      style="display: block"
+                      prop="activityTime"
+                      label-width="150px">
+          <span class="detail_span">{{formData.activityTime}}</span>
+
+        </el-form-item>
+
+        <el-form-item label="活动地址"
+                      prop="address"
+                      label-width="150px"
+                      style="display: block">
+          <span class="detail_span">{{formData.address}}</span>
+
+        </el-form-item>
+
+        <el-form-item label="活动坐标"
+                      prop="longitude"
+                      label-width="150px"
+                      style="display: block">
+
+          <div style="width:500px">
+
+            <div id="app">
+
+            </div>
+
+          </div>
+
+        </el-form-item>
+
+        <el-form-item label="活动结果"
+                      prop="result"
+                      label-width="150px"
+                      style="display: block">
+
+          <p class="text_p"
+             v-html="formData.result"></p>
+
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="div_btn">
+      <el-button size="small"
+                 @click="handleCancle">取 消</el-button>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import { Loading } from 'element-ui' // 引入Loading服务
+
+var map
+var search
+var markers
+var infoWindowList
+var geocoder // 新建一个正逆地址解析类
+
+let loading // 加载动画
+export default {
+  data () {
+    return {
+      formData: {},
+    }
+  },
+  components: {},
+  mounted () {
+    this.initMap()
+  },
+
+  methods: {
+    handleCancle () {
+
+      this.$emit('diaClose')
+
+    },
+    async initForm (row) {
+
+      this.startLoading()
+      for (let item of this.serviceList) {
+
+        if (row.serviceMatter === item.value) {
+          row.serviceMatterShow = item.label
+        }
+      }
+      this.formData = { ...row }
+
+      map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude))
+      this.setMarker(this.formData.latitude, this.formData.longitude)
+
+      this.endLoading()
+
+    },
+
+    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
+    initMap () {
+      // 定义地图中心点坐标
+      var center = new window.TMap.LatLng(36.0722275, 120.38945519)
+      // 定义map变量，调用 TMap.Map() 构造函数创建地图
+      map = new window.TMap.Map(document.getElementById('app'), {
+        center: center, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        pitch: 43.5, // 设置俯仰角
+        rotation: 45 // 设置地图旋转角度
+      })
+
+      search = new window.TMap.service.Search({ pageSize: 10 })
+      // 新建一个地点搜索类
+      markers = new TMap.MultiMarker({
+        map: map,
+        geometries: []
+      })
+      infoWindowList = Array(10)
+
+      geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
+
+      // 监听地图平移结束
+      map.on('panend', () => {
+        this.handleMoveCenter()
+      })
+      this.handleMoveCenter()
+      this.convert()
+    },
+
+    setMarker (lat, lng) {
+      markers.setGeometries([])
+      markers.add([
+        {
+          id: '4',
+          styleId: 'marker',
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: 'marker4'
+          }
+        }
+      ])
+    },
+
+    handleSearchMap () {
+      infoWindowList.forEach((infoWindow) => {
+        infoWindow.close()
+      })
+      infoWindowList.length = 0
+      markers.setGeometries([])
+      // 在地图显示范围内以给定的关键字搜索地点
+      search
+        .searchRectangle({
+          keyword: this.keyWords,
+          bounds: map.getBounds()
+        })
+        .then((result) => {
+          let { data } = result
+          if (Array.isArray(data) && data.length > 0) {
+            const {
+              location: { lat, lng }
+            } = data[0]
+
+
+            map.setCenter(new TMap.LatLng(lat, lng))
+            this.setMarker(lat, lng)
+            this.formData.latitude = lat
+            this.formData.longitude = lng
+            this.convert()
+          } else {
+            this.$message.error('未检索到相关位置坐标')
+          }
+        })
+    },
+
+    handleMoveCenter () {
+      //修改地图中心点
+      const center = map.getCenter()
+      const lat = center.getLat()
+      const lng = center.getLng()
+      this.formData.latitude = lat
+      this.formData.longitude = lng
+      this.setMarker(lat, lng)
+      this.convert(lat, lng)
+    },
+
+    convert (lat, lng) {
+      markers.setGeometries([]);
+      // var input = document.getElementById('location').value.split(',');
+      let location
+      if (lat && lng) {
+        location = new TMap.LatLng(lat, lng);
+      } else {
+        location = new TMap.LatLng(this.formData.latitude, this.formData.longitude);
+      }
+      // map.setCenter(location);
+      markers.updateGeometries([
+        {
+          id: 'main', // 点标注数据数组
+          position: location,
+        },
+      ]);
+      geocoder
+        .getAddress({ location: location }) // 将给定的坐标位置转换为地址
+        .then((result) => {
+          // this.formData.address = result.result.address
+          // 显示搜索到的地址
+        });
+    },
+
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  },
+  computed: {},
+  props: {
+    serviceList: {
+      type: Array,
+      default: []
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/visual/communityManageForm.scss";
+</style>
+
+<style  lang="scss" scoped>
+.detail_span {
+  width: 500px;
+  font-weight: bold;
+  text-align: left;
+  margin: 0 0;
+  font-size: 16px;
+}
+.text_p {
+  margin: 0 0;
+  border: 3px;
+
+  > p {
+    margin: 0 0;
+  }
+}
+</style>
+
diff --git a/src/views/modules/secretaryLog/humanisticCare/careForm.vue b/src/views/modules/secretaryLog/humanisticCare/careForm.vue
new file mode 100644
index 000000000..b67083433
--- /dev/null
+++ b/src/views/modules/secretaryLog/humanisticCare/careForm.vue
@@ -0,0 +1,604 @@
+<template>
+  <div>
+
+    <div class="dialog-h-content scroll-h">
+      <el-form ref="ref_form"
+               :inline="true"
+               :model="formData"
+               :rules="dataRule"
+               :disabled="formType === 'detail'"
+               class="form">
+
+        <el-form-item label="服务事项"
+                      label-width="150px"
+                      prop="serviceMatterList">
+
+          <el-checkbox-group class="item_width_1"
+                             style="display:flex;flex-wrap:wrap"
+                             v-model="formData.serviceMatterList">
+            <el-checkbox v-for="item in serviceList"
+                         :key="item.value"
+                         :label="item.value">{{item.label}}</el-checkbox>
+
+          </el-checkbox-group>
+
+          <!-- <el-select class="item_width_1"
+                     v-model="formData.serviceMatter"
+                     placeholder="请选择"
+                     clearable>
+            <el-option v-for="item in serviceList"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select> -->
+
+        </el-form-item>
+
+        <el-form-item label="单位名称"
+                      prop="unitIdList"
+                      label-width="150px"
+                      style="display: block">
+          <el-checkbox-group class="item_width_1"
+                             style="display:flex;flex-wrap:wrap"
+                             v-model="formData.unitIdList">
+            <el-checkbox v-for="item in unitList"
+                         :key="item.value"
+                         :label="item.value">{{item.label}}</el-checkbox>
+
+          </el-checkbox-group>
+          <!-- <el-select class="item_width_1"
+                     v-model="formData.unitId"
+                     placeholder="请选择"
+                     clearable>
+            <el-option v-for="item in unitList"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select> -->
+        </el-form-item>
+
+        <el-form-item label="活动标题"
+                      prop="title"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_1"
+                    maxlength="50"
+                    show-word-limit
+                    placeholder="请输入活动标题"
+                    v-model="formData.title">
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="活动目标"
+                      prop="target"
+                      label-width="150px"
+                      style="display: block">
+          <el-input class="item_width_1"
+                    type="textarea"
+                    maxlength="100"
+                    show-word-limit
+                    :rows="3"
+                    placeholder="请输入活动目标，不超过100字"
+                    v-model="formData.target"></el-input>
+        </el-form-item>
+        <el-form-item label="活动内容"
+                      prop="target"
+                      label-width="150px"
+                      style="display: block">
+          <div class="item_width_1">
+            <Tinymce class="tinymce_view "
+                     v-if="formType!='detail'"
+                     v-model="formData.content"
+                     :height="250"
+                     placeholder="在这里输入文字" />
+
+            <p v-else
+               class="text_p"
+               v-html="formData.content"></p>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="服务人数"
+                      style="display: block"
+                      prop="peopleCount"
+                      label-width="150px">
+          <el-input-number class="item_width_1"
+                           v-model="formData.peopleCount"
+                           :min="0"
+                           label="服务人数"></el-input-number>
+        </el-form-item>
+        <el-form-item label="活动时间"
+                      style="display: block"
+                      prop="activityTime"
+                      label-width="150px">
+          <el-date-picker v-model="formData.activityTime"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          type="datetime"
+                          placeholder="选择时间">
+          </el-date-picker>
+        </el-form-item>
+
+        <el-form-item label="活动坐标"
+                      prop="longitude"
+                      label-width="150px"
+                      style="display: block">
+          <div class="item_width_1">
+
+            <div class="div_map">
+              <div id="app">
+
+              </div>
+              <div class="div_searchmap">
+                <el-input class="item_width_4"
+                          maxlength="50"
+                          size="mini"
+                          placeholder="请输入关键字"
+                          v-model="keyWords">
+                </el-input>
+                <el-button style="margin-left: 10px"
+                           type="primary"
+                           size="mini"
+                           @click="handleSearchMap">查询</el-button>
+              </div>
+            </div>
+
+            <div style="margin-top: 10px">
+              <span>经度</span>
+              <el-input class="item_width_3"
+                        maxlength="50"
+                        placeholder="请输入经度"
+                        v-model="formData.longitude">
+              </el-input>
+              <span style="margin-left: 20px">纬度</span>
+              <el-input class="item_width_3"
+                        maxlength="50"
+                        placeholder="请输入纬度"
+                        v-model="formData.latitude">
+              </el-input>
+            </div>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="活动地址"
+                      prop="address"
+                      label-width="150px"
+                      style="display: block">
+
+          <el-input class="item_width_1"
+                    v-model="formData.address">
+          </el-input>
+
+        </el-form-item>
+
+        <el-form-item label="活动结果"
+                      prop="result"
+                      label-width="150px"
+                      style="display: block">
+          <div class="item_width_1">
+            <Tinymce class="tinymce_view "
+                     v-if="formType!='detail'"
+                     v-model="formData.result"
+                     :height="250"
+                     placeholder="在这里输入文字" />
+
+            <p v-else
+               class="text_p"
+               v-html="formData.result"></p>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="div_btn">
+      <el-button size="small"
+                 @click="handleCancle">取 消</el-button>
+      <el-button size="small"
+                 v-if="formType != 'detail'"
+                 type="primary"
+                 :disabled="btnDisable"
+                 @click="handleComfirm">确 定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { Loading } from 'element-ui' // 引入Loading服务
+import { requestPost } from '@/js/dai/request'
+import Tinymce from '@c/tinymce/index.vue'
+
+var map
+var search
+var markers
+var infoWindowList
+var geocoder // 新建一个正逆地址解析类
+
+let loading // 加载动画
+export default {
+  data () {
+    return {
+      formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
+
+      btnDisable: false,
+
+      keyWords: '',
+      activityId: '',
+      formData: {
+        serviceMatter: '',//服务事项
+        serviceMatterList: [],
+        unitId: '',//单位ID
+        unitIdList: [],
+        title: '',//活动标题
+        target: '',//活动目标
+        content: '',//活动内容
+        activityTime: '',//活动时间
+        peopleCount: 0,//服务人数
+        result: '', //活动结果
+        address: '', //详细地址
+        longitude: 36.0722275, //经度
+        latitude: 120.38945519 //纬度
+      },
+      serviceList: []
+
+    }
+  },
+  components: { Tinymce },
+  mounted () {
+    this.initMap()
+  },
+
+  methods: {
+
+    async initForm (type, activityId) {
+      this.startLoading()
+      this.$refs.ref_form.resetFields();
+
+      //获取服务事项
+      await this.loadService()
+
+      this.formType = type
+      if (activityId) {
+        this.activityId = activityId
+        this.formData.id = activityId
+        await this.loadFormData()
+      } else {
+        map.setCenter(new TMap.LatLng(36.0722275, 120.38945519))
+        this.setMarker(36.0722275, 120.38945519)
+      }
+      this.endLoading()
+
+    },
+
+    //获取服务事项下拉框
+    async loadService () {
+      const url = "/heart/serviceitem/dict-list"
+
+      let params = {
+        type: 'usable'
+        // parentCategoryCode: '1010'
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.serviceList = data
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //加载组织
+    async loadFormData () {
+      const url = '/heart/icpartyactivity/detail'
+      // const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/detail'
+      let params = {
+        id: this.activityId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.formData = data
+        console.log(this.formData.content)
+        let style_img = "style='width:50px;height:40px;' "
+
+        if (this.formData.content) {
+          this.formData.content = this.formData.content.replace(/<img/g, "<img style='width:200px;height:120px;'")
+          // let array=this.formData.content.split('<img')
+
+        }
+        console.log(this.formData.content)
+        map.setCenter(new TMap.LatLng(parseFloat(this.formData.latitude), parseFloat(this.formData.longitude)))
+        this.setMarker(this.formData.latitude, this.formData.longitude)
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    async handleComfirm () {
+      this.btnDisable = true
+      setTimeout(() => {
+        this.btnDisable = false
+      }, 10000)
+      this.$refs['ref_form'].validate((valid, messageObj) => {
+        if (!valid) {
+          app.util.validateRule(messageObj)
+          this.btnDisable = false
+        } else {
+          this.addActivity()
+        }
+
+      })
+
+    },
+    async addActivity () {
+      let url = '/heart/icpartyactivity/save'
+      // let url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/save"
+
+
+      const { data, code, msg } = await requestPost(url, this.formData)
+
+      if (code === 0) {
+        this.$message({
+          type: 'success',
+          message: '操作成功'
+        })
+        this.resetData()
+        this.$emit('dialogOk')
+        this.btnDisable = false
+      } else {
+        this.btnDisable = false
+        this.$message.error(msg)
+      }
+
+    },
+
+    handleCancle () {
+
+      this.resetData()
+      this.$emit('dialogCancle')
+
+    },
+
+    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
+    initMap () {
+      // 定义地图中心点坐标
+      var center = new window.TMap.LatLng(36.0722275, 120.38945519)
+      // 定义map变量，调用 TMap.Map() 构造函数创建地图
+      map = new window.TMap.Map(document.getElementById('app'), {
+        center: center, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        pitch: 43.5, // 设置俯仰角
+        rotation: 45 // 设置地图旋转角度
+      })
+
+      search = new window.TMap.service.Search({ pageSize: 10 })
+      // 新建一个地点搜索类
+      markers = new TMap.MultiMarker({
+        map: map,
+        geometries: []
+      })
+      infoWindowList = Array(10)
+
+      geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
+
+      // 监听地图平移结束
+      map.on('panend', () => {
+        this.handleMoveCenter()
+      })
+      this.handleMoveCenter()
+      this.convert()
+    },
+
+    setMarker (lat, lng) {
+      markers.setGeometries([])
+      markers.add([
+        {
+          id: '4',
+          styleId: 'marker',
+          position: new TMap.LatLng(lat, lng),
+          properties: {
+            title: 'marker4'
+          }
+        }
+      ])
+    },
+
+    handleSearchMap () {
+      infoWindowList.forEach((infoWindow) => {
+        infoWindow.close()
+      })
+      infoWindowList.length = 0
+      markers.setGeometries([])
+      // 在地图显示范围内以给定的关键字搜索地点
+      search
+        .searchRectangle({
+          keyword: this.keyWords,
+          bounds: map.getBounds()
+        })
+        .then((result) => {
+          let { data } = result
+          if (Array.isArray(data) && data.length > 0) {
+            const {
+              location: { lat, lng }
+            } = data[0]
+
+
+            map.setCenter(new TMap.LatLng(lat, lng))
+            this.setMarker(lat, lng)
+            this.formData.latitude = lat
+            this.formData.longitude = lng
+            this.convert()
+          } else {
+            this.$message.error('未检索到相关位置坐标')
+          }
+        })
+    },
+
+    handleMoveCenter () {
+      //修改地图中心点
+      const center = map.getCenter()
+      const lat = center.getLat()
+      const lng = center.getLng()
+      this.formData.latitude = lat
+      this.formData.longitude = lng
+      this.setMarker(lat, lng)
+      this.convert(lat, lng)
+    },
+
+    convert (lat, lng) {
+      markers.setGeometries([]);
+      // var input = document.getElementById('location').value.split(',');
+      let location
+      if (lat && lng) {
+        location = new TMap.LatLng(lat, lng);
+      } else {
+        location = new TMap.LatLng(this.formData.latitude, this.formData.longitude);
+      }
+      // map.setCenter(location);
+      markers.updateGeometries([
+        {
+          id: 'main', // 点标注数据数组
+          position: location,
+        },
+      ]);
+      geocoder
+        .getAddress({ location: location }) // 将给定的坐标位置转换为地址
+        .then((result) => {
+          this.formData.address = result.result.address
+          // 显示搜索到的地址
+        });
+    },
+
+    resetData () {
+      this.activityId = ''
+      this.keyWords = ''
+      this.formData = {
+        serviceMatter: '',//服务事项
+        serviceMatterList: [],
+        unitId: '',//单位ID
+        unitIdList: [],
+        title: '',//活动标题
+        target: '',//活动目标
+        content: '',//活动内容
+        activityTime: '',//活动时间
+        peopleCount: 0,//服务人数
+        result: '', //活动结果
+        address: '', //详细地址
+        longitude: 36.0722275, //经度
+        latitude: 120.38945519 //纬度
+      }
+    },
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        serviceMatterList: [
+          { required: true, message: '服务事项不能为空', trigger: 'blur' }
+        ],
+        unitIdList: [
+          { required: true, message: '单位名称不能为空', trigger: 'blur' },
+        ],
+        title: [
+          { required: true, message: '活动标题不能为空', trigger: 'blur' }
+        ],
+
+        target: [
+          { required: true, message: '活动目标不能为空', trigger: 'blur' }
+        ],
+        content: [
+          { required: true, message: '活动内容不能为空', trigger: 'blur' }
+        ],
+        activityTime: [
+          { required: true, message: '活动时间不能为空', trigger: 'blur' }
+        ],
+        result: [
+          { required: true, message: '活动结果不能为空', trigger: 'blur' }
+        ],
+        address: [
+          { required: true, message: '详细地址不能为空', trigger: 'blur' }
+        ],
+        longitude: [
+          { required: true, message: '坐标不能为空', trigger: 'blur' }
+        ]
+      }
+    },
+
+  },
+  props: {
+
+    unitList: {
+      type: Array,
+      default: []
+    },
+
+    // serviceList: {
+    //   type: Array,
+    //   default: []
+    // },
+  }
+}
+</script>
+
+
+<style lang="scss" scoped >
+@import "@/assets/scss/modules/visual/communityManageForm.scss";
+</style>
+<style  lang="scss" scoped>
+.item_width_1 {
+  width: 560px;
+
+  /deep/.tox .tox-dialog {
+    z-index: 20000;
+  }
+}
+.tinymce_view {
+  ::v-deep .tox .tox-dialog {
+    z-index: 2000000000;
+  }
+}
+
+.div_map {
+  position: relative;
+}
+.div_searchmap {
+  z-index: 5000;
+  position: absolute;
+  top: 5px;
+  left: 5px;
+}
+
+.tinymce_view {
+  height: 400px;
+  overflow: auto;
+}
+.text_p {
+  margin: 0;
+  padding: 0 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 5px;
+  > p {
+    margin: 0;
+  }
+}
+</style>
+
diff --git a/src/views/modules/secretaryLog/humanisticCare/careList.vue b/src/views/modules/secretaryLog/humanisticCare/careList.vue
new file mode 100644
index 000000000..0fbdc0063
--- /dev/null
+++ b/src/views/modules/secretaryLog/humanisticCare/careList.vue
@@ -0,0 +1,694 @@
+<template>
+  <div class="div_main">
+    <div class="div_search">
+      <el-form :inline="true"
+               :model="formData"
+               ref="ref_searchform"
+               :label-width="'100px'">
+        <div>
+
+          <el-form-item label="单位名称"
+                        prop="unitId">
+            <el-select class="item_width_1"
+                       v-model="formData.unitId"
+                       size="small"
+                       placeholder="全部"
+                       clearable>
+              <el-option v-for="item in unitList"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+
+          </el-form-item>
+
+          <el-form-item label="服务事项"
+                        prop="serviceMatter">
+            <el-select class="item_width_2"
+                       v-model="formData.serviceMatter"
+                       size="small"
+                       placeholder="请选择"
+                       clearable>
+              <el-option v-for="item in serviceList"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+
+          </el-form-item>
+
+        </div>
+        <div>
+          <el-form-item label="活动标题"
+                        prop="title">
+            <el-input v-model="formData.title"
+                      size="small"
+                      class="item_width_1"
+                      clearable
+                      placeholder="请输入内容">
+            </el-input>
+
+          </el-form-item>
+
+          <el-form-item label="活动时间"
+                        prop="startTime">
+            <el-date-picker v-model="timeRange"
+                            size="small"
+                            type="daterange"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            @change="handleTimeChange"
+                            range-separator="至"
+                            start-placeholder="开始时间"
+                            end-placeholder="结束时间">
+            </el-date-picker>
+
+          </el-form-item>
+          <el-button style="margin-left:10px"
+                     class="diy-button--search"
+                     size="small"
+                     @click="handleSearch">查询</el-button>
+          <el-button style="margin-left:10px"
+                     class="diy-button--reset"
+                     size="small"
+                     @click="resetSearch">重置</el-button>
+        </div>
+      </el-form>
+    </div>
+    <div class="div_table">
+      <div class="div_btn">
+        <el-button style=""
+                   class="diy-button--add"
+                   size="small"
+                   @click="handleAdd">新增</el-button>
+        <!-- 
+        <el-upload ref="upload"
+                   :multiple='false'
+                   :show-file-list='false'
+                   :before-upload="beforeUpload"
+                   action=""
+                   accept=".xls,.xlsx"
+                   :limit="1"
+                   :on-exceed="handleExceed"
+                   :http-request="uploadFile">
+          <el-button style="margin-left:10px"
+                     size="small"
+                   class="diy-button--delete">导入</el-button>
+
+
+        </el-upload> 
+        <el-button style="float:left"
+                   class="diy-button--reset"
+                   size="small"
+                   @click="handleExport">导出</el-button>-->
+
+      </div>
+
+      <el-table class="table"
+                :data="tableData"
+                border
+                :height="tableHeight"
+                v-loading="tableLoading"
+                :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
+                style="width: 100%">
+
+        <el-table-column label="序号"
+                         header-align="center"
+                         align="center"
+                         type="index"
+                         width="50"></el-table-column>
+        <el-table-column prop="unitName"
+                         header-align="center"
+                         align="center"
+                         label="单位名称"
+                         width="180">
+        </el-table-column>
+        <el-table-column prop="title"
+                         header-align="center"
+                         align="center"
+                         label="活动标题"
+                         min-width="180">
+        </el-table-column>
+        <el-table-column prop="address"
+                         header-align="center"
+                         align="center"
+                         label="活动地址"
+                         min-width="230">
+        </el-table-column>
+
+        <el-table-column prop="peopleCount"
+                         header-align="center"
+                         align="center"
+                         label="服务人数"
+                         width="100">
+        </el-table-column>
+        <el-table-column prop="activityTime"
+                         header-align="center"
+                         align="center"
+                         label="活动时间"
+                         width="230">
+        </el-table-column>
+        <el-table-column prop="activityTime"
+                         header-align="center"
+                         align="center"
+                         label="来源"
+                         width="100">
+          <template slot-scope="scope">
+            <span v-if="scope.row.actId">小程序</span>
+            <span v-else>管理平台</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作"
+                         fixed="right"
+                         width="140"
+                         header-align="center"
+                         align="center"
+                         class="operate">
+          <template slot-scope="scope">
+
+            <el-button type="text"
+                       style="color:#1C6AFD;text-decoration: underline;"
+                       size="small"
+                       @click="handleDetail(scope.row)">查看</el-button>
+            <el-button v-if="!scope.row.actId"
+                       type="text"
+                       style="color:#00A7A9;text-decoration: underline;"
+                       size="small"
+                       @click="handleEdit(scope.row)">修改</el-button>
+
+            <el-button type="text"
+                       style="color:#D51010;text-decoration: underline;"
+                       size="small"
+                       @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div>
+        <el-pagination @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange"
+                       :current-page.sync="pageNo"
+                       :page-sizes="[10, 20, 50]"
+                       :page-size="pageSize"
+                       layout="sizes, prev, pager, next, total"
+                       :total="total">
+        </el-pagination>
+      </div>
+    </div>
+
+    <!-- 修改弹出框 -->
+    <el-dialog :visible.sync="formShow"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :title="formTitle"
+               width="950px"
+               top="5vh"
+               class="dialog-h"
+               @closed="diaClose">
+      <activitys-form ref="ref_form"
+                      :unitList="unitList"
+                      @dialogCancle="addFormCancle"
+                      @dialogOk="addFormOk"></activitys-form>
+    </el-dialog>
+
+    <el-dialog :visible.sync="detailShow"
+               :close-on-click-modal="false"
+               :close-on-press-escape="false"
+               :title="'活动详情'"
+               width="950px"
+               top="5vh"
+               class="dialog-h"
+               @closed="detailClosed">
+      <activitys-detail ref="ref_detail"
+                        :serviceList="serviceList"
+                        @diaClose="diaClose"></activitys-detail>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+
+import activitysForm from './activitysForm'
+import activitysDetail from './activitysDetail'
+import util from '@js/util.js';
+import { requestPost } from "@/js/dai/request";
+import { mapGetters } from 'vuex'
+import { Loading } from 'element-ui' // 引入Loading服务
+
+let loading // 加载动画
+export default {
+  data () {
+    return {
+      loading: false,
+      total: 0,
+      pageSize: 10,
+      pageNo: 0,
+      tableLoading: false,
+      agencyId: '',
+      unitList: [],//单位list
+      serviceList: [
+        {
+          id: "1",
+          name: '积极配合社区安全巡查员进行场所消防、安全等方面的检查。'
+        },
+        {
+          id: "2",
+          name: '积极配合'
+        },
+        {
+          id: "3",
+          name: '积极配合社区安全巡查员进行'
+        },
+        {
+          id: "4",
+          name: '积极配合社区安全巡查员进行场所消防、安全等方面的检查。并具备安全意识及设备设施'
+        },
+      ],//服务list
+      pickerOptions: { //控制时间范围
+        disabledDate (time) {
+          return time.getTime() > (Date.now() - (24 * 60 * 60 * 1000))
+        }
+      },
+
+      timeRange: [],
+      unitId: '',
+      formData: {
+        unitId: '',
+        title: '',
+        serviceMatter: '',
+        startTime: '',
+        endTime: ''
+      },
+
+      tableData: [],
+
+      //form相关
+      formShow: false,
+      formTitle: '新增活动',
+      detailShow: false,
+
+      files: "",
+      fileName: "",
+      uploadUlr: window.SITE_CONFIG['apiURL'] + '/gov/org/neighborhood/import'
+
+    }
+  },
+  components: {
+    activitysForm, activitysDetail
+  },
+  async created () {
+
+  },
+  async mounted () {
+    //获取服务事项
+    await this.loadService()
+
+    const { user } = this.$store.state
+    this.agencyId = user.agencyId
+
+    //获取建联单位
+    await this.loadUnit()
+    //获取网格下拉框数据
+    await this.loadTable()
+  },
+
+  methods: {
+    handleSearch () {
+      this.loadTable()
+    },
+
+    async loadUnit () {
+      const url = "/heart/icpartyunit/option"
+      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/option"
+
+      let params = {
+        agencyId: this.agencyId
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.unitList = data
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    //获取服务事项下拉框
+    async loadService () {
+      const url = "/heart/serviceitem/dict-list"
+
+
+      let params = {
+        // parentCategoryCode: '1010'
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.serviceList = data
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+
+    async loadTable () {
+      this.tableLoading = true
+
+      const url = "/heart/icpartyactivity/search"
+      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
+      let params = {
+        agencyId: this.agencyId,
+        pageSize: this.pageSize,
+        pageNo: this.pageNo,
+        ...this.formData
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.total = data.total
+        this.tableData = data.list
+      } else {
+        this.$message.error(msg)
+      }
+      this.tableLoading = false
+    },
+
+
+
+    diaClose () {
+      this.$refs.ref_form.resetData()
+      this.formShow = false
+    },
+
+    detailClosed () {
+      this.detailShow = false
+    },
+
+    handleDetail (row) {
+      // this.detailShow = true
+      this.formTitle = '详情'
+      this.formShow = true
+      this.$nextTick(() => {
+        // this.$refs.ref_detail.initForm(row)
+        this.$refs.ref_form.initForm('detail', row.id)
+      })
+    },
+
+    handleAdd () {
+      this.formTitle = '新增'
+      this.formShow = true
+      this.$nextTick(() => {
+        this.$refs.ref_form.initForm('add', null)
+      })
+    },
+
+    handleEdit (row) {
+      this.formTitle = '修改'
+      this.formShow = true
+      this.$nextTick(() => {
+        this.$refs.ref_form.initForm('edit', row.id)
+      })
+    },
+
+    addFormCancle () {
+      this.formShow = false
+    },
+    addFormOk () {
+      this.formShow = false
+      this.loadTable()
+
+    },
+
+    async handleDelete (row) {
+
+      this.$confirm("确认删除?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.deleteActivity(row)
+        })
+        .catch(err => {
+          if (err == "cancel") {
+
+          }
+
+        });
+    },
+
+    async deleteActivity (row) {
+      const url = "/heart/icpartyactivity/delete"
+      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/delete"
+
+      let params = {
+        id: row.id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.$message({
+          type: "success",
+          message: "删除成功"
+        });
+
+        this.loadTable()
+      } else {
+        this.$message.error(msg)
+      }
+    },
+
+    //重置搜索条件
+    resetSearch () {
+      this.timeRange = []
+      this.formData = {
+        gridId: '',
+        unitName: '',
+        serviceMatter: '',
+        type: '',
+        contact: '',
+        contactMobile: ''
+      }
+      this.pageSize = 10
+      this.pageNo = 0
+      this.loadTable()
+    },
+
+    //导出表格
+    async handleExport () {
+      let title = '联建活动列表'
+
+      const url = "/heart/icpartyactivity/export"
+      let params = {
+        agencyId: this.agencyId,
+
+        ...this.formData
+
+      }
+
+      app.ajax.exportFilePost(
+        url,
+        params,
+        (data, rspMsg) => {
+
+          this.download(data, title + '.xls')
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg);
+        }
+      );
+
+    },
+
+    // 下载文件
+    download (data, fileName) {
+      if (!data) {
+        return
+      }
+
+      var csvData = new Blob([data])
+
+      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+        window.navigator.msSaveOrOpenBlob(csvData, fileName);
+      }
+      // for Non-IE (chrome, firefox etc.)
+      else {
+        var a = document.createElement('a');
+        document.body.appendChild(a);
+        a.style = 'display: none';
+        var url = window.URL.createObjectURL(csvData);
+        a.href = url;
+        a.download = fileName;
+        a.click();
+        a.remove();
+        window.URL.revokeObjectURL(url);
+      }
+
+    },
+
+    // 上传文件之前的钩子
+    beforeUpload (file) {
+      this.files = file;
+
+      const isText = file.type === 'application/vnd.ms-excel'
+      const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+
+      if (!isText && !isTextComputer) {
+        this.$message.error('请选择正确格式的文件')
+        return false
+      } else {
+        this.fileName = file.name;
+        return true
+      }
+
+    },
+    // 上传文件个数超过定义的数量
+    handleExceed (files, fileList) {
+      this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)
+    },
+
+    async uploadFile () {
+      this.loading = true
+
+      if (this.fileName == "") {
+        this.$message.warning('请选择要上传的文件！')
+        return false
+      }
+
+      //清空上传列表
+      this.$refs['upload'].clearFiles()
+
+      var url = '/heart/icpartyactivity/import'
+      let fileFormData = new FormData();
+      fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
+
+      const { data, code, msg } = await requestPost(url, fileFormData)
+      if (code === 0) {
+        this.$message({
+          type: "success",
+          message: "导入成功"
+        });
+
+        this.loadTable()
+      } else {
+        this.$message.error(msg)
+      }
+
+
+    },
+
+    handleTimeChange (time) {
+      if (time) {
+        const startTimeArray = util.dateFormatter(time[0], 'date').split('-')
+        const endTimeArray = util.dateFormatter(time[1], 'date').split('-')
+
+        this.formData.startTime = startTimeArray[0] + '-' + startTimeArray[1] + '-' + startTimeArray[2] + ' 00:00:00'
+        this.formData.endTime = endTimeArray[0] + '-' + endTimeArray[1] + '-' + endTimeArray[2] + ' 23:59:59'
+
+        // this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日'
+        // this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日'
+      } else {
+        this.formData.startTime = ''
+        this.formData.endTime = ''
+        // this.startTimeShow = ''
+        // this.endTimeShow = ''
+      }
+
+    },
+
+    handleSizeChange (val) {
+      this.pageSize = val
+      this.pageNo = 1
+      this.loadTable()
+    },
+    handleCurrentChange (val) {
+      this.pageNo = val
+      this.loadTable()
+    },
+
+    // 开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, // 是否锁定
+        text: '正在加载……', // 加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' // 背景颜色
+      })
+    },
+    // 结束加载动画
+    endLoading () {
+      // clearTimeout(timer);
+      if (loading) {
+        loading.close()
+      }
+    }
+  },
+  computed: {
+    tableHeight () {
+
+      return (this.clientHeight - 430)
+
+    },
+    rowHeight () {
+      return (this.clientHeight - 200) + 'px'
+    },
+    ...mapGetters(['clientHeight'])
+  },
+  watch: {
+
+  },
+  props: {
+
+  }
+}
+</script>
+<style lang="scss" scoped >
+.div_main {
+  width: 100%;
+}
+
+.div_search {
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 30px 20px 5px;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+}
+
+.item_width_1 {
+  width: 260px;
+}
+.item_width_2 {
+  width: 495px;
+}
+
+.div_table {
+  background: #ffffff;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  margin-top: 15px;
+  padding: 23px 30px 10px;
+
+  .table {
+    margin-top: 20px;
+  }
+}
+
+.div_btn {
+}
+
+.el-row {
+  /* margin-bottom: 20px; */
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  margin-right: 50px;
+}
+</style>