卡片优化

src/views/Statistics/ReceptionOverview.vue

@@ -5,18 +5,8 @@
       <div class="app-titel" v-if="role != 3" style="margin-bottom: 10px">
         <div class="titel-text">项目选择:</div>
         <div style="margin-left: 26px">
-          <el-select
-            v-model="houseId"
-            filterable
-            placeholder="请选择"
-            @change="houseChange"
-          >
-            <el-option
-              v-for="item in houseList"
-              :key="item.id"
-              :label="item.propertyName"
-              :value="item.id"
-            >
+          <el-select v-model="houseId" filterable placeholder="请选择" @change="houseChange">
+            <el-option v-for="item in houseList" :key="item.id" :label="item.propertyName" :value="item.id">
             </el-option>
           </el-select>
         </div>
@@ -35,17 +25,9 @@
           </div>
         </div>
         <div style="margin-left: 26px">
-          <el-date-picker
-            @change="confirmtime()"
-            v-model="customtime"
-            type="daterange"
-            range-separator="-"
-            :default-time="['00:00:00', '23:59:59']"
-            value-format="yyyy-MM-dd"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :picker-options="pickerOptions"
-          >
+          <el-date-picker @change="confirmtime()" v-model="customtime" type="daterange" range-separator="-"
+            :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd" start-placeholder="开始日期"
+            end-placeholder="结束日期" :picker-options="pickerOptions">
           </el-date-picker>
         </div>
       </div>
@@ -53,123 +35,127 @@
 
     <!-- 二 -->
     <div class="app-box-er">
