diff --git a/src/assets/icon/线@2x.png b/src/assets/icon/xjph-table.png
similarity index 100%
rename from src/assets/icon/线@2x.png
rename to src/assets/icon/xjph-table.png
diff --git a/src/components/screen-custom-table/index.vue b/src/components/screen-custom-table/index.vue
index c24279a..06a1995 100644
--- a/src/components/screen-custom-table/index.vue
+++ b/src/components/screen-custom-table/index.vue
@@ -42,6 +42,8 @@
                  v-for="(td, order) in item"
                  :key="order"
                  v-html="td"></div>
+            <img v-if="showTableLine"
+                 src="./../../assets/icon/xjph-table.png" />
           </div>
         </div>
       </li>
@@ -66,6 +68,10 @@ export default {
     }
   },
   props: {
+    showTableLine: {
+      type: Boolean,
+      default: false
+    },
     headerList: {
       type: Array,
       required: true,
@@ -264,6 +270,7 @@ li {
           align-items: center;
           justify-content: space-around;
           margin-top: 19px;
+          position: relative;
 
           .table-td {
             padding: 0 5px;
@@ -287,6 +294,12 @@ li {
           // &:hover {
           //   background: rgba(255, 255, 255, 0.1);
           // }
+          > img {
+            position: absolute;
+            bottom: 0px;
+            width: 591px;
+            height: 10px;
+          }
         }
       }
     }
diff --git a/src/components/screen-echarts-frame/index.vue b/src/components/screen-echarts-frame/index.vue
new file mode 100644
index 0000000..a132d56
--- /dev/null
+++ b/src/components/screen-echarts-frame/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="screenEchartsFrame"
+       ref="screenEchartsFrame"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'screen-echarts-frame',
+  data () {
+    return {
+      myChart: ''
+    }
+  },
+  props: {
+    chartMethod: {
+      type: Function
+    }
+  },
+  mounted () {
+    this.initChart()
+    window.onresize = () => {
+      this.myChart.resize()
+    }
+  },
+  beforeDestroy () {
+    // 销毁echarts实例对象
+    if (this.myChart) this.myChart.dispose()
+  },
+  watch: {},
+  methods: {
+    initChart () {
+      this.$nextTick(() => {
+        const dom = this.$refs.screenEchartsFrame
+        this.myChart = echarts.init(dom)
+        // this.myChart.setOption(this.chartMethod())
+        this.$emit('myChartMethod', this.myChart)
+      })
+    },
+    // 配置option
+    setOption (option) {
+      this.myChart.setOption(option)
+    },
+    // 获取option
+    getOption () {
+      if (this.myChart) {
+        return this.myChart.getOption()
+      } else {
+        return null
+      }
+    },
+    //
+    resize () {
+      if (this.myChart) {
+        this.myChart.resize()
+      }
+    },
+    clear () {
+      if (this.myChart) {
+        this.myChart.clear()
+      }
+    },
+    showLoading () {
+      if (this.myChart) {
+        this.$nextTick(() => {
+          this.myChart.showLoading({
+            text: '',
+            color: '#29cdff',
+            textColor: '#29cdff',
+            maskColor: 'rgba(255, 255, 255, 0)',
+            zlevel: 0
+          })
+        })
+      }
+    },
+    hideLoading () {
+      if (this.myChart) {
+        this.myChart.hideLoading()
+      }
+    },
+    // 启动动画时使用
+    tooltipAnimate (chart, length) {
+      // 清除上一次动画
+      this.timeTicket && clearInterval(this.timeTicket)
+      const count = 0
+      // 启动动画
+      this._action(chart, count, length)
+      chart && // 移除动画
+        chart.on('mouseover', params => {
+          this._cleanAction(chart, params)
+        })
+      // 重写启动动画
+      chart &&
+        chart.on('mouseout', () => {
+          this._action(chart, count, length)
+        })
+    },
+    // tooltip动画action
+    _action (chart, count, length) {
+      this.timeTicket && clearInterval(this.timeTicket)
+      this.timeTicket = setInterval(() => {
+        if (!chart) {
+          clearInterval(this.timeTicket)
+          return
+        }
+        chart &&
+          chart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0
+          })
+        chart &&
+          chart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: count % length
+          })
+        chart &&
+          chart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: count % length
+          })
+        count++
+      }, 1000 * 3)
+    },
+    _cleanAction (chart, params) {
+      this.timeTicket && clearInterval(this.timeTicket)
+      if (!chart) {
+        clearInterval(this.timeTicket)
+        return
+      }
+      chart &&
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: 0
+        })
+      chart &&
+        chart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: 0,
+          dataIndex: params.dataIndex
+        })
+      chart &&
+        chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: params.dataIndex
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.screenEchartsFrame {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/data/index.js b/src/data/index.js
index afbc848..56c03ba 100644
--- a/src/data/index.js
+++ b/src/data/index.js
@@ -196,3 +196,80 @@ export function loadYtalList() {
 
   return ytalList
 }
+
+export function loadXjphList() {
+  let xjphList = [
+    {
+      no: '1',
+      unit: '敦化路社区',
+      dys: 460,
+      hts: 1960,
+      yts: 1376,
+      sqs: 8760,
+      jal: '92.5%',
+      myl: '98.1%'
+    },
+    {
+      no: '2',
+      unit: '敦化路社区',
+      dys: 460,
+      hts: 1960,
+      yts: 1376,
+      sqs: 8760,
+      jal: '92.5%',
+      myl: '98.1%'
+    },
+    {
+      no: '3',
+      unit: '敦化路社区',
+      dys: 460,
+      hts: 1960,
+      yts: 1376,
+      sqs: 8760,
+      jal: '92.5%',
+      myl: '98.1%'
+    },
+    {
+      no: '4',
+      unit: '敦化路社区',
+      dys: 460,
+      hts: 1960,
+      yts: 1376,
+      sqs: 8760,
+      jal: '92.5%',
+      myl: '98.1%'
+    },
+    {
+      no: '5',
+      unit: '敦化路社区',
+      dys: 460,
+      hts: 1960,
+      yts: 1376,
+      sqs: 8760,
+      jal: '92.5%',
+      myl: '98.1%'
+    },
+    {
+      no: '6',
+      unit: '敦化路社区',
+      dys: 460,
+      hts: 1960,
+      yts: 1376,
+      sqs: 8760,
+      jal: '92.5%',
+      myl: '98.1%'
+    },
+    {
+      no: '7',
+      unit: '敦化路社区',
+      dys: 460,
+      hts: 1960,
+      yts: 1376,
+      sqs: 8760,
+      jal: '92.5%',
+      myl: '98.1%'
+    }
+  ]
+
+  return xjphList
+}
diff --git a/src/style/right2.scss b/src/style/right2.scss
new file mode 100644
index 0000000..f001e7d
--- /dev/null
+++ b/src/style/right2.scss
@@ -0,0 +1,148 @@
+.right2 {
+  margin-left: 12px;
+}
+.b-dyxf {
+  height: 328px;
+
+  .dyxf-main {
+    position: relative;
+
+    .dyxf-pie {
+      position: absolute;
+      top: 45px;
+      left: 15px;
+
+      .pie {
+        width: 200px;
+        height: 180px;
+      }
+
+      .pie-title {
+        font-size: 18px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        color: #ffffff;
+        margin-top: -10px;
+        margin-left: 47px;
+      }
+    }
+
+    .dyxf-static {
+      position: absolute;
+      top: 60px;
+      left: 235px;
+
+      .dyxf-static-row {
+        display: flex;
+        justify-content: space-around;
+
+        .static-item {
+          .item-title {
+            font-size: 16px;
+            font-family: Alibaba PuHuiTi;
+            font-weight: 400;
+            color: #ffffff;
+            text-shadow: 0px 2px 4px #004189;
+          }
+
+          .item-num {
+            margin-top: 10px;
+            display: flex;
+            align-items: flex-end;
+            background-image: url('./../assets/icon/dyxf-bg.png');
+            background-size: 100% 100%;
+            padding-top: 5px;
+
+            .num-left {
+              line-height: 30px;
+              margin-left: 20px;
+              font-size: 24px;
+              font-family: Arial;
+              font-weight: bold;
+              color: #ffffff;
+            }
+
+            .num-right {
+              margin-bottom: 3px;
+              margin-left: 12px;
+              font-size: 16px;
+              font-family: Arial;
+              font-weight: bold;
+              color: #ffb10a;
+              text-shadow: 0px 2px 4px #004189;
+            }
+          }
+        }
+        .item2 {
+          margin-left: 25px;
+        }
+      }
+      .row2 {
+        margin-top: 30px;
+      }
+    }
+  }
+}
+.b-dyqz {
+  height: 327px;
+
+  .dyqz-main {
+    .line {
+      width: 600px;
+      height: 270px;
+    }
+  }
+}
+
+.b-xjph {
+  height: 269px;
+
+  .table {
+    box-sizing: border-box;
+    padding: 17px 11px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    .screen-custom-table {
+      ::v-deep ul {
+        .table-body .scroll-view .table-tr + .table-tr {
+          border: none;
+        }
+        .table-header {
+          font-size: 16px;
+          font-family: PingFang-SC-Bold;
+        }
+        .table-body {
+          height: 199px;
+          .table-tr {
+            margin-top: 12px;
+            // background-image: url('./../assets/icon/tableTdBg.png');
+            // background-size: 100% 100%;
+          }
+          // .table-tr:nth-child(2n) {
+          //   background: rgba(11, 68, 135, 0.1);
+          //   &:hover {
+          //     .table-td {
+          //       color: #fff !important;
+          //     }
+          //   }
+          // }
+          // .table-tr:nth-child(2n + 1) {
+          //   &:hover {
+          //     .table-td {
+          //       color: #fff !important;
+          //     }
+          //   }
+          // }
+          // .table-tr {
+          //   .table-td:nth-child(2) {
+          //     white-space: nowrap;
+          //     overflow: hidden;
+          //     text-overflow: ellipsis;
+          //   }
+          // }
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/screenRight/lineOption.js b/src/views/screenRight/lineOption.js
new file mode 100644
index 0000000..ed90a57
--- /dev/null
+++ b/src/views/screenRight/lineOption.js
@@ -0,0 +1,127 @@
+import * as echarts from 'echarts'
+
+export function lineOption() {
+  return {
+    color: ['#FFB10A', '#71F3FB'],
+    title: {
+      // text: 'Gradient Stacked Area Chart'
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    legend: {
+      // data: ['党员建群', '党成员'],
+      // color: ['#FFB10A', '#71F3FB'],
+      data: [
+        { color: '#FFB10A', name: '党成员' },
+        { color: '#71F3FB', name: '党员建群' }
+      ],
+      icon: 'rect',
+      itemWidth: 12, // 长方形宽度
+      itemHeight: 4, // 长方形高度
+      textStyle: {
+        color: '#FFFFFF'
+      }
+    },
+
+    grid: {
+      left: '6%',
+      right: '6%',
+      bottom: '10%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: [
+          '敦化路街道',
+          '南宁路街道',
+          '洛阳路街道',
+          '华阳路街道',
+          '黄台路街道'
+        ],
+        offset: 5,
+        axisLine: {
+          lineStyle: {
+            color: '#B8D3F1'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        offset: 5,
+        axisLine: {
+          lineStyle: {
+            color: '#B8D3F1'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        name: '党成员',
+        type: 'line',
+
+        smooth: true,
+        lineStyle: {
+          width: 0
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(0, 255, 246,1)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(0, 210, 255,0.4)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [120, 282, 111, 234, 220]
+      },
+      {
+        name: '党员建群',
+        type: 'line',
+
+        smooth: false,
+        lineStyle: {
+          width: 3,
+          color: '#ffb10a'
+        },
+        showSymbol: false,
+        // areaStyle: {
+        //   opacity: 0.8,
+        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //     {
+        //       offset: 0,
+        //       color: '#ffb10a'
+        //     },
+        //     {
+        //       offset: 1,
+        //       color: '#bf9e58'
+        //     }
+        //   ])
+        // },
+        emphasis: {
+          focus: 'series'
+        },
+        data: [50, 20, 40, 10, 60]
+      }
+    ]
+  }
+}
diff --git a/src/views/screenRight/pieOption.js b/src/views/screenRight/pieOption.js
new file mode 100644
index 0000000..c18699b
--- /dev/null
+++ b/src/views/screenRight/pieOption.js
@@ -0,0 +1,99 @@
+import * as echarts from 'echarts'
+
+export function pieOption() {
+  return {
+    title: {
+      text: '0',
+      top: '42%',
+      left: 'center',
+      textStyle: {
+        width: '100%',
+        fontSize: 30,
+        fontStyle: 'italic',
+        color: '#00E0FB'
+      },
+      itemGap: 30
+    },
+    tooltip: {
+      show: false
+    },
+
+    series: [
+      //外环
+      {
+        type: 'pie',
+        // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
+        startAngle: 0,
+        hoverAnimation: false,
+        // tooltip: {
+        // },
+        radius: ['70%', '72%'],
+        label: {
+          normal: {
+            show: false
+          }
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: 360,
+            itemStyle: {
+              normal: {
+                color: echarts.graphic.LinearGradient(0, 0, 1, 1, [
+                  { offset: 0, color: '#C7E9FF' },
+                  { offset: 1, color: '#00354B' }
+                ])
+              }
+            }
+          }
+        ]
+      },
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['45%', '60%'],
+        startAngle: -90,
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 40,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          {
+            value: 0,
+            itemStyle: {
+              normal: {
+                color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#C7E9FF' },
+                  { offset: 1, color: '#3EDAF7 ' }
+                ])
+              }
+            }
+          },
+          {
+            value: 0,
+            itemStyle: {
+              normal: {
+                color: 'rgba(34, 138, 255, 0.27)'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/src/views/screenRight/right2.vue b/src/views/screenRight/right2.vue
index c2bd9e2..49e76e6 100644
--- a/src/views/screenRight/right2.vue
+++ b/src/views/screenRight/right2.vue
@@ -1,38 +1,220 @@
 <template>
   <div class="bg-content right2">
-    <div class='b-dyxfmf'>
+    <div class='b-dyxf'>
       <screen-title :titleName="'党员先锋模范'"></screen-title>
+      <div class="dyxf-main">
+        <div class="dyxf-pie">
+          <screen-echarts-frame class="pie"
+                                @myChartMethod="pieInitOk"
+                                ref="pieChart"></screen-echarts-frame>
+          <div class="pie-title">{{'党员参与议题'}}</div>
+        </div>
+        <div class="dyxf-static">
+          <div class='dyxf-static-row'>
+            <div class="static-item">
+              <div class="item-title">{{'党员发布话题'}}</div>
+              <div class="item-num">
+                <div class="num-left">{{'53,788'}}</div>
+                <div class="num-right">{{'82.21%'}}</div>
+
+              </div>
+            </div>
+            <div class="static-item item2">
+              <div class="item-title">{{'党员发布议题'}}</div>
+              <div class="item-num">
+                <div class="num-left">{{'22,024'}}</div>
+                <div class="num-right">{{'24.14%'}}</div>
+
+              </div>
+            </div>
+          </div>
+          <div class='dyxf-static-row row2'>
+            <div class="static-item">
+              <div class="item-title">{{'议题转诉求'}}</div>
+              <div class="item-num">
+                <div class="num-left">{{'5,302'}}</div>
+                <div class="num-right">{{'66.74%'}}</div>
+
+              </div>
+            </div>
+            <div class="static-item item2">
+              <div class="item-title">{{'解决诉求'}}</div>
+              <div class="item-num">
+                <div class="num-left">{{'5,136'}}</div>
+                <div class="num-right">{{'67.11%'}}</div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class='b-dylxqz'>
+    <div class='b-dyqz'>
       <screen-title :titleName="'党员联系群众'"></screen-title>
+      <div class="dyqz-main">
+
+        <screen-echarts-frame class="line"
+                              @myChartMethod="lineInitOk"
+                              ref="lineChart"></screen-echarts-frame>
+
+      </div>
     </div>
     <div class='b-xjph'>
       <screen-title :titleName="'先进排行榜单'"></screen-title>
+      <div class="table">
+
+        <screen-custom-table :headerColor="'#BDE8FF'"
+                             :headerHeight="'36px'"
+                             :bodyTdColor="'#FFFFFF'"
+                             :bodyTdFontSize="'18px'"
+                             :tableHeight="104"
+                             :showTableLine="true"
+                             :dataList="dataListResult"
+                             :isChangeColor=false
+                             :rowColor="'rgba(11,68,135,0.16)'"
+                             :noData="noData"
+                             :pageSize="pageSize"
+                             :headerList="headerList">
+        </screen-custom-table>
+
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-
-
+import { pieOption } from './pieOption.js'
+import { lineOption } from './lineOption.js'
+import { mapGetters } from 'vuex'
+import { loadXjphList } from './../../data/index'
 export default {
   name: "screen-right2",
   data () {
     return {
+      showNoData: false,
+      timer: null,
+      pieChart: '',
+      pieOption: {},
+      pieInitState: false,
+      lineChart: '',
+      lineOption: {},
+      lineInitState: false,
+
+      headerList: [{ title: '排名', width: '400px' }, { title: '单位', width: '1000px' }, '党员数', '话题数', '议题数', '诉求数', { title: '结案率', color: '#00E099' }, { title: '满意率', color: '#FFB400' }],
+      dataList: [],
+      dataListResult: [],
+      noData: false,
+      pageSize: 5
 
     }
+  },
+  computed: {
+    ...mapGetters(['shibeiAId'])
+  },
+  watch: {
+    shibeiAId: {
+      handler () {
+        if (this.shibeiAId !== '') {
+
+          this.getData()
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted () {
+    this.dataList = loadXjphList()
+    this.$nextTick(function () {
+
+      this.initList()
+    });
+
+  },
+  methods: {
+    initList () {
+      this.dataListResult = []
+      this.dataList.forEach(element => {
+        this.dataListResult.push([
+          element.no,
+          element.unit,
+          element.dys,
+          element.hts,
+          element.yts,
+          element.sqs,
+          element.jal,
+          element.myl,
+        ])
+      });
+
+      console.log(this.dataListResult)
+    },
+    getData () {
+      this.getPie()
+      this.getLine()
+    },
+    pieInitOk () {
+      this.pieInitState = true
+    },
+    lineInitOk () {
+      this.lineInitState = true
+    },
+    getPie () {
+      if (this.pieInitState) {
+        this.getPieChart()
+      } else {
+        setTimeout(() => {
+          this.getPie()
+        }, 500)
+      }
+    },
+    // 获取饼状图
+    async getPieChart () {
+
+      this.$refs.pieChart.clear()
+
+      // 获取pieChart配置
+      this.pieOption = pieOption()
+      const val1 = 80
+      const val2 = 20
+      this.pieOption.title.text = `84%`
+
+      this.pieOption.series[1].data[0].value = 80
+      this.pieOption.series[1].data[1].value = 20
+
+
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.pieChart.setOption(this.pieOption)
+    },
+    getLine () {
+      if (this.lineInitState) {
+        this.getLineChart()
+      } else {
+        setTimeout(() => {
+          this.getLine()
+        }, 500)
+      }
+    },
+    // 获取饼状图
+    async getLineChart () {
+
+      this.$refs.lineChart.clear()
+
+      // // 获取pieChart配置
+      this.lineOption = lineOption()
+      // const val1 = 80
+      // const val2 = 20
+      // this.lineOption.title.text = `84%`
+
+      // this.lineOption.series[1].data[0].value = 80
+      // this.lineOption.series[1].data[1].value = 20
+
+
+      // // this.$refs.pieChart.hideLoading()
+      this.$refs.lineChart.setOption(this.lineOption)
+    },
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.right2 {
-  margin-left: 12px;
-}
-.b-dyxfmf {
-  height: 328px;
-}
-.b-dylxqz {
-  height: 327px;
-}
+<style src="style/right2.scss" lang="scss" scoped>
 </style>
\ No newline at end of file