diff --git a/src/assets/img/shuju/elegant.png b/src/assets/img/shuju/elegant.png
new file mode 100644
index 00000000..f2a25fac
Binary files /dev/null and b/src/assets/img/shuju/elegant.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 54c903b5..30405144 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -289,6 +289,11 @@ router.beforeEach((to, from, next) => {
               name: "区域化党建",
               id: "5fwaefwaefawef588",
             },
+            {
+              url: "/visual/communityParty/elegant",
+              name: "党员风采",
+              id: "5fwaefwaefawef589",
+            }
           ],
         },
         {
diff --git a/src/views/modules/visual/communityParty/elegant.vue b/src/views/modules/visual/communityParty/elegant.vue
new file mode 100644
index 00000000..ac3073ac
--- /dev/null
+++ b/src/views/modules/visual/communityParty/elegant.vue
@@ -0,0 +1,625 @@
+<template>
+  <div class="warning-box">
+    <cpt-card class="card-wr">
+      <div class="card-title">
+        <img class="title-icon"
+             src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          党员风采&nbsp;&nbsp;
+          <!-- <el-cascader v-model="selectAgency"
+                       :options="propTree"
+                       :props="{ checkStrictly: true }"
+                       :show-all-levels="false"
+                       clearable
+                       @change="handleCascader">
+          </el-cascader> -->
+
+        </div>
+        <!-- <div class="second-select">
+          <el-select v-model="serviceMatter"
+                     placeholder="请选择"
+                     @change="handleSelectChange"
+                     @clear="handleSelectChange">
+            <el-option v-for="item in unitList"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="second-select">
+          <el-date-picker v-model="timeRange"
+                          type="daterange"
+                          range-separator="至"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期"
+                          prefix-icon="el-icon-caret-bottom"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          :clearable="false"
+                          :default-time="['00:00:00', '23:59:59']">
+          </el-date-picker>
+        </div> -->
+      </div>
+      
+      <div class="elegant-list">
+        <div v-for="(item, index) in tableData" :key="item.id" class="elegant-item" @click="handleLook(item)">
+          <div class="item-img">
+            <img v-if="item.imageList.length > 0" :src="item.imageList[0]" />
+            <img v-else src="../../../../assets/img/shuju/elegant.png" />
+          </div>
+          <div class="item-user">{{item.name}}（{{ item.gridName}}）</div>
+          <div class="item-cate">{{ item.categoryName }}</div>
+          <div class="item-desc">{{ item.mainDeed }}</div>
+        </div>
+        
+      </div>
+      <div class="pagination">
+          <el-pagination
+            :current-page="pageNo"
+            :page-size="pageSize"
+            background
+            layout="prev, pager, next"
+            @size-change="pageSizeChangeHandleNew"
+            @current-change="pageCurrentChangeHandleNew"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+    </cpt-card>
+    <elegant-info v-show="showedMoreInfo"
+                 :info="detailInfo"
+                 @close="showedMoreInfo = false" />
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+import elegantInfo from './elegantInfo.vue'
+
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    elegantInfo
+  },
+  data () {
+    return {
+
+      showedMoreInfo: false,
+      tableLoading: false,
+      tableData: [
+        // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
+      ],
+      detailId: '',
+      agencyId: '',
+      value2: '',
+      timeRange: '',
+      visibleLoading: true,
+      serviceMatter: 'all',
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      activeIndex: 0,
+      activeLevel: "1",
+      selectAgency: '',
+      unitList: [],
+      propTree: [],
+      cateInfo: [],
+      //地图相关数据
+      isfirstInit: true,//记录是否是首次加载地图
+      agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
+      
+      detailInfo: {}
+    };
+  },
+  async mounted () {
+    const { user } = this.$store.state
+    this.agencyId = user.agencyId
+    console.log('agencyId-------', this.agencyId)
+    this.initTime()
+    await nextTick(100);
+    await this.getAgencyList()
+    this.getList(this.agencyId)
+
+    await this.getWorkUserInfo()
+  },
+  watch: {
+    timeRange (val) {
+      console.log('val-www', val)
+      this.getList(this.agencyId);
+    }
+  },
+  methods: {
+
+    //具体人员列表
+    async getList (agencyId) {
+      this.visibleLoading = true
+
+      const url = "/resi/partymember/icpartymemberstyle/showlist"
+      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list"
+      let params = {
+        agencyId,
+        pageSize: this.pageSize,
+        pageNo: this.pageNo
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.total = data.total
+        this.tableData = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1
+          }
+        })
+      } else {
+        this.$message.error(msg)
+      }
+      this.visibleLoading = false
+    },
+    async getAgencyList () {
+      // const url = "/gov/org/customeragency/staffinagencylist";
+      // const url = '/gov/org/customeragency/agencygridtree'
+      const url = '/gov/org/customeragency/staffinagencylist'
+      // let params = {
+      //   agencyId: this.$store.state.user.agencyId,
+      // };
+      const { data, code, msg } = await requestPost(url);
+      if (code === 0) {
+        console.log('data-org----o', data)
+        let { agencyList, subAgencyList } = data
+        this.selectAgency = [`${agencyList.agencyId}-${agencyList.level}`]
+        let arr = []
+        agencyList.subAgencyList = subAgencyList
+        arr.push(agencyList)
+        this.propTree = arr && this.getTreeData(arr)
+
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    getTreeData (data) {
+      if (!Array.isArray(data)) return []
+      let arr = data.map(item => {
+        let _item = {}
+        if (item.subAgencyList) {
+          if (item.subAgencyList.length === 0) {
+            _item = {
+              label: item.agencyName,
+              value: item.agencyId + '-' + item.level,
+              level: item.level,
+              children: undefined
+            }
+          } else _item = {
+            label: item.agencyName,
+            value: item.agencyId + '-' + item.level,
+            level: item.level,
+            children: this.getTreeData(item.subAgencyList)
+          }
+        } else {
+          _item = {
+            label: item.agencyName,
+            value: item.agencyId + '-' + item.level,
+            level: item.level,
+          }
+        }
+        return _item
+      })
+      return arr
+    },
+    
+    
+    async getDetail (id) {
+
+      const url = "/heart/icpartyactivity/detail"
+      let params = {
+        id: id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.detailInfo = data
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    handleCascader (val) {
+      console.log('val-vvv', val)
+      if (val.length > 0) {
+        const _arr = val[val.length - 1].split('-')
+        const orgType = _arr[1] !== 'grid' ? 'agency' : 'grid'
+        this.agencyId = _arr[0]
+        this.getList(_arr[0])
+      }
+
+    },
+    initTime () {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      console.log('time-rtt', this.timeFormat(start), this.timeFormat(end))
+      this.timeRange = [this.timeFormat(start), this.timeFormat(end)]
+    },
+    timeFormat (date) {
+      if (!date || typeof date === 'string') {
+        return false
+      }
+      var y = date.getFullYear() //年
+      var m = date.getMonth() + 1 //月
+      if (m < 10) m = '0' + m
+      var d = date.getDate() //日
+      if (d < 10) d = '0' + d
+
+      return y + '-' + m + '-' + d + ' 00:00:00'
+    },
+
+    // 获取当前管理员信息
+    getWorkUserInfo () {
+      const url = '/epmetuser/customerstaff/staffbasicinfo'
+      let params = {}
+      window.app.ajax.post(
+        url,
+        params,
+        (data, rspMsg) => {
+          this.agencyInfo = data
+          if (!data.latitude) {
+            this.agencyInfo.latitude = 36.072227
+          }
+          if (!data.longitude) {
+            this.agencyInfo.longitude = 120.389455
+          }
+          if (!data.level) {
+            this.agencyInfo.level = 'street'
+          }
+
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg)
+        }
+      )
+
+    },
+    //点击项目
+    clickProject (feature) {
+      console.log('标注信息', feature.values_.properties)
+    },
+    async handleLook (val) {
+
+      this.detailId = val.id
+      this.detailInfo = val
+      // await this.getDetail(val.id)
+      this.showedMoreInfo = true
+    },
+
+    handleSelectChange (val) {
+      this.getList(this.agencyId);
+    },
+    pageSizeChangeHandleNew (val) {
+      // this.pageNo = 1;
+      this.pageSize = val;
+      this.getList(this.agencyId);
+    },
+    pageCurrentChangeHandleNew (val) {
+      this.pageNo = val;
+      this.getList(this.agencyId);
+    },
+  }
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.warning-box {
+  display: flex;
+  .card-wr {
+    flex: 1;
+  }
+  .card-wr:last-child {
+    margin-left: 20px;
+  }
+  ::v-deep .table-body {
+    overflow: auto;
+    &::-webkit-scrollbar {
+      width: 8px;
+      // background: linear-gradient(270deg, #0063FE, #0095FF);
+    }
+
+    &::-webkit-scrollbar-corner,
+      /* 滚动条角落 */
+    &::-webkit-scrollbar-thumb,
+    &::-webkit-scrollbar-track {
+      /*滚动条的轨道*/
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-corner,
+    &::-webkit-scrollbar-track {
+      /* 滚动条轨道 */
+
+      background: rgba(12, 129, 254, 0.24);
+      // box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      /* 滚动条手柄 */
+      background: linear-gradient(270deg, #0063fe, #0095ff);
+    }
+  }
+}
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  .title-label {
+    font-size: 20px;
+    font-weight: 800;
+    ::v-deep .el-input {
+      width: 180px;
+      margin-left: 10px;
+      .el-input__inner {
+        font-size: 18px;
+        // font-weight: 800;
+        color: #fff;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-down::before {
+        content: "\e790";
+      }
+    }
+  }
+  ::v-deep .el-dropdown {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 800;
+  }
+}
+.second-title {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  .second-title-label {
+    position: relative;
+    padding-left: 40px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+  }
+  .second-title-label::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 20px;
+    width: 12px;
+    height: 12px;
+    box-sizing: border-box;
+    margin-top: -6px;
+    background: #2865fa;
+    border-radius: 50%;
+  }
+}
+.second-select {
+  margin: 0 10px 0 10px;
+  ::v-deep .el-input {
+    width: 180px;
+    height: 36px;
+    .el-input__inner {
+      height: 100%;
+      padding: 0 10px;
+      color: #fff;
+      line-height: 36px;
+      background: #06186d;
+      border: 1px solid #1a64cc;
+    }
+
+    .el-icon-arrow-up:before {
+      content: "\e78f";
+    }
+    // .el-select__caret:before {
+    //   content: '\E790'
+    // }
+  }
+  ::v-deep .el-date-editor {
+    width: 360px;
+    position: relative;
+    background: #06186d;
+    border: 1px solid #1a64cc;
+    .el-range-input {
+      color: #fff;
+      background: #06186d;
+    }
+    .el-range-separator {
+      color: #fff;
+    }
+    .el-range__icon {
+      position: absolute;
+      right: 5px;
+      // float: right;
+    }
+    .el-input__prefix {
+      left: unset;
+      right: 5px;
+    }
+  }
+}
+.second-select:last-child {
+  margin-left: 0;
+}
+.box-wr {
+  display: flex;
+  box-sizing: border-box;
+  .box-left {
+    flex-shrink: 0;
+    display: flex;
+    .box-left-item {
+      .box-label {
+        font-size: 16px;
+        color: rgba(255, 255, 255, 0.72);
+      }
+      .box-num {
+        font-size: 32px;
+        font-weight: bold;
+        color: #fff;
+      }
+    }
+  }
+  .box-right {
+    flex: 1;
+    .box-map {
+      height: 400px;
+      // border: 1px solid #2865fa;
+
+      .map {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+  .box-left-w400 {
+    flex-wrap: wrap;
+    width: 400px;
+    box-sizing: border-box;
+    padding-top: 60px;
+    padding-left: 100px;
+    .box-left-item {
+      width: 50%;
+    }
+  }
+}
+.box-wr-400 {
+  height: 400px;
+  .box-left {
+    width: 300px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .box-left-item:last-child {
+      margin-top: 100px;
+    }
+  }
+}
+
+.map-tips {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding-top: 10px;
+  padding-bottom: 20px;
+  .map-tips-item {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    margin-right: 40px;
+    .map-tips-icon {
+      width: 32px;
+      height: 32px;
+      box-sizing: border-box;
+      margin-right: 10px;
+      // background: #DD2719;
+      // border-radius: 2px;
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .map-tips-label {
+      font-size: 16px;
+      color: #fff;
+    }
+  }
+}
+
+.elegant-list {
+  width: 100%;
+  max-height: 890px;
+  box-sizing: border-box;
+  display: flex;
+  // align-items: center;
+  flex-wrap: wrap;
+  padding: 30px 0 20px;
+  .elegant-item {
+    width: 19%;
+    margin-right: 20px;
+    margin-bottom: 36px;
+    box-sizing: border-box;
+    .item-img {
+      width: 100%;
+      height: 230px;
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .item-user {
+      margin-top: 20px;
+      font-size: 20px;
+      font-weight: bold;
+      color: #FFFFFF;
+    }
+    .item-cate {
+      margin-top: 16px;
+      height: 16px;
+      font-size: 16px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 24px;
+    }
+    .item-desc {
+      margin-top: 20px;
+      width: 100%;
+      font-size: 18px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 24px;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
+  }
+  .elegant-item:nth-child(5n) {
+    margin-right: 0;
+  }
+
+}
+.pagination {
+  text-align: right;
+  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background: #0266d1;
+    color: #000d3f;
+  }
+
+  /deep/ .el-pagination .el-pager li {
+    background: #002e74;
+  }
+
+  /deep/ .el-pagination .btn-prev {
+    background: #002e74;
+  }
+
+  /deep/ .el-pagination .btn-next {
+    background: #002e74;
+  }
+}
+
+</style>
diff --git a/src/views/modules/visual/communityParty/elegantInfo.vue b/src/views/modules/visual/communityParty/elegantInfo.vue
new file mode 100644
index 00000000..809716b9
--- /dev/null
+++ b/src/views/modules/visual/communityParty/elegantInfo.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="m-pop">
+    <div class="wrap">
+      <cpt-card>
+        <div class="title">
+          <img src="@/assets/img/shuju/title-tip.png" />
+          <span>党员风采</span>
+        </div>
+
+        <div class="btn-close" @click="handleClose">
+          <img src="@/assets/img/shuju/people/close.png" />
+        </div>
+        <!-- <div class="list-title">需求内容</div> -->
+        <div class="list-wr">
+          <div class="list">
+            
+            <!-- <div class="item-desc">
+              <span>市北区同德花园小区物业管理服务，公司的同志每天对该小区 公共部位，喷洒消毒液进行消毒。为杀灭新型冠状病毒，近几 天以来，市北区</span>
+            </div> -->
+            <div class="item">
+              <span class="item-field">所属网格：</span>
+              <span>{{ info.gridName }}</span>
+            </div>
+            <div class="item">
+              <span class="item-field">分类类别：</span>
+              <span>{{ info.categoryName }}</span>
+            </div>
+            <div class="item">
+              <span class="item-field">党员姓名：</span>
+              <span>{{ info.name }}</span>
+            </div>
+            <div class="item">
+              <span class="item-field">主要事迹：</span>
+              <span class="item-content">{{info.mainDeed}}</span>
+            </div>
+            <div class="item">
+              <span class="item-field">风采图片：</span>
+              <div class="item-imgs">
+                <!-- <img v-for="(item, index) in info.imageList" :key="index" :src="item" /> -->
+                <el-image 
+                  v-for="(item, index) in info.imageList" :key="index"
+                  style="width: 200px; height: 200px;margin-right: 10px;"
+                  :src="item" 
+                  :preview-src-list="info.imageList">
+                </el-image>
+              </div>
+              <!-- <span>{{ info.peopleCount }}</span> -->
+            </div>
+            
+          </div>
+          <!-- <div class="list">
+            <div class="item">
+              <span class="item-field">活动结果：</span>
+              <span class="item-content" v-html="info.result"></span>
+            </div>
+          </div> -->
+        </div>
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import analyse from '../cpts/analyse.vue'
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  name: "dialogInfo",
+  props: {
+    userId: {
+      type: String,
+      default: "",
+    },
+    gridName: {
+      type: String,
+      default: "",
+    },
+    info: Object
+  },
+
+  components: {
+    cptCard,
+    analyse
+  },
+
+  data() {
+    return {
+      fieldList: [],
+      groupList: [],
+      groupIndex: 0,
+      startGroupIndex: 0,
+      // info: {},
+      allInfo: {},
+      
+    }
+  },
+
+  
+  mounted() {
+  },
+
+  methods: {
+    handleClose() {
+      this.$emit("close");
+    },
+  }
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
+<style lang="scss" scoped>
+.m-pop {
+  .wrap {
+    .list {
+      display: block;
+      // width: 50%;
+      .item {
+        display: flex;
+        width: 100%;
+        box-sizing: border-box;
+        margin-top: 0;
+        margin-bottom: 15px;
+        font-size: 16px;
+        cursor: pointer;
+        .item-field {
+          // width: 100px;
+          flex-shrink: 0;
+        }
+        .item-content {
+          width: 100%;
+          max-height: 420px;
+          overflow-y: auto;
+          &::-webkit-scrollbar {
+            width: 8px;
+            // background: linear-gradient(270deg, #0063FE, #0095FF);
+          }
+
+          &::-webkit-scrollbar-corner,
+            /* 滚动条角落 */
+          &::-webkit-scrollbar-thumb,
+          &::-webkit-scrollbar-track {      /*滚动条的轨道*/
+            border-radius: 4px;
+          }
+
+          &::-webkit-scrollbar-corner,
+          &::-webkit-scrollbar-track {
+            /* 滚动条轨道 */
+            
+            background: rgba(12, 129, 254, .24);
+            // box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
+          }
+
+          &::-webkit-scrollbar-thumb {
+            /* 滚动条手柄 */
+            background: linear-gradient(270deg, #0063FE, #0095FF);
+          }
+        }
+        ::v-deep p {
+          margin: 0;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .item-imgs {
+          width: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          
+          img {
+            display: block;
+            width: 240px;
+            height: 240px;
+            margin-right: 10px;
+          }
+        }
+      }
+      .item-desc {
+        font-size: 16px;
+        margin-bottom: 10px;
+        line-height: 24px;
+      }
+    }
+  }
+  .list-title {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 20px 0 10px 62px;
+      font-size: 20px;
+      cursor: pointer;
+    }
+}
+.list-wr {
+  display: flex;
+  padding: 0 32px;
+  
+}
+
+</style>