diff --git a/public/img/Elementcircle.png b/public/img/Elementcircle.png
new file mode 100644
index 0000000..50235a3
Binary files /dev/null and b/public/img/Elementcircle.png differ
diff --git a/public/img/ranking1.png b/public/img/ranking1.png
new file mode 100644
index 0000000..8657a7a
Binary files /dev/null and b/public/img/ranking1.png differ
diff --git a/public/img/ranking2.png b/public/img/ranking2.png
new file mode 100644
index 0000000..b3c079f
Binary files /dev/null and b/public/img/ranking2.png differ
diff --git a/public/img/ranking3.png b/public/img/ranking3.png
new file mode 100644
index 0000000..af9a764
Binary files /dev/null and b/public/img/ranking3.png differ
diff --git a/src/page/check/chose.vue b/src/page/check/chose.vue
index 737b48c..e56d6a5 100644
--- a/src/page/check/chose.vue
+++ b/src/page/check/chose.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="box-center">
     <div class="head">
       <div>质控管家管理系统</div>
       <div class="callback" @click="goback" style="cursor: pointer">返回</div>
@@ -200,6 +200,9 @@ export default {
 </script>
 
 <style lang="scss" scoped >
+.box-center{
+  min-width: 1500px;
+}
 .head {
   height: 64px;
   background: #409eff;
diff --git a/src/page/check/index.vue b/src/page/check/index.vue
index 30a2af0..c2ccf57 100644
--- a/src/page/check/index.vue
+++ b/src/page/check/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="box-center">
     <div class="head">
       <div>质控管家管理系统</div>
       <div class="callback" @click="goloign" style="cursor: pointer">
@@ -51,7 +51,6 @@ export default {
       this.backFlag = this.$route.query.backFlag;
     }
     this.getTab();
-    // this.$message.success('123')
   },
   methods: {
     // 获取可选权限对
@@ -117,6 +116,9 @@ export default {
 </script>
 
 <style lang="scss" scoped >
+.box-center{
+  min-width: 1500px;
+}
 .head {
   height: 64px;
   background: #409eff;
diff --git a/src/views/Statistics/ReceptionOverview.vue b/src/views/Statistics/ReceptionOverview.vue
new file mode 100644
index 0000000..206b18a
--- /dev/null
+++ b/src/views/Statistics/ReceptionOverview.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="box-center">
+    <!-- 头 -->
+    <div class="app-top">
+       <div class="app-titel">
+        <div class="titel-text">楼盘选择：</div>
+        <div style="margin-left: 26px">
+           <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="app-titel" style="margin-top: 10px;">
+        <div class="titel-text">接待时间</div>
+        <div class="toptimeqhuan">
+          <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">近7天</div>
+          <div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> 近15天 </div>
+          <div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">  近30天 </div>
+        </div>
+        <div style="margin-left: 26px">
+          <el-date-picker
+            @change="confirmtime()"
+            v-model="customtime"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </div>
+      </div>
+    </div>
+
+    <!-- 二 -->
+    <div class="app-box-er">
+      <el-row :gutter="15">
+        <el-col :span="4">
+          <div class="grid-content">
+            <div class="text1">接待量</div>
+            <div class="text2">1045</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="grid-content">
+            <div class="text1">接待量</div>
+            <div class="text2">1045</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="grid-content">
+            <div class="text1">接待量</div>
+            <div class="text2">1045</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="grid-content">
+            <div class="text1">接待量</div>
+            <div class="text2">1045</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="grid-content">
+            <div class="text1">接待量</div>
+            <div class="text2">1045</div>
+          </div>
+        </el-col>
+        <el-col :span="4">
+          <div class="grid-content">
+            <div class="text1">接待量</div>
+            <div class="text2">1045</div>
+          </div>
+        </el-col>
+      </el-row>
+      <div id="main"></div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      customtime: "",
+      TimetoAhoose: 2,
+      fromobj: {
+        starttime: "",
+        endoftime: "",
+      },
+      houseId: "",
+      options: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }],
+        value: ''
+    };
+  },
+  mounted() {
+      var chartDom = document.getElementById('main');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+          tooltip: {
+                trigger: 'axis'
+              },
+          legend: {
+              data: ['来访人数/个'],
+              bottom: '10',
+          },
+          grid: {
+              left: 10,
+              right: 10,
+
+              containLabel: true,
+          },
+          xAxis: {
+              type: 'category',
+              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+              axisLine: {
+                  lineStyle: {
+                    type: 'solid',
+                    color: '#f0f0f0',//x线的颜色
+                    width:'1'//坐标线的宽度
+
+                  }
+              }
+          },
+          yAxis: {
+              type: 'value',
+              splitNumber:4,
+               axisLine: {
+                  lineStyle: {
+                    ype: 'solid',
+                    color: '#f0f0f0',//x线的颜色
+                    width:'1'//坐标线的宽度
+                  }
+              }
+          },
+          series: [{
+              name:'来访人数/个',
+              data: [820, 932, 901, 934, 1290, 1330, 1320],
+              type: 'line',
+              smooth: true,
+          }]
+      };
+
+      option && myChart.setOption(option);
+  },
+  methods: {
+    tabtimetap(index) {
+      this.TimetoAhoose = index;
+      this.fromobj.starttime = "";
+      this.fromobj.endoftime = "";
+      this.customtime = "";
+      this.getorgCode();
+    },
+    confirmtime() {
+      if (this.customtime == "") {
+
+      } else {
+        this.TimetoAhoose = 6;
+        const d = new Date(this.customtime[0]);
+        this.fromobj.starttime = d.getFullYear() + "-" + this.Zeropadding(d.getMonth() + 1) + "-" + this.Zeropadding(d.getDate());
+        const c = new Date(this.customtime[1]);
+        this.fromobj.endoftime = c.getFullYear() + "-" + this.Zeropadding(c.getMonth() + 1) + "-" + this.Zeropadding(c.getDate());
+      }
+    },
+
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+.box-center {
+  width: 100%;
+  padding: 15px;
+  min-width: 1200px;
+  padding-bottom: 100px;
+}
+#main{
+  width: 100%;
+  height: 330px;
+}
+.app-box-er{
+  width: 100%;
+  height: 453px;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  margin-top: 15px;
+  padding: 15px;
+}
+.grid-content{
+  background: #ffffff;
+  height: 90px;
+  border: 1px solid #E0E0E0;
+  .text1{
+    height: 16px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #333333;
+    line-height: 16px;
+    text-indent: 20px;
+    margin-top: 20px;
+  }
+  .text2{
+    height: 32px;
+    font-size: 32px;
+    font-weight: normal;
+    color: #32363D;
+    line-height: 32px;
+    text-indent: 20px;
+    margin-top: 10px;
+  }
+}
+
+
+
+
+.tophove {
+  color: #ffffff;
+  background: #2671e2;
+}
+.app-top{
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.app-titel {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  .titel-text {
+    height: 100%;
+    font-size: 16px;
+    font-weight: 600;
+    color: #32363d;
+    text-indent: 30px;
+  }
+  .toptimeqhuan {
+    width: 190px;
+    height: 32px;
+    background: #ffffff;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    margin-left: 20px;
+    cursor: pointer;
+  }
+  .toptimeqhuan div {
+    flex: 1;
+    text-align: center;
+    line-height: 32px;
+    font-size: 14px;
+  }
+}
+</style>
diff --git a/src/views/Statistics/index.vue b/src/views/Statistics/index.vue
index 2e5ecf8..2cb5a9d 100644
--- a/src/views/Statistics/index.vue
+++ b/src/views/Statistics/index.vue
@@ -1,16 +1,536 @@
 <template>
-<div>
-这是统计
-</div>
+  <div class="box-center">
+    <!-- 头 -->
+    <div class="app-titel">
+      <div class="titel-text">客户洞察</div>
+      <div class="toptimeqhuan">
+        <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">
+          今日
+        </div>
+        <div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)">
+          昨日
+        </div>
+        <div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">
+          近一周
+        </div>
+      </div>
+      <div style="margin-left: 26px">
+        <el-date-picker
+          @change="confirmtime()"
+          v-model="customtime"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </div>
+    </div>
+
+    <!-- 中间 -->
+    <div class="app-box">
+      <div class="conbox">客群特征总览</div>
+      <div class="alllistbox">
+        <div
+          class="alllist"
+          v-for="(item, index) in alllist"
+          :key="index"
+          @click="movePlace(index)"
+          style="cursor: pointer"
+        >
+          <div class="alllist-text1">{{ item.name }}</div>
+          <div class="alllist-text1">{{ item.num }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 下面 -->
+    <div class="box-forhtml" v-for="(item, index) in objlist" :key="index">
+      <div class="conbox">{{ item.name }}触达排名</div>
+      <div class="box-forhtml-flex">
+        <div class="left">
+          <div class="Templatetable">
+            <div class="table-tit">
+              <div>排名</div>
+              <div>画像语意词/触达次数</div>
+              <div>触达占比</div>
+              <div>沟通记录</div>
+            </div>
+            <div
+              v-if="item.total == 0"
+              style="
+                width: 100%;
+                line-height: 300px;
+                text-align: center;
+                color: #999999;
+                font-size: 16px;
+              "
+            >
+              暂无数据
+            </div>
+            <div
+              class="table-cent"
+              v-else
+              v-for="(itcen, inde) in item.matchKeywords"
+              :key="inde"
+            >
+              <div
+                style="
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                "
+              >
+                <img
+                  v-if="inde == 0"
+                  style="width: 30px; height: 30px"
+                  src="/img/ranking1.png"
+                  alt=""
+                />
+                <img
+                  v-else-if="inde == 1"
+                  style="width: 30px; height: 30px"
+                  src="/img/ranking2.png"
+                  alt=""
+                />
+                <img
+                  v-else-if="inde == 2"
+                  style="width: 30px; height: 30px"
+                  src="/img/ranking3.png"
+                  alt=""
+                />
+                <div v-else class="indeclass">{{ inde + 1 }}</div>
+              </div>
+              <div v-if="index == 2">
+                {{ itcen.name + "-" + itcen.endName + "㎡" }}({{ itcen.total }})
+              </div>
+              <div v-else-if="index == 3">
+                {{ itcen.name + "-" + itcen.endName + "万" }}({{ itcen.total }})
+              </div>
+              <div v-else>{{ itcen.name }}({{ itcen.total }})</div>
+              <div>{{ itcen.proportion }}%</div>
+              <div
+                style="color: #2671e2; cursor: pointer"
+                @click="Toview(item, inde)"
+              >
+                查看
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <div
+            :id="'ids' + item.id"
+            class="container"
+            style="width: 400px; height: 330px; text-align: center"
+          >
+            <img
+              v-if="item.total == 0"
+              style="width: 260px; height: 260px"
+              src="/img/Elementcircle.png"
+              alt=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import * as echarts from "echarts";
 export default {
+  data() {
+    return {
+      alllist: [
+        { name: "阿达", num: "5" },
+        { name: "阿达", num: "5" },
+        { name: "阿达", num: "5" },
+        { name: "阿达", num: "5" },
+        { name: "阿达", num: "5" },
+        { name: "阿达", num: "5" },
+        { name: "阿达", num: "5" },
+        { name: "阿达", num: "5" },
+        { name: "阿达", num: "5" },
+        { name: "阿达", num: "5" },
+        { name: "阿达", num: "5" },
+        { name: "阿达", num: "5" },
+      ],
+      customtime: "",
+      TimetoAhoose: 2,
+      fromobj: {
+        starttime: "",
+        endoftime: "",
+      },
+      namelist: [],
+      numlist: [],
+      objlist: [
+        {
+          children: null,
+          endName: "",
+          id: 5,
+          isInterval: 1,
+          keywordsId: null,
+          level: 1,
+          matchKeywords: [
+            {
+              carId: "",
+              children: null,
+              childrenName: "",
+              endName: "",
+              id: "",
+              isInterval: null,
+              keywordsId: 138,
+              level: 3,
+              matchName: "",
+              name: "工作",
+              orgCode: "",
+              pid: 132,
+              proportion: 75,
+              selected: null,
+              sort: null,
+              total: 3,
+              unit: "",
+            },
+            {
+              carId: "",
+              children: null,
+              childrenName: "",
+              endName: "",
+              id: "",
+              isInterval: null,
+              keywordsId: 123,
+              level: 3,
+              matchName: "",
+              name: "周末",
+              orgCode: "",
+              pid: 122,
+              proportion: 25,
+              selected: null,
+              sort: null,
+              total: 1,
+            },
+          ],
+          name: "认知途径",
+          orgCode: "031",
+          pid: 0,
+          sort: 5,
+          total: 4,
+          unit: "",
+        },
+      ],
+      houseId: "",
+    };
+  },
+  mounted() {
+    this.myChartinit();
+  },
+  methods: {
+    tabtimetap(index) {
+      this.TimetoAhoose = index;
+      this.fromobj.starttime = "";
+      this.fromobj.endoftime = "";
+      this.customtime = "";
+      this.getorgCode();
+    },
+    confirmtime() {
+      if (this.customtime == "") {
 
-}
+      } else {
+        this.TimetoAhoose = 6;
+        const d = new Date(this.customtime[0]);
+        this.fromobj.starttime = d.getFullYear() + "-" + this.Zeropadding(d.getMonth() + 1) + "-" + this.Zeropadding(d.getDate());
+        const c = new Date(this.customtime[1]);
+        this.fromobj.endoftime = c.getFullYear() + "-" + this.Zeropadding(c.getMonth() + 1) + "-" + this.Zeropadding(c.getDate());
+      }
+    },
+    myChartinit() {
+      this.objlist.forEach((item, index) => {
+        if (item.total != 0) {
+          var id = "ids" + item.id;
+          var myChart = echarts.init(document.getElementById(id));
+          var objoptlis = [];
+          item.matchKeywords.forEach((ice) => {
+            objoptlis.push({ value: ice.total, name: ice.name });
+          });
+          var option = {
+            color: [
+              "#66AFF5",
+              "#FABD2B",
+              "#6F8EDC",
+              "#FFCF8F",
+              "#F98120",
+              "#1CC99E",
+              "#9474FB",
+              "#657292",
+              "#7A6A99",
+              "#BF5D52",
+              "#EE6666",
+              "#77B7E4",
+              "#E6A065",
+              "#9D5139",
+              "#C1AA88",
+              "#F87F7A",
+              "#F6CF74",
+              "#7F5506",
+              "#88BB9B",
+              "#6E99AA",
+              "#5789D0",
+            ],
+            tooltip: {
+              trigger: "item",
+            },
+            graphic: [
+              {
+                type: "text",
+                left: "center",
+                top: "42%",
+                style: {
+                  text: item.total,
+                  textAlign: "center",
+                  fill: "#000",
+                  width: 30,
+                  height: 30,
+                  fontSize: 24,
+                  color: "#32363D",
+                  fontFamily: "Microsoft YaHei",
+                },
+              },
+              {
+                type: "text",
+                left: "center",
+                top: "55%",
+                style: {
+                  text: "总触达次数",
+                  textAlign: "center",
+                  fill: "#000",
+                  width: 30,
+                  height: 30,
+                  fontSize: 16,
+                  color: "#666666",
+                },
+              },
+            ],
+            series: [
+              {
+                name: "",
+                type: "pie",
+                radius: ["48%", "70%"],
+                avoidLabelOverlap: false,
+                data: objoptlis,
+              },
+            ],
+          };
+          myChart.setOption(option);
+        }
+      });
+    },
+  },
+};
 </script>
 