-      <div class="container">
-         <div class="grid-content" @click="Overviewxlick('4')">
-          <div class="text1" :class="{ tophovese: cardindex == 4 }">
-            平均执行率(%)
-            <el-tooltip effect="light" content="筛选时间内，有效接待（不包含待接单）的平均执行率；" placement="bottom-end">
+      <div class="container tabcard">
+        <el-card shadow="hover" :class="{ tophovese: cardindex == 4 }">
+          <div @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 class="text2" :class="{ tophovese: cardindex == 4 }">
-            {{ cardobj.fraction || 0 }}
-          </div>
-
-          <div class="text3">
-            <span>环比 &nbsp;&nbsp; {{ cardobjs.fraction || 0 }}</span>
-            <span
-              class="cycle-to"
-              :class="{
-                'el-icon-caret-bottom': cardobjCycle.avgFration < 0,
-                'el-icon-caret-top': cardobjCycle.avgFration > 0,
-              }"
-              >{{ cardobjCycle.avgFration || 0 }}</span
-            >
-          </div>
-        </div>
-        <div class="grid-content" @click="Overviewxlick('3')">
-          <div class="text1" :class="{ tophovese: cardindex == 3 }">
-            平均接待时长
-            <el-tooltip effect="light" content="筛选时间内，有效接待（不包含待接单）的平均录音时长，单位分钟；" placement="bottom-end">
+        </el-card>
+        <el-card shadow="hover" :class="{ tophovese: cardindex == 3 }">
+          <div @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 class="text2" :class="{ tophovese: cardindex == 3 }">
-            {{ cardobj.avgDuration || 0 }}
-          </div>
-
-          <div class="text3">
-            <span>环比 &nbsp;&nbsp; {{ cardobjs.avgDuration || 0 }}</span>
-            <span
-              class="cycle-to el-icon-caret-bottom"
-              :class="{ 
-                'el-icon-caret-bottom': cardobjCycle.receptionTimeWithAvg < 0,
-                'el-icon-caret-top': cardobjCycle.receptionTimeWithAvg > 0,
-              }"
-              >{{ cardobjCycle.receptionTimeWithAvg || 0 }}</span
-            >  
-          </div>
-        </div>
-        <div class="grid-content" @click="Overviewxlick('1')">
-          <div class="text1" :class="{ tophovese: cardindex == 1 }">接待量
-          <el-tooltip effect="light" content="筛选时间内，已经结束的接待条数，不包含待接单；" placement="bottom-end">
+        </el-card>
+        <el-card shadow="hover" :class="{ tophovese: cardindex == 1 }">
+          <div @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" :class="{ tophovese: cardindex == 1 }">
-            {{ cardobj.receptionCount || 0 }}
-          </div>
-          <div class="text3">
-            <span>环比 &nbsp;&nbsp; {{ cardobjs.receptionCount || 0 }}</span>
-            <span
-              class="cycle-to el-icon-caret-bottom"
-              :class="{
-                'el-icon-caret-bottom': cardobjCycle.receptionCount < 0,
-                'el-icon-caret-top': cardobjCycle.receptionCount > 0,
-              }"
-              >{{ cardobjCycle.receptionCount || 0 }}</span
-            >
+            </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>
-
-        <div class="grid-content" @click="Overviewxlick('2')">
-          <div class="text1" :class="{ tophovese: cardindex == 2 }">
-            有效接待
-            <el-tooltip effect="light" content="筛选时间内，标记为有效的接待数，不包含待接单；" placement="bottom-end">
+        </el-card>
+        <el-card shadow="hover" :class="{ tophovese: cardindex == 2 }">
+          <div @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 class="text2" :class="{ tophovese: cardindex == 2 }">
-            {{ cardobj.activeCustomer || 0 }}
-          </div>
-          <div class="text3">
-            <span>环比 &nbsp;&nbsp; {{ cardobjs.activeCustomer || 0 }}</span>
-            <span
-              class="cycle-to el-icon-caret-bottom"
-              :class="{
-                'el-icon-caret-bottom': cardobjCycle.activeCustomer < 0,
-                'el-icon-caret-top': cardobjCycle.activeCustomer > 0,
-              }"
-              >{{ cardobjCycle.activeCustomer || 0 }}</span
-            >
-          </div>
-        </div>
-
-        <div class="grid-content" @click="Overviewxlick('5')">
-          <div class="text1" :class="{ tophovese: cardindex == 5 }">
-            违禁接待次数
-            <el-tooltip effect="light" content="筛选时间内，出现违禁的接待次数，不包含待接单/无效接待/无效违禁；" placement="bottom-end">
+        </el-card>
+        <el-card shadow="hover" :class="{ tophovese: cardindex == 5 }">
+          <div @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 class="text2" :class="{ tophovese: cardindex == 5 }">
-            {{ cardobj.prohibitedCustomer || 0 }}
-          </div>
-
-          <div class="text3">
-            <span
-              >环比 &nbsp;&nbsp; {{ cardobjs.prohibitedCustomer || 0 }}</span
-            >
-            <span
-              class="cycle-to el-icon-caret-bottom"
-              :class="{
-                'el-icon-caret-bottom': cardobjCycle.prohibitedCount < 0,
-                'el-icon-caret-top': cardobjCycle.prohibitedCount > 0,
-              }"
-              >{{ cardobjCycle.prohibitedCount || 0 }}</span
-            >
-          </div>
-        </div>
+        </el-card>
       </div>
 
       <div id="main"></div>
@@ -181,18 +167,9 @@
         <div class="title">
           <div class="text1">团队执行率趋势</div>
           <div class="text2">
-            <el-select
-              style="width: 90%; margin: 0 auto"
-              @change="Pinspeaktap(1)"
-              v-model="departmentsri"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in departmentlist"
-                :key="item.deptId"
-                :label="item.name"
-                :value="item.deptId"
-              >
+            <el-select style="width: 90%; margin: 0 auto" @change="Pinspeaktap(1)" v-model="departmentsri"
+              placeholder="请选择">
+              <el-option v-for="item in departmentlist" :key="item.deptId" :label="item.name" :value="item.deptId">
               </el-option>
             </el-select>
           </div>
@@ -213,18 +190,10 @@
         <div class="title">
           <div class="text1">顾问执行率趋势</div>
           <div class="text2">
-            <el-select
-              style="width: 90%; margin: 0 auto"
-              @change="Pinspeaktap(2)"
-              v-model="consultantsri"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in consultantlist"
-                :key="item.accountId"
-                :label="item.name"
-                :value="item.accountId"
-              >
+            <el-select style="width: 90%; margin: 0 auto" @change="Pinspeaktap(2)" v-model="consultantsri"
+              placeholder="请选择">
+              <el-option v-for="item in consultantlist" :key="item.accountId" :label="item.name"
+                :value="item.accountId">
               </el-option>
             </el-select>
           </div>
