diff --git a/src/assets/images/shuju/renfang/jm-logo.png b/src/assets/images/shuju/renfang/jm-logo.png
new file mode 100644
index 000000000..73ebb2541
Binary files /dev/null and b/src/assets/images/shuju/renfang/jm-logo.png differ
diff --git a/src/views/dataBoard/renfang/cpts/jmBarOption.js b/src/views/dataBoard/renfang/cpts/jmBarOption.js
new file mode 100644
index 000000000..1c24850ab
--- /dev/null
+++ b/src/views/dataBoard/renfang/cpts/jmBarOption.js
@@ -0,0 +1,140 @@
+import * as echarts from 'echarts'
+export function barOption () {
+
+  return {
+    title: {
+      text: '单位（人）',
+      left: 5,
+      textStyle: {
+      
+        fontSize: 14,
+        color: " rgba(255,255,255,0.65)",
+        fontWeight: 400,
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    // legend: {},
+    grid: {
+      top:40,
+      left: '3%',
+      right: '4%',
+      bottom: 19,
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisLine: {
+          lineStyle: {
+            color:'rgba(255,255,255,0.15)',
+            width: 1, 
+            type: 'solid' 
+          }
+        },
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,0.85)',  //更改坐标轴文字颜色
+            fontSize : 12      //更改坐标轴文字大小
+          }
+        },
+
+        data: []
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        max : 1000,
+        splitNumber : 5,
+        splitLine: { 
+          show: true, 
+          lineStyle:{ 
+            color:'rgba(255,255,255,0.15)',
+            width: 1, 
+            type: 'solid' 
+          } 
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,0.85)',  //更改坐标轴文字颜色
+            fontSize : 12      //更改坐标轴文字大小
+          }
+        },
+      }
+    ],
+    series: [
+  
+      {
+        name: '常住人口',
+        type: 'line',
+        stack: 'Total',
+        barWidth:12,
+        emphasis: {
+          focus: 'series'
+        },
+        itemStyle: {
+          normal: {
+              color: "#FFAA00", //图例颜色
+              borderWidth: 2,
+              borderColor: "#FFAA00",
+              lineStyle: { color: "#FFAA00", width: 1 }
+          }
+        },
+
+        areaStyle: {
+          normal: {
+              // 渐变填充色（线条下半部分）
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#FFAA00" },
+                  { offset: 1, color: "rgba(255,170,0,0)" }
+              ])
+          }
+        },
+
+        data: []
+      },
+      {
+        name: '流动人口',
+        type: 'line',
+        barWidth:12,
+        stack: 'Total',
+        emphasis: {
+          focus: 'series'
+        },
+        itemStyle: {
+          normal: {
+              color: "#1A95FF", //图例颜色
+              borderWidth: 2,
+              borderColor: "#1A95FF",
+              lineStyle: { color: "#1A95FF", width: 1 }
+          }
+        },
+
+        areaStyle: {
+          normal: {
+              // 渐变填充色（线条下半部分）
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#1A95FF" },
+                  { offset: 1, color: "rgba(255,170,0,0)" }
+              ])
+          }
+        },
+        data: []
+      },
+    
+      
+     
+    ]
+
+  }
+}
diff --git a/src/views/dataBoard/renfang/cpts/jmPieOption.js b/src/views/dataBoard/renfang/cpts/jmPieOption.js
new file mode 100644
index 000000000..99480650b
--- /dev/null
+++ b/src/views/dataBoard/renfang/cpts/jmPieOption.js
@@ -0,0 +1,90 @@
+import * as echarts from 'echarts'
+export function pieOption() {
+  const center = ["50%", "170px"];
+  return {
+    title: {
+      text: "0",
+      top: 45,
+      left: "center",
+      textStyle: {
+        width: "100%",
+        fontSize: 24,
+        color: "#FFFFFF",
+        fontWeight: 400,
+      },
+      itemGap: 5,
+      // subtext: "总数",
+      // subtextStyle: {
+      //   fontSize: 20,
+      //   color: "#fff",
+      //   fontWeight: 400,
+      // },
+    },
+    tooltip: {
+      show: false,
+    },
+    // legend: {
+    // top: 350,
+    // bottom: 0,
+    // itemWidth: 20,
+    // itemHeight: 10,
+    // textStyle: {
+    //   color: '#D2E7FF',
+    //   fontSize: 16,
+    //   lineHeight: 20,
+    // },
+
+    // },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['60%', '90%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        // emphasis: {
+        //   label: {
+        //     show: true,
+        //     fontSize: 40,
+        //     fontWeight: 'bold'
+        //   }
+        // },
+        labelLine: {
+          show: false
+        },
+        itemStyle: {
+          normal: {
+              color: (list) => {
+                // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
+                var colorList = [
+                  {
+                      colorStart:'#00023A',
+                      colorEnd:'#6FDEFF'                     
+                  },
+                  {
+                      colorStart:'#00023A',
+                      colorEnd:'#FFAA00'
+                  },
+                 
+                 
+                ]
+                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
+                    offset: 0,
+                    color: colorList[list.dataIndex]['colorStart']
+                }, {
+                    offset: 1,
+                    color: colorList[list.dataIndex]['colorEnd']
+                }])                                    
+              }
+          }
+      },
+
+        data: [
+        ]
+      }
+    ]
+  };
+}
diff --git a/src/views/dataBoard/renfang/cpts/jmgl.vue b/src/views/dataBoard/renfang/cpts/jmgl.vue
index edaf98176..747f610a9 100644
--- a/src/views/dataBoard/renfang/cpts/jmgl.vue
+++ b/src/views/dataBoard/renfang/cpts/jmgl.vue
@@ -1,9 +1,107 @@
 <template>