-<style lang="" scoped >
+<style scoped="scoped" lang="scss" >
+.box-center {
+  width: 100%;
+  padding: 15px;
+  min-width: 1200px;
+  padding-bottom: 100px;
+}
+.tophove {
+  color: #ffffff;
+  background: #2671e2;
+}
+.app-titel {
+  width: 100%;
+  height: 70px;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  .titel-text {
+    height: 100%;
+    font-size: 20px;
+    font-weight: 600;
+    color: #32363d;
+    line-height: 70px;
+    text-indent: 30px;
+  }
+  .toptimeqhuan {
+    width: 190px;
+    height: 32px;
+    background: #ffffff;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    margin-left: 30px;
+    cursor: pointer;
+  }
+  .toptimeqhuan div {
+    flex: 1;
+    text-align: center;
+    line-height: 32px;
+    font-size: 16px;
+  }
+}
+
+.app-box {
+  width: 100%;
+  padding-bottom: 20px;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  padding-top: 20px;
+  padding-left: 30px;
+  padding-right: 30px;
+  margin-top: 20px;
+  .conbox {
+    height: 18px;
+    font-size: 18px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #32363d;
+    line-height: 18px;
+  }
+  .alllistbox {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    .alllist {
+      width: 16.66%;
+      border: 1px solid #e0e0e0;
+      padding-bottom: 2px;
+      padding-top: 4px;
+    }
+    .alllist-text1 {
+      width: 100%;
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      line-height: 26px;
+      text-align: center;
+    }
+  }
+}
 