@@ -249,12 +218,7 @@
         <div class="title">
           <div class="text1" style="font-size: 14px;">顾问{{ activeName | abName }}排名（TOP10）</div>
           <div style="font-size: 14px;" class="text2">
-            <el-menu
-              :default-active="activeName"
-              mode="horizontal"
-              @select="handleClick"
-             
-            >
+            <el-menu :default-active="activeName" mode="horizontal" @select="handleClick">
               <el-menu-item style="font-size: 12px;" index="3">平均执行率</el-menu-item>
               <el-menu-item style="font-size: 12px;" index="0">接待量</el-menu-item>
               <el-menu-item style="font-size: 12px;" index="1">接待时长</el-menu-item>
@@ -284,23 +248,17 @@
             </div>
           </template>
         </div>
-        <div
-          v-if="ceratelist.list.length != 0"
-          style="
+        <div v-if="ceratelist.list.length != 0" style="
             height: 360px;
             width: 94%;
             margin: 0 auto;
             margin-top: 15px;
             margin-bottom: 16px;
-          "
-        >
+          ">
           <div class="jinbox" v-for="(item, i) in ceratelist.list" :key="i">
             <div class="jinboxtit">{{ item.name }}</div>
             <div class="jinbox-box">
-              <div
-                class="boxbaifenbi"
-                :style="'width:' + item.zxl1 + '%;'"
-              ></div>
+              <div class="boxbaifenbi" :style="'width:' + item.zxl1 + '%;'"></div>
             </div>
             <div class="jinboxbott">
               {{ item.zxl || 0 }}{{ activeName | company }}
@@ -381,29 +339,25 @@
       <div class="zuo">
         <div class="title">
           <div class="text1">场景执行率
-              <el-tooltip effect="light" content="筛选时间内，场景执行率=场景执行的接待次数/有效接待数*100%,例如：品牌介绍，10次有效接待，有5次接待中都出现了品牌介绍，场景执行率=5/10*100%=50%；" placement="bottom-end">
-                <i class="el-icon-question" style="color:#74A3EA"></i>
-              </el-tooltip>
-            </div>
+            <el-tooltip effect="light"
+              content="筛选时间内，场景执行率=场景执行的接待次数/有效接待数*100%,例如：品牌介绍，10次有效接待，有5次接待中都出现了品牌介绍，场景执行率=5/10*100%=50%；"
+              placement="bottom-end">
+              <i class="el-icon-question" style="color:#74A3EA"></i>
+            </el-tooltip>
+          </div>
         </div>
-        <div
-          v-if="Zxllist.length != 0"
-          style="
+        <div v-if="Zxllist.length != 0" style="
             overflow-y: auto;
             height: 320px;
             width: 94%;
             margin: 0 auto;
             margin-top: 15px;
             margin-bottom: 16px;
-          "
-        >
+          ">
           <div class="jinbox" v-for="(item, i) in Zxllist" :key="i">
             <div class="jinboxtit">{{ item.name }}</div>
             <div class="jinbox-box">
-              <div
-                class="boxbaifenbi"
-                :style="'width:' + item.zxl + '%;'"
-              ></div>
+              <div class="boxbaifenbi" :style="'width:' + item.zxl + '%;'"></div>
             </div>
             <div class="jinboxbott">{{ item.zxl }}%</div>
           </div>
@@ -418,46 +372,33 @@
       <div class="you">
         <div class="title">
           <div class="text1">指标执行率
-              <el-tooltip effect="light" content="筛选时间内，指标执行率=指标执行的接待次数/有效接待数*100%,例如：品牌介绍，10次有效接待，有5次接待中都出现了品牌介绍，指标执行率=5/10*100%=50%；" placement="bottom-end">
-                <i class="el-icon-question" style="color:#74A3EA"></i>
-              </el-tooltip>
-            </div>
+            <el-tooltip effect="light"
+              content="筛选时间内，指标执行率=指标执行的接待次数/有效接待数*100%,例如：品牌介绍，10次有效接待，有5次接待中都出现了品牌介绍，指标执行率=5/10*100%=50%；"
+              placement="bottom-end">
+              <i class="el-icon-question" style="color:#74A3EA"></i>
+            </el-tooltip>
+          </div>
           <div class="text2"></div>
           <div class="text2">