-  <div>房屋概览</div>
+  <div>
+    <div class="main">
+      <div class="g-pie">
+        <div class="pie-left">
+          <screen-echarts-frame class=""
+                                @myChartMethod="pieInitOk"
+                                ref="pieChart"></screen-echarts-frame>
+        </div>
+        <div class="pie-legend">
+          <div class="item">
+            <div class="item-logo logo1"></div>
+            <div class="item-name">常住人口</div>
+          </div>
+          <div class="item">
+            <div class="item-logo logo2"></div>
+            <div class="item-name">流动人口</div>
+          </div>
+
+        </div>
+        <div class="pie-right">
+          <div class="right-row">
+            <div class="row-item">
+              <div class="item-one">
+                <img class="img"
+                     src="@/assets/images/shuju/renfang/jm-logo.png"
+                     alt />
+                <div class="title">居民总数</div>
+              </div>
+              <div class="item-two">
+                <div class="num">2818</div>
+                <div class="unit">人</div>
+              </div>
+
+            </div>
+
+            <div class="row-item marginleft10">
+              <div class="item-one">
+                <img class="img"
+                     src="@/assets/images/shuju/renfang/jm-logo.png"
+                     alt />
+                <div class="title">常住人口</div>
+              </div>
+              <div class="item-two">
+                <div class="num">2642</div>
+                <div class="unit">人</div>
+              </div>
+
+            </div>
+          </div>
+          <div class="right-row margintop18">
+            <div class="row-item">
+              <div class="item-one">
+                <img class="img"
+                     src="@/assets/images/shuju/renfang/jm-logo.png"
+                     alt />
+                <div class="title">流动人口</div>
+              </div>
+              <div class="item-two">
+                <div class="num">818</div>
+                <div class="unit">人</div>
+              </div>
+
+            </div>
+
+          </div>
+        </div>
+      </div>
+      <div class="g-bar">
+        <div class="bar-title">
+
+          <img class="title_img"
+               src="@/assets/images/index/list-logo.png"
+               alt />
+          <div class="tip_title">近一年人口流动变化趋势图</div>
+          <div class="title_line"></div>
+
+        </div>
+        <div class="bar-legend">
+          <div class="item-logo logo1"></div>
+          <div class="item-name">常住人口</div>
+          <div class="item-logo logo2 marginleft10"></div>
+          <div class="item-name">流动人口</div>
+
+        </div>
+        <div class="bar-main">
+          <screen-echarts-frame class=""
+                                @myChartMethod="barInitOk"
+                                ref="barChart"></screen-echarts-frame>
+        </div>
+
+      </div>
+
+      <!-- <screen-nodata class="nodata"
+                     v-if="showNoData"></screen-nodata> -->
+    </div>
+  </div>
 </template>
 
 <script>
 import { requestPost } from "@/js/dai/request";
