diff --git a/public/logoPng.png b/public/logoPng.png
new file mode 100644
index 0000000..baafc41
Binary files /dev/null and b/public/logoPng.png differ
diff --git a/src/components/dateFilter/index.vue b/src/components/dateFilter/index.vue
new file mode 100644
index 0000000..b160acd
--- /dev/null
+++ b/src/components/dateFilter/index.vue
@@ -0,0 +1,117 @@
+<template>
+    <div id="dateFilter">
+        <el-card shadow="hover">
+            <div class="app-titel">
+                <div class="titel-text">筛选日期：</div>
+                <el-button :class="{ 'el-button--primary': TimetoAhoose == 0 }" @click="tabtimetap(0)">今天</el-button>
+                <el-button :class="{ 'el-button--primary': TimetoAhoose == 1 }" @click="tabtimetap(1)">近7天</el-button>
+                <el-button :class="{ 'el-button--primary': TimetoAhoose == 2 }" @click="tabtimetap(2)">近30天</el-button>
+                <div style="margin-left: 26px">
+                    <el-date-picker @change="confirmtime()" v-model="customtime" :clearable="false" type="daterange"
+                        range-separator="-" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd"
+                        start-placeholder="开始日期" end-placeholder="结束日期">
+                    </el-date-picker>
+                </div>
+            </div>
+        </el-card>
+    </div>
+</template>
+
+<script>
+
+//事件 : getDate(s,e)获取开始时间，结束时间
+
+export default {
+    name: "dateFilter",
+    data() {
+        return {
+            TimetoAhoose: 0,
+            customtime: [],
+            statDateStart: "",
+            statDateEnd: "",
+            dateType:0,
+        }
+    },
+    mounted() {
+        this.TimetoAhoose = 8;
+        // this.getTime(7);
+    },
+    methods: {
+        tabtimetap(i) {
+            this.customtime = [];
+            this.TimetoAhoose = i;
+            this.dateType = i;
+            this.$emit('getDate',this.dateType, "", "")
+            // switch (i) {
+            //     case 1:
+            //         this.getTime(7);;
+            //         break;
+            //     case 2:
+            //         this.getTime(30);
+            //         break;
+            //     default:
+            //         this.getTime(1);
+            //         break;
+            // };
+        },
+        // getTime(range) {
+        //     var end = new Date();
+        //     var start = new Date();
+        //     start.setTime(start.getTime() - 3600 * 1000 * 24 * range);
+        //     this.statDateStart = this.dateFormat(start);
+        //     this.statDateEnd = this.dateFormat(end);
+        //     this.$emit('getDate', this.statDateStart, this.statDateEnd)
+        // },
+        confirmtime() {
+            this.statDateStart = this.customtime[0];
+            this.statDateEnd = this.customtime[1];
+            this.TimetoAhoose = null;
+            this.dateType = null;
+            this.$emit('getDate',this.dateType, this.statDateStart, this.statDateEnd)
+        },
+        // dateFormat(time) {
+        //     let date = new Date(time);
+        //     let year = date.getFullYear(),
+        //         month = ("0" + (date.getMonth() + 1)).slice(-2),
+        //         day = ("0" + date.getDate()).slice(-2)
+        //     return year + "-" + month + "-" + day;
+        // }
+    }
+}
+</script>
+
+<style scoped="scoped" lang="scss">
+#dateFilter {
+    .app-titel {
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        .titel-text {
+            height: 100%;
+            font-size: 16px;
+            color: #32363d;
+        }
+
+        .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>
\ No newline at end of file
diff --git a/src/components/queryForm/dateFilter.vue b/src/components/queryForm/dateFilter.vue
new file mode 100644
index 0000000..d0c3f5c
--- /dev/null
+++ b/src/components/queryForm/dateFilter.vue
@@ -0,0 +1,116 @@
+<template>
+    <div id="dateFilter">
+        <div class="app-titel">
+            <el-button :class="{ 'el-button--primary': TimetoAhoose == 0 }" @click="tabtimetap(0)">今天</el-button>
+            <el-button :class="{ 'el-button--primary': TimetoAhoose == 1 }" @click="tabtimetap(1)">近7天</el-button>
+            <el-button :class="{ 'el-button--primary': TimetoAhoose == 2 }" @click="tabtimetap(2)">近30天</el-button>
+            <div style="margin-left: 26px">
+                <el-date-picker @change="confirmtime()" v-model="customtime" :clearable="false" type="daterange"
+                    range-separator="-" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd"
+                    start-placeholder="开始日期" end-placeholder="结束日期">
+                </el-date-picker>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+//事件 : getDate(s,e)获取开始时间，结束时间
+
+export default {
+    name: "dateFilter",
+    data() {
+        return {
+            TimetoAhoose: -1,
+            customtime: [],
+            statDateStart: "",
+            statDateEnd: "",
+        }
+    },
+    props:{
+        bindKey:{
+            type:String,
+            require:true
+        }
+    },
+    mounted() {
+        // this.TimetoAhoose = -1;
+        // this.getTime(7);
+    },
+    methods: {
+        tabtimetap(i) {
+            this.customtime = [];
+            this.TimetoAhoose = i;
+            switch (i) {
+                case 1:
+                    this.getTime(7);
+                    break;
+                case 2:
+                    this.getTime(30);
+                    break;
+                default:
+                    this.getTime(1);
+                    break;
+            };
+        },
+        getTime(range) {
+            var end = new Date();
+            var start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * range);
+            this.statDateStart = this.dateFormat(start);
+            this.statDateEnd = this.dateFormat(end);
+            this.$emit('getDate', this.statDateStart, this.statDateEnd,this.bindKey)
+        },
+        confirmtime() {
+            this.statDateStart = this.customtime[0];
+            this.statDateEnd = this.customtime[1];
+            this.TimetoAhoose = null;
+            this.$emit('getDate', this.statDateStart, this.statDateEnd,this.bindKey)
+        },
+        dateFormat(time) {
+            let date = new Date(time);
+            let year = date.getFullYear(),
+                month = ("0" + (date.getMonth() + 1)).slice(-2),
+                day = ("0" + date.getDate()).slice(-2)
+            return year + "-" + month + "-" + day;
+        }
+    }
+}
+</script>
+
+<style scoped="scoped" lang="scss">
+#dateFilter {
+    .app-titel {
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        .titel-text {
+            height: 100%;
+            font-size: 16px;
+            color: #32363d;
+        }
+
+        .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>
\ No newline at end of file
diff --git a/src/components/queryForm/index.vue b/src/components/queryForm/index.vue
new file mode 100644
index 0000000..d0e4d6e
--- /dev/null
+++ b/src/components/queryForm/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <div id="queryForm">
+    <el-card shadow="hover">
+      <el-form :model="ruleForm" status-icon label-width="100px">
+
+        <el-row v-if="isClose">
+          <el-col v-for="(item,index) in params.slice(0,4)" :key="index" :span="item.width">
+              <el-form-item :label="item.label">
+                <el-input v-if="item.type == 'input'" v-bind="{ ...item.props }" v-model="ruleForm[item.key]"></el-input>
+                <el-select v-if="item.type == 'select'" v-bind="{ ...item.props }" v-model="ruleForm[item.key]">
+                  <el-option v-for="(i,k) in item.options" :key="k" :label="i.label" :value="i.value"></el-option>
+                </el-select>
+                <dateFilter v-if="item.type == 'dateRange'" :bindKey="item.key" @getDate="selDate"/>
+              </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-else>
+          <el-col v-for="(item,index) in params" :key="index" :span="item.width">
+              <el-form-item :label="item.label">
+                <el-input v-if="item.type == 'input'" v-bind="{ ...item.props }" v-model="ruleForm[item.key]"></el-input>
+                <el-select v-if="item.type == 'select'" v-bind="{ ...item.props }" v-model="ruleForm[item.key]">
+                  <el-option v-for="(i,k) in item.options" :key="k" :label="i.label" :value="i.value"></el-option>
+                </el-select>
+                <dateFilter ref="clearDate" v-if="item.type == 'dateRange'" :bindKey="item.key" @getDate="selDate"/>
+              </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="6">
+            <el-button type="primary" @click="submit">筛选</el-button>
+            <el-button @click="clear">清空筛选条件</el-button>
+            <el-button v-if="isSystole" @click="isSystoleForm" type="text">{{isOpen?'收起':'展开'}}<i style="margin-left:5px;" :class="isOpen?'el-icon-arrow-up':'el-icon-arrow-down'"></i></el-button>
+          </el-col>
+        </el-row>
+        
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+
+//事件 : submit(data)获取查询参数
+//属性 params:[
+        // {
+        //   type,      表单类型 input/select/dateRange
+        //   key,       绑定名
+        //   value,     值
+        //   label,     前面的字
+        //   width,     占的宽度
+        //   props,     绑定其他属性
+        //   options    选择框的选项 {label:名，value:值}
+        // }
+//]
+//属性 isSystole: 是否显示展开收起的按钮
+
+import dateFilter from './dateFilter.vue'
+export default {
+  name: "queryForm",
+  props: {
+    params: {
+      type: Array,
+      require:true
+    },
+    isSystole: {
+      type: Boolean,
+      require:false,
+      default:false,
+    },
+  },
+  data() {
+    return {
+      ruleForm: {},
+      isOpen:false,
+      isClose:true,
+    }
+  },
+  mounted(){
+
+  },
+  watch:{
+    isOpen(newD,oldD){
+      if(oldD){
+        this.isClose = true
+      }else{
+        this.isClose = false
+      }
+    }
+  },
+  components:{
+    dateFilter
+  },
+  methods:{
+    selDate(s,e,key){
+      this.ruleForm[key] = [s,e]
+    },
+    isSystoleForm(){
+      this.isOpen = !this.isOpen
+    },
+    submit(){
+      this.$emit('submit',this.ruleForm)
+    },
+    clear(){
+      if(this.ruleForm){
+        this.$refs.clearDate[0].TimetoAhoose = -1;
+        this.$refs.clearDate[0].customtime = [];
+        this.$refs.clearDate[0].statDateStart = "";
+        this.$refs.clearDate[0].statDateStart = "";
+        this.ruleForm = {}
+        this.$emit('submit',this.ruleForm)
+      }
+    }
+  }
+
+}
+</script>
+
+<style scoped="scoped" lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/components/tabCard/index.vue b/src/components/tabCard/index.vue
new file mode 100644
index 0000000..12b4b92
--- /dev/null
+++ b/src/components/tabCard/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <div id="tabCard">
+    <div class="cardItem" v-for="(item,index) in cardData" :key="index" @click="Overviewxlick(index)" :class="{ borderCss: cardindex == index }">
+      <span>{{item.label}}</span>
+      <h2>{{item.value}}</h2>
+      <div class="sel" :class="{ seled: cardindex == index }">
+        <i v-show="cardindex == index" class="el-icon-check" style="font-size:22px;color:#FFF;position: absolute;right: 2px;bottom: -42px;"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+//cardData 卡片数据 [{lable,value}]
+
+export default {
+  name:"tabCard",
+  data() {
+    return {
+      cardindex: 0,
+      c:'#1E9493'
+    };
+  },
+  props:{
+    cardData:{
+      type:Array,
+      require:true,
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    //卡片切换
+    Overviewxlick(i) {
+      console.log(i)
+      this.cardindex = i;
+    },
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+
+@import "../theme.color.scss";
+#tabCard{
+    width: 100%;
+    background: #ffffff;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+    margin-top: 15px;
+    padding: 15px;
+    display: grid;
+    grid-template-columns: repeat(6, 16%);
+    grid-column-gap: 8px;
+    grid-row-gap: 18px;
+    .borderCss{
+      border: 1px solid $color1 !important;
+    }
+    .cardItem{
+      border: 1px solid #E0E0E0;
+      padding: 15px 0;
+      cursor: pointer;
+      position: relative;
+      border-radius: 4px;
+      span{
+        margin-left: 30px;
+      }
+      h2{
+        margin: 0;
+        margin-left: 30px;
+        margin-top:10px;
+      }
+      .sel{
+        width: 45px;
+        height: 45px;
+        position: absolute;
+        right:0;
+        bottom:0;
+      }
+      .seled {
+        position: absolute;
+
+        width: 0;
+
+        height: 0;
+
+        border-bottom: 45px solid $color1 !important;
+
+        border-left: 45px solid transparent !important;
+
+      }
+    }
+}
+
+
+</style>
diff --git a/src/components/tabTrend/index.vue b/src/components/tabTrend/index.vue
new file mode 100644
index 0000000..cace7f5
--- /dev/null
+++ b/src/components/tabTrend/index.vue
@@ -0,0 +1,637 @@
+<template>
+  <div class="box-center">
+    <div class="app-box-er">
+      <div class="container">
+        <el-card shadow="hover" :class="{ tophovese: cardindex == 1 }">
+          <div v-if="pointer == 'click'" @click="Overviewxlick('1')">
+            <div class="text1">
+              接待量
+              <el-tooltip effect="light" content="筛选时间内，已经结束的接待条数，不包含待接单；" placement="bottom-end">
+                <i class="el-icon-question" style="color:#74A3EA"></i>
+              </el-tooltip>
+            </div>
+            <div class="text2">
+              {{ cardobj.receptionCount || 0 }}
+            </div>
+            <div class="text3">
+              <span>环比 {{ cardobjs.receptionCount || 0 }}</span>
+              <span class="textUp" v-if="cardobjCycle.receptionCount > 0">
+                +{{ cardobjCycle.receptionCount || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="cardobjCycle.receptionCount < 0">
+                -{{ cardobjCycle.receptionCount || 0 }}
+                <i class="down"></i>
+              </span>
+            </div>
+          </div>
+          <div v-else @mouseenter="Overviewxlick('1')">
+            <div class="text1">
+              接待量
+              <el-tooltip effect="light" content="筛选时间内，已经结束的接待条数，不包含待接单；" placement="bottom-end">
+                <i class="el-icon-question" style="color:#74A3EA"></i>
+              </el-tooltip>
+            </div>
+            <div class="text2">
+              {{ cardobj.receptionCount || 0 }}
+            </div>
+            <div class="text3">
+              <span>环比 {{ cardobjs.receptionCount || 0 }}</span>
+              <span class="textUp" v-if="cardobjCycle.receptionCount > 0">
+                +{{ cardobjCycle.receptionCount || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="cardobjCycle.receptionCount < 0">
+                -{{ cardobjCycle.receptionCount || 0 }}
+                <i class="down"></i>
+              </span>
+            </div>
+          </div>
+        </el-card>
+        <el-card shadow="hover" :class="{ tophovese: cardindex == 2 }">
+          <div v-if="pointer == 'click'" @click="Overviewxlick('2')">
+            <div class="text1">
+              有效接待
+              <el-tooltip effect="light" content="筛选时间内，标记为有效的接待数，不包含待接单；" placement="bottom-end">
+                <i class="el-icon-question" style="color:#74A3EA"></i>
+              </el-tooltip>
+            </div>
+            <div class="text2">
+              {{ cardobj.activeCustomer || 0 }}
+            </div>
+            <div class="text3">
+              <span>环比 {{ cardobjs.activeCustomer || 0 }}</span>
+              <span class="textUp" v-if="cardobjCycle.activeCustomer > 0">
+                +{{ cardobjCycle.activeCustomer || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="cardobjCycle.activeCustomer < 0">
+                -{{ cardobjCycle.activeCustomer || 0 }}
+                <i class="down"></i>
+              </span>
+            </div>
+          </div>
+          <div v-else @mouseenter="Overviewxlick('2')">
+            <div class="text1">
+              有效接待
+              <el-tooltip effect="light" content="筛选时间内，标记为有效的接待数，不包含待接单；" placement="bottom-end">
+                <i class="el-icon-question" style="color:#74A3EA"></i>
+              </el-tooltip>
+            </div>
+            <div class="text2">
+              {{ cardobj.activeCustomer || 0 }}
+            </div>
+            <div class="text3">
+              <span>环比 {{ cardobjs.activeCustomer || 0 }}</span>
+              <span class="textUp" v-if="cardobjCycle.activeCustomer > 0">
+                +{{ cardobjCycle.activeCustomer || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="cardobjCycle.activeCustomer < 0">
+                -{{ cardobjCycle.activeCustomer || 0 }}
+                <i class="down"></i>
+              </span>
+            </div>
+          </div>
+        </el-card>
+         <el-card shadow="hover" :class="{ tophovese: cardindex == 3 }">
+          <div v-if="pointer == 'click'" @click="Overviewxlick('3')">
+            <div class="text1">
+              平均接待时长
+              <el-tooltip effect="light" content="筛选时间内，有效接待（不包含待接单）的平均录音时长，单位分钟；" placement="bottom-end">
+                <i class="el-icon-question" style="color:#74A3EA"></i>
+              </el-tooltip>
+            </div>
+            <div class="text2">
+              {{ cardobj.avgDuration || 0 }}
+            </div>
+            <div class="text3">
+              <span>环比 {{ cardobjs.avgDuration || 0 }}</span>
+              <span class="textUp" v-if="cardobjCycle.receptionTimeWithAvg > 0">
+                +{{ cardobjCycle.receptionTimeWithAvg || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="cardobjCycle.receptionTimeWithAvg < 0">
+                -{{ cardobjCycle.receptionTimeWithAvg || 0 }}
+                <i class="down"></i>
+              </span>
+            </div>
+          </div>
+          <div v-else @mouseenter="Overviewxlick('3')">
+            <div class="text1">
+              平均接待时长
+              <el-tooltip effect="light" content="筛选时间内，有效接待（不包含待接单）的平均录音时长，单位分钟；" placement="bottom-end">
+                <i class="el-icon-question" style="color:#74A3EA"></i>
+              </el-tooltip>
+            </div>
+            <div class="text2">
+              {{ cardobj.avgDuration || 0 }}
+            </div>
+            <div class="text3">
+              <span>环比 {{ cardobjs.avgDuration || 0 }}</span>
+              <span class="textUp" v-if="cardobjCycle.receptionTimeWithAvg > 0">
+                +{{ cardobjCycle.receptionTimeWithAvg || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="cardobjCycle.receptionTimeWithAvg < 0">
+                -{{ cardobjCycle.receptionTimeWithAvg || 0 }}
+                <i class="down"></i>
+              </span>
+            </div>
+          </div>
+        </el-card>
+        <el-card shadow="hover" :class="{ tophovese: cardindex == 4 }">
+          <div v-if="pointer == 'click'" @click="Overviewxlick('4')">
+            <div class="text1">
+              平均执行率(%)
+              <el-tooltip effect="light" content="筛选时间内，有效接待（不包含待接单）的平均执行率；" placement="bottom-end">
+                <i class="el-icon-question" style="color:#74A3EA"></i>
+              </el-tooltip>
+            </div>
+            <div class="text2">
+              {{ cardobj.fraction || 0 }}
+            </div>
+            <div class="text3">
+              <span>环比 {{ cardobjs.fraction || 0 }}</span>
+              <span class="textUp" v-if="cardobjCycle.avgFration > 0">
+                +{{ cardobjCycle.avgFration || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="cardobjCycle.avgFration < 0">
+                -{{ cardobjCycle.avgFration || 0 }}
+                <i class="down"></i>
+              </span>
+            </div>
+          </div>
+          <div v-else @mouseenter="Overviewxlick('4')">
+            <div class="text1">
+              平均执行率(%)
+              <el-tooltip effect="light" content="筛选时间内，有效接待（不包含待接单）的平均执行率；" placement="bottom-end">
+                <i class="el-icon-question" style="color:#74A3EA"></i>
+              </el-tooltip>
+            </div>
+            <div class="text2">
+              {{ cardobj.fraction || 0 }}
+            </div>
+            <div class="text3">
+              <span>环比 {{ cardobjs.fraction || 0 }}</span>
+              <span class="textUp" v-if="cardobjCycle.avgFration > 0">
+                +{{ cardobjCycle.avgFration || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="cardobjCycle.avgFration < 0">
+                -{{ cardobjCycle.avgFration || 0 }}
+                <i class="down"></i>
+              </span>
+            </div>
+          </div>
+        </el-card>
+        <el-card shadow="hover" :class="{ tophovese: cardindex == 5 }">
+          <div v-if="pointer == 'click'" @click="Overviewxlick('5')">
+            <div class="text1">
+              违禁接待次数
+              <el-tooltip effect="light" content="筛选时间内，出现违禁的接待次数，不包含待接单/无效接待/无效违禁；" placement="bottom-end">
+                <i class="el-icon-question" style="color:#74A3EA"></i>
+              </el-tooltip>
+            </div>
+            <div class="text2">
+              {{ cardobj.prohibitedCustomer || 0 }}
+            </div>
+            <div class="text3">
+              <span>环比 {{ cardobjs.prohibitedCustomer || 0 }}</span>
+              <span class="textUp" v-if="cardobjCycle.prohibitedCustomer > 0">
+                +{{ cardobjCycle.prohibitedCustomer || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="cardobjCycle.prohibitedCustomer < 0">
+                -{{ cardobjCycle.prohibitedCustomer || 0 }}
+                <i class="down"></i>
+              </span>
+            </div>
+          </div>
+          <div v-else @mouseenter="Overviewxlick('5')">
+            <div class="text1">
+              违禁接待次数
+              <el-tooltip effect="light" content="筛选时间内，出现违禁的接待次数，不包含待接单/无效接待/无效违禁；" placement="bottom-end">
+                <i class="el-icon-question" style="color:#74A3EA"></i>
+              </el-tooltip>
+            </div>
+            <div class="text2">
+              {{ cardobj.prohibitedCustomer || 0 }}
+            </div>
+            <div class="text3">
+              <span>环比 {{ cardobjs.prohibitedCustomer || 0 }}</span>
+              <span class="textUp" v-if="cardobjCycle.prohibitedCustomer > 0">
+                +{{ cardobjCycle.prohibitedCustomer || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="cardobjCycle.prohibitedCustomer < 0">
+                -{{ cardobjCycle.prohibitedCustomer || 0 }}
+                <i class="down"></i>
+              </span>
+            </div>
+          </div>
+        </el-card>
+      </div>
+
+      <div id="main"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+
+//pointer 参数：click/hover
+//fromobj 自定义时间
+//TimetoAhoose 今天传0/近7天传1/近30天传2
+//key 随机数
+
+
+
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      customtime: [],
+      // TimetoAhoose: 0,
+      // fromobj: {
+      //   statDateStart: "",
+      //   statDateEnd: "",
+      // },
+      houseId: "",
+      cardobj: {},
+      cardobjs: {}, // 环比数据
+      cardobjCycle: {}, // 环比数值正负
+      cardindex: 1,
+      Brokenline: [],
+    };
+  },
+  props: {
+    fromobj: {
+      type: Object
+    },
+    TimetoAhoose:{
+      type:Number
+    },
+    pointer: {
+      type: String,
+      require: false,
+      default: "hover"
+    }
+  },
+  mounted() {
+    if(this.TimetoAhoose == null && (this.fromobj.statDateStart=='' || this.fromobj.statDateEnd=='')){
+      this.TimetoAhoose = 4;
+    }
+    this.houseId = localStorage.getItem("houseId");
+    this.overviewreceptionOverview();
+    this.overviewreceptionData();
+  },
+  methods: {
+    //卡片切换
+    Overviewxlick(i) {
+      this.cardindex = i;
+      var newline = [];
+      var newline2 = [];
+      var Strname = "";
+      if (this.cardindex == 1) {
+        Strname = "接待客户/个";
+        this.Brokenline.map((item) => {
+          newline.push(item.receptionCount);
+          newline2.push(item.statDate.slice(5, 10));
+        });
+      } else if (this.cardindex == 2) {
+        Strname = "接待客户/个";
+        this.Brokenline.map((item) => {
+          newline.push(item.activeCustomer);
+          newline2.push(item.statDate.slice(5, 10));
+        });
+      } else if (this.cardindex == 3) {
+        Strname = "接待时长/分钟";
+        this.Brokenline.map((item) => {
+          newline.push(item.avgDuration);
+          newline2.push(item.statDate.slice(5, 10));
+        });
+      } else if (this.cardindex == 4) {
+        Strname = "执行率/%";
+        this.Brokenline.map((item) => {
+          newline.push(item.fraction);
+          newline2.push(item.statDate.slice(5, 10));
+        });
+      } else {
+        Strname = "违禁/次";
+        this.Brokenline.map((item) => {
+          newline.push(item.prohibitedCustomer);
+          newline2.push(item.statDate.slice(5, 10));
+        });
+      }
+      this.SwitchCARDS(newline, newline2, Strname);
+    },
+    //获取卡片数据
+    overviewreceptionOverview() {
+      let parmo = {
+        houseId: this.houseId,
+        dateType: this.TimetoAhoose,
+        statDateStart: this.fromobj.statDateStart,
+        statDateEnd: this.fromobj.statDateEnd,
+      };
+      if (this.TimetoAhoose == 8) {
+        parmo.dateType = null;
+      }
+      this.$api.http.overviewreceptionOverview(parmo).then((res) => {
+        this.cardobj = res.data.valueA;
+        this.cardobjs = res.data.valueB;
+        this.cardobjCycle = res.data.contrast;
+      });
+    },
+    //获取卡片下折线图
+    overviewreceptionData() {
+      this.Brokenline = [];
+      let parmo = {
+        houseId: this.houseId,
+        dateType: this.TimetoAhoose,
+        statDateStart: this.fromobj.statDateStart,
+        statDateEnd: this.fromobj.statDateEnd,
+      };
+      if (this.TimetoAhoose == 8) {
+        parmo.dateType = null;
+      }
+      this.$api.http.overviewreceptionData(parmo).then((res) => {
+        this.Brokenline = res.data || [];
+        this.Overviewxlick(1);
+      });
+    },
+    //卡片下折线图
+    SwitchCARDS(newline, newline2, Strname) {
+      if (this.Brokenline == 0) {
+        return;
+      }
+      echarts.init(document.getElementById("main")).dispose(); // 销毁实例
+      var chartDom = document.getElementById("main");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        color: [
+          "#6F8EDC",
+          "#EE6666",
+          "#F98120",
+          "#1CC99E",
+          "#9474FB",
+          "#66AFF5",
+          "#FABD2B",
+          "#FFCF8F",
+          "#657292",
+          "#7A6A99",
+          "#BF5D52",
+          "#77B7E4",
+          "#E6A065",
+          "#9D5139",
+          "#C1AA88",
+          "#F87F7A",
+          "#F6CF74",
+          "#7F5506",
+          "#88BB9B",
+          "#6E99AA",
+          "#5789D0",
+        ],
+        legend: {
+          data: [Strname],
+          bottom: "10",
+        },
+        grid: {
+          left: 10,
+          right: 10,
+
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: newline2,
+          axisLabel: {
+            //重点在这一块，其余可以忽略
+            textStyle: {
+              color: "#212121", //更改坐标轴文字颜色
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              type: "solid",
+              color: "#DDE1EE", //x线的颜色
+              width: "1", //坐标线的宽度
+            },
+          },
+        },
+        series: [
+          {
+            name: Strname,
+            data: newline,
+            type: "line",
+            smooth: true,
+          },
+        ],
+      };
+      if (this.cardindex == 3) {
+        option.tooltip = {
+          trigger: "axis",
+          formatter: "{b0}: {c0}" + "分钟",
+        };
+      } else {
+        option.tooltip = {
+          trigger: "axis",
+          formatter: "{b0}: {c0}" + "次",
+        };
+      }
+      if (this.cardindex == 4) {
+        option.tooltip = {
+          trigger: "axis",
+          formatter: "{b0}: {c0}" + "%",
+        };
+        option.yAxis = {
+          type: "value",
+          splitNumber: 5,
+          max: 100,
+          min: 0,
+          axisLabel: {
+            //重点在这一块，其余可以忽略
+            textStyle: {
+              color: "#212121", //更改坐标轴文字颜色
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              ype: "solid",
+              color: "#DDE1EE", //x线的颜色
+              width: "1", //坐标线的宽度
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed", // y轴分割线类型
+            },
+          },
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+        };
+      } else {
+        option.yAxis = {
+          type: "value",
+          splitNumber: 5,
+          min: 0,
+          minInterval: 1,
+          axisLabel: {
+            //重点在这一块，其余可以忽略
+            textStyle: {
+              color: "#212121", //更改坐标轴文字颜色
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              ype: "solid",
+              color: "#DDE1EE", //x线的颜色
+              width: "1", //坐标线的宽度
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              type: "dashed", // y轴分割线类型
+            },
+          },
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+        };
+      }
+      option && myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+
+    //自定义时间
+    // confirmtime() {
+    //   this.fromobj.statDateStart = this.customtime[0];
+    //   this.fromobj.statDateEnd = this.customtime[1];
+    //   this.TimetoAhoose = 8;
+    //   this.overviewreceptionOverview();
+    //   this.overviewreceptionData();
+    // },
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+
+@import "../theme.color.scss";
+
+.app-box-er {
+    width: 100%;
+    background: #ffffff;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+    margin-top: 15px;
+    padding: 15px;
+
+    .container {
+        display: grid;
+        grid-template-columns: repeat(5, 19%);
+        grid-column-gap: 12px;
+
+        /deep/ .el-card__body {
+            padding: 8px;
+            cursor: pointer;
+        }
+
+        .text1 {
+            height: 16px;
+            font-size: 16px;
+            font-weight: 400;
+            line-height: 16px;
+            text-indent: 20px;
+            margin-top: 10px;
+            color: #666666;
+        }
+
+        .text2 {
+            height: 32px;
+            font-size: 32px;
+            font-weight: normal;
+            line-height: 32px;
+            text-indent: 20px;
+            margin-top: 10px;
+        }
+
+        .text3 {
+            font-size: 14px;
+            margin: 10px 0;
+            width: 100%;
+            text-indent: 20px;
+            display: flex;
+            align-items: center;
+
+
+            .textUp {
+                font-size: 14px;
+                display: flex;
+                font-weight: 600;
+                color: rgba(231, 72, 60, 1);
+                background: rgba(253, 240, 239, 1);
+                align-items: center;
+                padding: 3px 12px 3px 0;
+                border-radius: 3px;
+                margin-left: 8px;
+
+                .up {
+                    font-size: 14px;
+                    display: block;
+                    width: 20px;
+                    height: 15px;
+                    background: url("../../../public/img/indexIcon/indexCardUp.png") no-repeat;
+                    background-size: 100%;
+                    margin-left: 8px;
+                }
+            }
+
+            .textDown {
+                font-size: 14px;
+                display: flex;
+                font-weight: 600;
+                color: rgba(7, 183, 157, 1);
+                background: rgba(235, 250, 246, 1);
+                align-items: center;
+                padding: 3px 12px 3px 0;
+                border-radius: 3px;
+                margin-left: 8px;
+
+                .down {
+                    display: block;
+                    width: 20px;
+                    height: 15px;
+                    background: url("../../../public/img/indexIcon/indexCardDown.png") no-repeat;
+                    background-size: 100%;
+                    margin-left: 8px;
+                }
+            }
+        }
+
+
+    }
+
+    .tophovese {
+        border: 1px solid #2671e2 !important;
+        background: rgba(38, 113, 226, 0.04);
+    }
+}
+
+
+
+
+#main {
+  width: 100%;
+  height: 380px;
+}
+</style>
diff --git a/src/components/theme.color.scss b/src/components/theme.color.scss
new file mode 100644
index 0000000..878bd21
--- /dev/null
+++ b/src/components/theme.color.scss
@@ -0,0 +1,14 @@
+$color1: #5B8FF9;
+$color2: #E6625B;
+$color3: #FF981E;
+$color4: #F6BD16;
+$color5: #07B79D;
+$color6: #9B6BDF;
+$color7: #5B8FF9;
+$color8: #FF99C3;
+$color9: #1E9493;
+$color10: #BA3FB7;
+$color11: #54BEF3;
+$color12: #3C21F7;
+$color13: #F87148;
+$color14: #3EB171;
\ No newline at end of file
diff --git a/src/page/check/index.vue b/src/page/check/index.vue
index ab5cfab..758d771 100644
--- a/src/page/check/index.vue
+++ b/src/page/check/index.vue
@@ -10,7 +10,7 @@
     <div class="content">
       <!-- 质控后台 -->
       <div class="tab" @click="goindex(0)" v-if="tabFlag1">
-        <div><img src="/img/checktab1.png" alt="" /></div>
+        <div><img src="../../../public/logoPng.png" alt="" style="width:auto;"/></div>
         <div class="text">AI销讲助手后台</div>
       </div>
       <div class="tab" @click="goindex(1)" v-if="tabFlag2">
diff --git a/src/page/wel.vue b/src/page/wel.vue
index 9cb6457..a07732d 100644
--- a/src/page/wel.vue
+++ b/src/page/wel.vue
@@ -278,9 +278,9 @@
       <div class="app-box-san">
         <div class="zuo">
           <div class="title">
-            <div class="text1">场景执行率
+            <div class="text1">维度触达占比
               <el-tooltip effect="light"
-                content="筛选时间内，场景执行率=场景执行的接待次数/有效接待数*100%,例如：品牌介绍，10次有效接待，有5次接待中都出现了品牌介绍，场景执行率=5/10*100%=50%；"
+                content="筛选时间内，场景触达率=有效接待的场景执行率的之和/有效接待数，例如：品牌介绍，第1次接待执行了100%，第2次接待没有执行，场景触达率=（100+0）/2=50%；"
                 placement="bottom-end">
                 <i class="el-icon-question" style="color:#74A3EA"></i>
               </el-tooltip>
diff --git a/src/views/ReceivingRecords/index.vue b/src/views/ReceivingRecords/index.vue
index 0689fe8..848efba 100644
--- a/src/views/ReceivingRecords/index.vue
+++ b/src/views/ReceivingRecords/index.vue
@@ -304,7 +304,7 @@
     <div class="cen-tab">
       <el-table :data="tableData" stripe style="width: 100%">
         <el-table-column
-          prop="staTime"
+          prop="staTimeOfCN"
           label="接待开始时间"
           align="center"
           width="200"