-            <el-select
-              style="width: 90%; margin: 0 auto"
-              @change="zxltapchang()"
-              v-model="marketingId"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="item in Zxllist"
-                :key="item.marketingId"
-                :label="item.name"
-                :value="item.marketingId"
-              >
+            <el-select style="width: 90%; margin: 0 auto" @change="zxltapchang()" v-model="marketingId"
+              placeholder="请选择">
+              <el-option v-for="item in Zxllist" :key="item.marketingId" :label="item.name" :value="item.marketingId">
               </el-option>
             </el-select>
           </div>
         </div>
-        <div
-          v-if="Zxllistchildren.length != 0"
-          style="
+        <div v-if="Zxllistchildren.length != 0" style="
             overflow-y: auto;
             height: 320px;
             width: 94%;
             margin: 0 auto;
             margin-top: 15px;
             margin-bottom: 16px;
-          "
-        >
+          ">
           <div class="jinbox" v-for="(item, i) in Zxllistchildren" :key="i">
             <div class="jinboxtit">{{ item.name }}</div>
             <div class="jinbox-box">
-              <div
-                class="boxbaifenbi"
-                :style="'width:' + item.zxl + '%;'"
-              ></div>
+              <div class="boxbaifenbi" :style="'width:' + item.zxl + '%;'"></div>
             </div>
             <div class="jinboxbott">{{ item.zxl }}%</div>
           </div>
@@ -1400,11 +1341,96 @@ export default {
   min-width: 1000px;
   padding-bottom: 100px;
 }
+.tabcard{
+    /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);
+    color: #666 !important;
+  }
+}
 .container {
   display: grid;
   grid-template-columns: repeat(5, 19%);
   grid-column-gap: 12px;
+
+
 }
 
 // 进度条
@@ -1416,6 +1442,7 @@ export default {
   font-size: 16px;
   color: #2c3542;
   margin-top: 20px;
+
   .jinboxtit {
     width: 14%;
     height: 18px;
@@ -1424,21 +1451,25 @@ export default {
     text-overflow: ellipsis;
     overflow: hidden;
   }
+
   .jinbox-box {
     width: 75%;
     height: 100%;
     border-radius: 8px;
     background: #f2f2f2;
   }
+
   .boxbaifenbi {
     height: 100%;
     background: #60d7a0;
     border-radius: 8px;
   }
+
   .boxbaifenbi2 {
     height: 100%;
     background: #5b8ff9;
   }
+
   .jinboxbott {
     width: 16%;
     text-indent: 20px;
@@ -1449,39 +1480,47 @@ export default {
   width: 100%;
   height: 380px;
 }
+
 #Brokenline1 {
   width: 100%;
   height: 350px;
 }
+
 #Brokenline2 {
   width: 100%;
   height: 350px;
 }
+
 #Pinspeak1 {
   width: 100%;
   height: 350px;
 }
+
 #Pinspeak2 {
   width: 100%;
   height: 350px;
 }