+import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
+import { pieOption } from './jmPieOption.js'
+import { barOption } from './jmBarOption.js'
 
 export default {
   props: {
@@ -12,10 +110,278 @@ export default {
       default: "",
     },
   },
-  data() {},
-  mounted() {},
-  methods: {},
+  components: {
+    screenEchartsFrame
+  },
+  // mixins: [animate]
+  beforeDestroy () {
+    this.timer && clearInterval(this.timer)
+  },
+  data () {
+    return {
+      showNoData: false,
+      timer: null,
+      barChart: '',
+      pieChart: '',
+      pieOption: {},
+      barOption: {},
+      pieInitState: false,
+      barInitState: false,
+      pieData: []
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  methods: {
+    pieInitOk () {
+
+      this.pieInitState = true
+    },
+    barInitOk () {
+      this.barInitState = true
+    },
+    getData () {
+      this.getBar()
+      this.getPie()
+    },
+    getBar () {
+      if (this.barInitState) {
+        this.getBarChart()
+      } else {
+        setTimeout(() => {
+          this.getBar()
+        }, 500)
+      }
+    },
+    getPie () {
+      if (this.pieInitState) {
+        this.getPieChart()
+      } else {
+        setTimeout(() => {
+          this.getPie()
+        }, 500)
+      }
+    },
+    // 获取饼状图
+    async getPieChart () {
+
+      this.$refs.pieChart.clear()
+      // this.$refs.pieChart.showLoading()
+
+      // 获取pieChart配置
+      this.pieOption = pieOption()
+
+      // 设置三个配置值
+      this.pieOption.title.text = '73%'
+      this.pieData = [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+
+      ]
+      this.pieOption.series[0].data = this.pieData;
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.pieChart.setOption(this.pieOption)
+    },
+
+    // 获取饼状图
+    async getBarChart () {
+      this.showNoData = false
+      this.$refs.barChart.clear()
+      // this.$refs.barChart.showLoading()
+
+
+      // this.$refs.barChart.hideLoading()
+      let xaxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+      let series = [
+        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] },
+        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] },
+
+      ]
+
+      // if (res.data.xaxis && res.data.xaxis.length > 0) {
+      //   const {
+      //     xaxis,
+      //     totalIndexData,
+      //     serviceAbilityData,
+      //     partyDevAbilityData,
+      //     governAbilityData
+      //   } = res.data
+
+      //   this.barOption = barOption()
+      //   this.$refs.barChart.hideLoading()
+      //   this.$refs.barChart.setOption(this.barOption, true)
+      //   this.$refs.barChart.setOption({
+      //     xAxis: { data: xaxis },
+      //     series: [
+      //       { data: totalIndexData },
+      //       { data: partyDevAbilityData },
+      //       { data: governAbilityData },
+      //       { data: serviceAbilityData }
+      //     ]
+      //   }, true)
+      // } else {
+      //   this.showNoData = true
+      // }
+
+      this.barOption = barOption()
+      // this.$refs.barChart.hideLoading()
+      this.$refs.barChart.setOption(this.barOption, true)
+      this.$refs.barChart.setOption({
+        xAxis: { data: xaxis },
+        series: series
+      }, true)
+    }
+
+  }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.main {
+  height: 100%;
+  width: 100%;
+
+  .g-pie {
+    margin-top: 24px;
+    display: flex;
+    justify-content: space-around;
+
+    .pie-left {
+      height: 120px;
+      flex: 0 0 120px;
+    }
+
+    .pie-legend {
+      .item {
+        display: flex;
+        margin-bottom: 12px;
+      }
+    }
+    .pie-right {
+      .right-row {
+        display: flex;
+        // justify-content: space-between;
+
+        .row-item {
+          flex: 0 0 100px;
+          .item-one {
+            display: flex;
+            .img {
+              width: 15px;
+              height: 15px;
+            }
+            .title {
+              margin-left: 9px;
+              font-size: 14px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: rgba(255, 255, 255, 0.65);
+            }
+          }
+
+          .item-two {
+            margin-top: 8px;
+            display: flex;
+            align-items: flex-end;
+            margin-left: 23px;
+
+            .num {
+              font-size: 24px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #ffffff;
+            }
+
+            .unit {
+              margin-left: 9px;
+              font-size: 14px;
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-weight: 500;
+              color: #ffffff;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .g-bar {
+    position: relative;
+    margin-top: 14px;
+
+    .bar-title {
+      display: flex;
+      align-items: center;
+      // margin-left: 24px;
+
+      .title_img {
+        width: 17px;
+        height: 17px;
+      }
+      .tip_title {
+        margin-left: 8px;
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 22px;
+      }
+
+      .title_line {
+        margin-left: 8px;
+        width: 244px;
+        height: 1px;
+        background: linear-gradient(
+          270deg,
+          rgba(55, 198, 255, 0.1) 0%,
+          #1995ff 100%
+        );
+      }
+    }
+
+    .bar-legend {
+      position: absolute;
+      top: 37px;
+      right: 20px;
+      display: flex;
+    }
+
+    .bar-main {
+      margin-top: 10px;
+      height: 185px;
+    }
+  }
+}
+
+.item-name {
+  margin-left: 8px;
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #8c8c8c;
+}
+
+.item-logo {
+  margin-top: 2px;
+  width: 8px;
+  height: 8px;
+}
+
+.logo1 {
+  background: #6fdeff;
+}
+.logo2 {
+  background: #ffaa00;
+}
+.logo3 {
+  background: #1a95ff;
+}
+.marginleft10 {
+  margin-left: 10px;
+}
+
+.margintop18 {
+  margin-top: 18px;
+}
+</style>