+.box-forhtml {
+  width: 100%;
+  height: 400px;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  padding-top: 20px;
+  padding-left: 30px;
+  padding-right: 30px;
+  margin-top: 20px;
+}
+.box-forhtml-flex {
+  width: 100%;
+  display: flex;
+  margin-top: 20px;
+}
+.box-forhtml-flex .left {
+  width: 50%;
+  height: 320px;
+}
+.box-forhtml-flex .right {
+  width: 50%;
+  height: 330px;
+  display: flex;
+  justify-content: center;
+}
+.Templatetable {
+  width: 88%;
+  height: 100%;
+  margin: 0 auto;
+  overflow-y: auto;
+}
+.table-tit {
+  width: 100%;
+  height: 20px;
+  line-height: 20px;
+  display: flex;
+}
+.table-tit > div:nth-of-type(1) {
+  width: 10%;
+  text-align: center;
+  font-size: 16px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #606775;
+}
+.table-tit > div:nth-of-type(2) {
+  width: 40%;
+  text-align: center;
+  font-size: 16px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #606775;
+}
+.table-tit > div:nth-of-type(3) {
+  width: 25%;
+  text-align: center;
+  font-size: 16px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #606775;
+}
+.table-tit > div:nth-of-type(4) {
+  width: 25%;
+  text-align: center;
+  font-size: 16px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #606775;
+}
 
+.table-cent {
+  width: 100%;
+  height: 20px;
+  line-height: 20px;
+  display: flex;
+  margin-top: 18px;
+}
+.table-cent > div:nth-of-type(1) {
+  width: 10%;
+  text-align: center;
+  font-size: 14px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  color: #32363d;
+}
+.table-cent > div:nth-of-type(2) {
+  width: 40%;
+  text-align: center;
+  font-size: 14px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  color: #32363d;
+}
+.table-cent > div:nth-of-type(3) {
+  width: 25%;
+  text-align: center;
+  font-size: 14px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  color: #32363d;
+}
+.table-cent > div:nth-of-type(4) {
+  width: 25%;
+  text-align: center;
+  font-size: 14px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  color: #32363d;
+}
+.indeclass {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #ecf1ff;
+  color: #ffffff;
+  text-align: center;
+  line-height: 20px;
+  font-size: 14px;
+}
 </style>