+
 .app-box-san {
   width: 100%;
   // height: 400px;
   display: flex;
   margin-top: 15px;
+
   .zuo {
     flex: 1;
     height: 100%;
     margin-right: 15px;
     background: #ffffff;
     border-radius: 4px;
+
     .title {
       width: 100%;
       height: 55px;
       border-bottom: 1px solid #e0e0e0;
       display: flex;
       align-content: center;
+
       .text1 {
         flex-grow: 1;
         line-height: 55px;
@@ -1490,6 +1529,7 @@ export default {
         font-size: 16px;
         color: #333333;
       }
+
       .text2 {
         flex-grow: 1;
         height: 55px;
@@ -1498,17 +1538,20 @@ export default {
       }
     }
   }
+
   .you {
     height: 100%;
     flex: 1;
     background: #ffffff;
     border-radius: 4px;
+
     .title {
       width: 100%;
       height: 55px;
       border-bottom: 1px solid #e0e0e0;
       display: flex;
       align-content: center;
+
       .text1 {
         flex-grow: 1;
         line-height: 55px;
@@ -1517,6 +1560,7 @@ export default {
         font-size: 16px;
         color: #333333;
       }
+
       .text2 {
         flex-grow: 1;
         height: 55px;
@@ -1535,6 +1579,7 @@ export default {
   margin-top: 15px;
   padding: 15px;
 }
+
 .grid-content {
   background: #ffffff;
   min-height: 90px;
@@ -1572,9 +1617,11 @@ export default {
   color: #ffffff;
   background: #2671e2;
 }
+
 .tophovese {
-  color: #2671e2;
+  // color: #2671e2;
 }
+
 .app-top {
   width: 100%;
   background: #ffffff;
@@ -1583,10 +1630,12 @@ export default {
   padding-top: 15px;
   padding-bottom: 15px;
 }
+
 .app-titel {
   width: 100%;
   display: flex;
   align-items: center;
+
   .titel-text {
     height: 100%;
     font-size: 16px;
@@ -1594,6 +1643,7 @@ export default {
     color: #32363d;
     text-indent: 30px;
   }
+
   .toptimeqhuan {
     width: 190px;
     height: 32px;
@@ -1606,6 +1656,7 @@ export default {
     margin-left: 20px;
     cursor: pointer;
   }
+
   .toptimeqhuan div {
     flex: 1;
     text-align: center;
@@ -1613,14 +1664,17 @@ export default {
     font-size: 14px;
   }
 }
+
 .hejisan {
   width: 92%;
   margin: 0 auto;
   display: flex;
   margin-top: 15px;
+
   .text1-1 {
     color: #666666;
   }
+
   .text1-2 {
     color: #333333;
     margin-top: 10px;

src/views/Statistics/houseDataSys.vue

@@ -66,22 +66,28 @@
 
     <div class="app-box-er">
       <div class="container1">
-        <div class="grid-content">
-          <div class="text1">服务期内项目数</div>
-          <div class="text2">
-            {{ firstTab.houseQofEnough || 0 }}
+        <div class="cardItem" @click="changeTab('服务期内项目数')" :class="{ borderCss: tabName == '服务期内项目数' }">
+          <span>服务期内项目数</span>
+          <h2>{{ firstTab.houseQofEnough || 0 }}</h2>
+          <div class="sel" :class="{ seled: tabName == '服务期内项目数' }">
+            <i v-show="tabName == '服务期内项目数'" class="el-icon-check"
+              style="font-size:22px;color:#FFF;position: absolute;right: 2px;bottom: -42px;"></i>
           </div>
         </div>
-        <div class="grid-content">
-          <div class="text1">过期项目数</div>
-          <div class="text2">
-            {{ firstTab.houseQofUnenough || 0 }}
+        <div class="cardItem" @click="changeTab('过期项目数')" :class="{ borderCss: tabName == '过期项目数' }">
+          <span>过期项目数</span>
+          <h2>{{ firstTab.houseQofUnenough || 0 }}</h2>
+          <div class="sel" :class="{ seled: tabName == '过期项目数' }">
+            <i v-show="tabName == '过期项目数'" class="el-icon-check"
+              style="font-size:22px;color:#FFF;position: absolute;right: 2px;bottom: -42px;"></i>
           </div>
         </div>
-        <div class="grid-content">
-          <div class="text1">累计项目数</div>
-          <div class="text2">
-            {{ firstTab.houseQuantity || 0 }}
+        <div class="cardItem" @click="changeTab('累计项目数')" :class="{ borderCss: tabName == '累计项目数' }">
+          <span>过期项目数</span>
+          <h2>{{ firstTab.houseQuantity || 0 }}</h2>
+          <div class="sel" :class="{ seled: tabName == '累计项目数' }">
+            <i v-show="tabName == '累计项目数'" class="el-icon-check"
+              style="font-size:22px;color:#FFF;position: absolute;right: 2px;bottom: -42px;"></i>
           </div>
         </div>
       </div>
@@ -172,36 +178,30 @@
         </div>
       </div>
 
-      <div class="container">
-        <div
-          class="grid-content"
-          @click="secondChange('1')"
-          style="height: auto; padding-bottom: 10px; cursor: pointer"
-        >
-          <div class="text1" :class="{ tophovese: secindex == 1 }">
-            活跃项目数
-          </div>
-          <div class="text2" :class="{ tophovese: secindex == 1 }">
-            {{ compare.activeHouseQuantity || 0 }}
-          </div>
-          <div class="text33" v-if="selectTime1">
-            <div>
-              对比时段:
-              <span style="text-indent: 20px">{{
-                compare1.activeHouseQuantity || 0
-              }}</span>
+      <div class="container tabcard">
+        <el-card shadow="hover" :class="{ tophovese: secindex == 1 }">
+          <div @click="secondChange('1')">
+            <div class="text1">
+              活跃项目数
             </div>
-            <div
-              :style="
-                compare2.activeHouseQuantity >= 0
-                  ? 'color:green;'
-                  : 'color:red;'
-              "
-            >
-              {{ compare2.activeHouseQuantity || 0 }}
+            <div class="text2">
+              {{ compare.activeHouseQuantity  || 0 }}
+            </div>
+            <div class="text3">
+              <span>对比 {{ compare1.activeHouseQuantity || 0 }}</span>
+              <span class="textUp" v-if="compare2.activeHouseQuantity > 0">
+                +{{ compare2.activeHouseQuantity || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="compare2.activeHouseQuantity < 0">
+                {{ compare2.activeHouseQuantity || 0 }}
+                <i class="down"></i>
+              </span>
             </div>
           </div>
-        </div>
+        </el-card>
+
+
       </div>
       <div id="main"></div>
     </div>
@@ -287,6 +287,7 @@ export default {
       ],
       operaFlag:true,
       info:{},
+      tabName: ""
     };
   },
   mounted() {
@@ -308,6 +309,9 @@ export default {
     this.tabtimetap(4);
   },
   methods: {
+    changeTab(i) {
+      this.tabName = i;
+    },
     sysChange() {
       this.choicValue=''
       if(this.orgType==0){
@@ -715,13 +719,139 @@ export default {
 </script>
 
 <style scoped="scoped" lang="scss" >
+@import "../../components/theme.color.scss";
 .box-center {
   width: 100%;
   padding: 15px;
   min-width: 1000px;
   padding-bottom: 100px;
 }
+.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;
+
+  }
+}
+.tabcard{
+    /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);
+    color: #666 !important;
+  }
+}
 .container {
   display: grid;
   grid-template-columns: repeat(6, 16%);

src/views/Statistics/trend.vue

@@ -169,205 +169,149 @@
         </div>
       </div>
 
-      <div class="container">
-        <div
-          class="grid-content"
-          @click="secondChange('fraction', '平均执行率/%')"
-          style="height: auto; padding-bottom: 10px"
-        >
-          <div class="text1" :class="{ tophovese: secindex == 'fraction' }">
-            平均执行率
+      <div class="container tabcard">
+
+        <el-card shadow="hover" :class="{ tophovese: secindex == 'fraction' }">
+          <div @click="secondChange('fraction', '平均执行率/%')">
+            <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" :class="{ tophovese: secindex == 'fraction' }">
-            {{ compare.fraction || 0 }}<span style="margin-left:6px;font-size:24px;">%</span>
-          </div>
-          <div class="text33" v-if="selectTime1">
-            <div>
-              对比时段:
-              <span style="text-indent: 20px">{{
-                compare1.fraction || 0
-              }}</span>
             </div>
-            <div
-              :style="compare2.fraction >= 0 ? 'color:green;' : 'color:red;'"
-            >
-              {{ compare2.fraction || 0 }}%
+            <div class="text2">
+              {{ compare.fraction || 0 }}<span style="margin-left:6px;font-size:24px;">%</span>
+            </div>
+            <div class="text3" v-if="selectTime1">
+              <span>环比 {{ compare1.fraction || 0 }}</span>
+              <span class="textUp" v-if="compare2.fraction > 0">
+                +{{ compare2.fraction || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="compare2.fraction < 0">
+                {{ compare2.fraction || 0 }}
+                <i class="down"></i>
+              </span>
             </div>
           </div>
-        </div>
-        <div
-          class="grid-content"
-          @click="secondChange('avgDuration', '平均接待时长/分钟')"
-          style="height: auto"
-        >
-          <div class="text1" :class="{ tophovese: secindex == 'avgDuration' }">
-            平均接待时长
+        </el-card>
+        <el-card shadow="hover" :class="{ tophovese: secindex == 'avgDuration' }">
+          <div @click="secondChange('avgDuration', '平均接待时长/分钟')">
+            <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" :class="{ tophovese: secindex == 'avgDuration' }">
-            {{ compare.avgDuration || 0 }}
-          </div>
-          <div class="text33" v-if="selectTime1">
-            <div>
-              对比时段:
-              <span style="text-indent: 20px">{{
-                compare1.avgDuration || 0
-              }}</span>
             </div>
-            <div
-              :style="compare2.avgDuration >= 0 ? 'color:green;' : 'color:red;'"
-            >
-              {{ compare2.avgDuration || 0 }}
+            <div class="text2">
+              {{ compare.fraction || 0 }}
+            </div>
+            <div class="text3" v-if="selectTime1">
+              <span>环比 {{ compare1.avgDuration || 0 }}</span>
+              <span class="textUp" v-if="compare2.avgDuration > 0">
+                +{{ compare2.avgDuration || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="compare2.avgDuration < 0">
+                {{ compare2.avgDuration || 0 }}
+                <i class="down"></i>
+              </span>
             </div>
           </div>
-        </div>
-        <div
-          class="grid-content"
-          @click="secondChange('receptionCount', '接待客户/个')"
-          style="height: auto; padding-bottom: 10px"
-        >
-          <div
-            class="text1"
-            :class="{ tophovese: secindex == 'receptionCount' }"
-          >
-            接待量
+        </el-card>
+        <el-card shadow="hover" :class="{ tophovese: secindex == 'receptionCount' }">
+          <div @click="secondChange('receptionCount', '接待客户/个')">
+            <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"
-            :class="{ tophovese: secindex == 'receptionCount' }"
-          >
-            {{ compare.receptionCount || 0 }}
-          </div>
-          <div class="text33" v-if="selectTime1">
-            <div>
-              对比时段:
-              <span style="text-indent: 20px">{{
-                compare1.receptionCount || 0
-              }}</span>
             </div>
-            <div
-              :style="
-                compare2.receptionCount >= 0 ? 'color:green;' : 'color:red;'
-              "
-            >
-              {{ compare2.receptionCount || 0 }}
+            <div class="text2">
+              {{ compare.receptionCount || 0 }}
+            </div>
+            <div class="text3" v-if="selectTime1">
+              <span>环比 {{ compare1.receptionCount || 0 }}</span>
+              <span class="textUp" v-if="compare2.receptionCount > 0">
+                +{{ compare2.receptionCount || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="compare2.receptionCount < 0">
+                {{ compare2.receptionCount || 0 }}
+                <i class="down"></i>
+              </span>
             </div>
           </div>
-        </div>
-        <div
-          class="grid-content"
-          @click="secondChange('prohibitedCustomer', '违禁接待次数/次')"
-          style="height: auto; padding-bottom: 10px"
-        >
-          <div
-            class="text1"
-            :class="{ tophovese: secindex == 'prohibitedCustomer' }"
-          >
-            违禁接待次数
+        </el-card>
+        <el-card shadow="hover" :class="{ tophovese: secindex == 'prohibitedCustomer' }">
+          <div @click="secondChange('prohibitedCustomer', '违禁接待次数/次')">
+            <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"
-            :class="{ tophovese: secindex == 'prohibitedCustomer' }"
-          >
-            {{ compare.prohibitedCustomer || 0 }}
-          </div>
-          <div class="text33" v-if="selectTime1">
-            <div>
-              对比时段:
-              <span style="text-indent: 20px">{{
-                compare1.prohibitedCustomer || 0
-              }}</span>
             </div>
-            <div
-              :style="
-                compare2.prohibitedCustomer >= 0 ? 'color:green;' : 'color:red;'
-              "
-            >
-              {{ compare2.prohibitedCustomer || 0 }}
+            <div class="text2">
+              {{ compare.prohibitedCustomer || 0 }}
+            </div>
+            <div class="text3" v-if="selectTime1">
+              <span>环比 {{ compare1.prohibitedCustomer || 0 }}</span>
+              <span class="textUp" v-if="compare2.prohibitedCustomer > 0">
+                +{{ compare2.prohibitedCustomer || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="compare2.prohibitedCustomer < 0">
+                {{ compare2.prohibitedCustomer || 0 }}
+                <i class="down"></i>
+              </span>
             </div>
           </div>
-        </div>
-        <div
-          class="grid-content"
-          @click="secondChange('activeCustomer', '有效接待/次')"
-          style="height: auto; padding-bottom: 10px"
-        >
-          <div
-            class="text1"
-            :class="{ tophovese: secindex == 'activeCustomer' }"
-          >
-            有效接待
+        </el-card>
+        <el-card shadow="hover" :class="{ tophovese: secindex == 'activeCustomer' }">
+          <div @click="secondChange('activeCustomer', '有效接待/次')">
+            <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"
-            :class="{ tophovese: secindex == 'activeCustomer' }"
-          >
-            {{ compare.activeCustomer || 0 }}
-          </div>
-          <div class="text33" v-if="selectTime1">
-            <div>
-              对比时段:
-              <span style="text-indent: 20px">{{
-                compare1.activeCustomer || 0
-              }}</span>
             </div>
-            <div
-              :style="
-                compare2.activeCustomer >= 0 ? 'color:green;' : 'color:red;'
-              "
-            >
-              {{ compare2.activeCustomer || 0 }}
+            <div class="text2">
+              {{ compare.activeCustomer || 0 }}
+            </div>
+            <div class="text3" v-if="selectTime1">
+              <span>环比 {{ compare1.activeCustomer || 0 }}</span>
+              <span class="textUp" v-if="compare2.activeCustomer > 0">
+                +{{ compare2.activeCustomer || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="compare2.activeCustomer < 0">
+                {{ compare2.activeCustomer || 0 }}
+                <i class="down"></i>
+              </span>
             </div>
           </div>
-        </div>
-        <div
-          class="grid-content"
-          @click="secondChange('activeCustomerRate', '有效接待占比/%')"
-          style="height: auto; padding-bottom: 10px"
-        >
-          <div
-            class="text1"
-            :class="{ tophovese: secindex == 'activeCustomerRate' }"
-          >
-            有效接待占比
-          </div>
-          <div
-            class="text2"
-            :class="{ tophovese: secindex == 'activeCustomerRate' }"
-          >
-            {{ compare.activeCustomerRate || 0 }}<span style="margin-left: 6px;font-size: 24px;">%</span>
-          </div>
-          <div class="text33" v-if="selectTime1">
-            <div>
-              对比时段:
-              <span style="text-indent: 20px">{{
-                compare1.activeCustomerRate || 0
-              }}</span>
+        </el-card>
+        <el-card shadow="hover" :class="{ tophovese: secindex == 'activeCustomerRate' }">
+          <div @click="secondChange('activeCustomerRate', '有效接待占比/%')">
+            <div class="text1">
+              有效接待占比
             </div>
-            <div
-              :style="
-                compare2.activeCustomerRate >= 0 ? 'color:green;' : 'color:red;'
-              "
-            >
-              {{ compare2.activeCustomerRate || 0 }}%
+            <div class="text2">
+              {{ compare.activeCustomerRate || 0 }}
+            </div>
+            <div class="text3" v-if="selectTime1">
+              <span>环比 {{ compare1.activeCustomerRate || 0 }}</span>
+              <span class="textUp" v-if="compare2.activeCustomerRate > 0">
+                +{{ compare2.activeCustomerRate || 0 }}
+                <i class="up"></i>
+              </span>
+              <span class="textDown" v-if="compare2.activeCustomerRate < 0">
+                {{ compare2.activeCustomerRate || 0 }}
+                <i class="down"></i>
+              </span>
             </div>
           </div>
-        </div>
-        
+        </el-card>
       </div>
       <div id="main"></div>
     </div>
@@ -1017,7 +961,90 @@ export default {
   min-width: 1000px;
   padding-bottom: 100px;
 }
+.tabcard{
+  /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);
+    color: #666 !important;
+  }
+}
 .container {
   display: grid;
   grid-template-columns: repeat(6, 16%);