From fa1edfaaff7819de2776129a4237d476d8c836dd Mon Sep 17 00:00:00 2001
From: wangxiaohua <1214073490@qq.com>
Date: Thu, 2 Sep 2021 16:03:05 +0800
Subject: [PATCH] init

---
 public/index.html |   1 +
 src/page/wel.vue  | 441 +++++++++++++++++++++++++++++-----------------
 2 files changed, 284 insertions(+), 158 deletions(-)

diff --git a/public/index.html b/public/index.html
index 13cabc9..751aa33 100644
--- a/public/index.html
+++ b/public/index.html
@@ -41,6 +41,7 @@
 </div>
 <!-- built files will be auto injected -->
 <script src="<%= BASE_URL %>cdn/avue/index.js" charset="utf-8"></script>
+<script src="//at.alicdn.com/t/font_2785546_aytu0q7bl38.js"></script>
 <script>
   var _hmt = _hmt || [];
   (function() {
diff --git a/src/page/wel.vue b/src/page/wel.vue
index 01a4471..3842453 100644
--- a/src/page/wel.vue
+++ b/src/page/wel.vue
@@ -1,185 +1,310 @@
 <template>
-  <div>
-    <basic-container>
-      <div class="banner-text">
-        <span>
-          <a href="https://avue.top/#/pay" target="_blank">
-            <img src="https://img.shields.io/badge/Avue-2.6.15-green.svg" alt="Build Status">
-          </a>
-          <img src="https://img.shields.io/badge/Spring%20Boot-2.3.6.RELEASE-yellowgreen.svg" alt="Downloads">
-          <img src="https://img.shields.io/badge/Spring%20Cloud-Hoxton.SR9-blue.svg" alt="Coverage Status">
-        </span>
-        <br>
+  <div class="box-center">
+     <!-- <svg-icon
+        style="width: 80%;height: 80%;color: red"
+      :icon-class="rising"
+      :class-name="rising"
+      /> -->
+      <!-- 卡片部分 -->
+      <div class="page-container">
+          <div class="pagechen">
+            <div class="pageboxtitle1">接待客户 (个)</div>
+            <div class="pageboxtitle2">
+              <div class="span1">5020</div>
+              <div class="span2">
+                <span class="span2-1"> 昨日:288</span>
+                <span class="span2-2">25%</span>
+              </div>
+            </div>
+          </div>
+           <div class="pagechen">
+            <div class="pageboxtitle1">正在接待客户 (个)</div>
+            <div class="pageboxtitle2">
+              <div class="span1">20</div>
+            </div>
+          </div>
+           <div class="pagechen">
+            <div class="pageboxtitle1">等待接待客户 (个)</div>
+            <div class="pageboxtitle2">
+              <div class="span1">50</div>
+            </div>
+          </div>
+           <div class="pagechen">
+            <div class="pageboxtitle1">值班顾问 (个)</div>
+            <div class="pageboxtitle2">
+              <div class="span1">520</div>
+            </div>
+          </div>
+           <div class="pagechen">
+            <div class="pageboxtitle1">空闲顾问 (个)</div>
+            <div class="pageboxtitle2">
+              <div class="span1">5</div>
+            </div>
+          </div>
+      </div>
+       <div style=" margin-top: 20px;" class="page-container">
+          <div class="pagechen">
+             <div class="pageboxtitle1">平均录音时长 (分钟)</div>
+            <div class="pageboxtitle2">
+                 <div class="span1">5020</div>
+             <div class="span2">
+               <span class="span2-1"> 昨日:288</span>
+               <span class="span2-2">25%</span>
+             </div>
+            </div>
+          </div>
+          <div class="pagechen">
+             <div class="pageboxtitle1">平均执行率 (%)</div>
+            <div class="pageboxtitle2">
+                 <div class="span1">20</div>
+             <div class="span2">
+               <span class="span2-1"> 昨日:288</span>
+               <span class="span2-2">25%</span>
+             </div>
+            </div>
+          </div>
+          <div class="pagechen">
+             <div class="pageboxtitle1">平均禁忌执行率 (%)</div>
+            <div class="pageboxtitle2">
+                 <div class="span1">50</div>
+             <div class="span2">
+               <span class="span2-1"> 昨日:288</span>
+               <span class="span2-2">25%</span>
+             </div>
+            </div>
+          </div>
+          <div class="pagechen">
+             <div class="pageboxtitle1">接到平均得分 (分)</div>
+            <div class="pageboxtitle2">
+                  <div class="span1">80</div>
+             <div class="span2">
+               <span class="span2-1"> 昨日:288</span>
+               <span class="span2-2">25%</span>
+             </div>
+            </div>
+          </div>
+          <div class="pagechen">
+             <div class="pageboxtitle1">急需充电的工牌 (个)</div>
+            <div class="pageboxtitle2">
+                 <div class="span1">2</div>
+            </div>
+          </div>
+      </div>
+      <!-- 列表部分 -->
+      <div class="table-box">
+        <div class="title">急需充电的工牌</div>
+        <div class="tabbox">
+           <el-table
+            :header-cell-style="{background:'#F2F4F5'}"
+            :data="tableData"
+            height="300"
+            style="width: 100%">
+            <el-table-column
+              prop="name"
+              label="顾问"
+              align="center">
+            </el-table-column>
+
+            <el-table-column
+              prop="num"
+              label="电话"
+              align="center">
+            </el-table-column>
+
+            <el-table-column
+              prop="address"
+              label="状态"
+              align="center">
+            </el-table-column>
 
-        <span>
-          <el-collapse v-model="activeNames">
-            <el-collapse-item  name="1">
-              <div>基于Spring Cloud Gateway</div>
-              <div>基于Spring Cloud 2020</div>
-              <div>基于Spring Boot 2.4.1.RELEASE</div>
-              <div>基于Spring Cloud Alibaba 2.2.3.RELEASE</div>
-            </el-collapse-item>
-            <el-collapse-item  name="2">
-              <div>基于Spring Security OAuth实现鉴权体系；</div>
-              <div>深度定制，支持全流程的登录授权，Server Resource</div>
-            </el-collapse-item>
-            <el-collapse-item  name="3">
-              <div>支持docker部署</div>
-              <div>支持Rancher2 + Kubernetes部署</div>
-              <div>支持企业Paas Rainbond 部署</div>
-            </el-collapse-item>
-            <el-collapse-item  name="4">
-              <div>基于开源LCN 分布式事务解决方案深度定制</div>
-              <div>完美兼容2.X，优化集群部署，提升性能</div>
-            </el-collapse-item>
-            <el-collapse-item  name="5">
-              <div>扩展Spring Cache无缝兼容</div>
-              <div>支持开发过程无感知</div>
-            </el-collapse-item>
-            <el-collapse-item  name="6">
-              <div>基于activiti5.22整合OAuth2</div>
-              <div>支持在线流程设计</div>
-            </el-collapse-item>
-            <el-collapse-item name="7">
-              <div>支持数据库存储SCG路由信息</div>
-              <div>支持前端动态编辑</div>
-            </el-collapse-item>
-            <el-collapse-item  name="8">
-              <div>单点登录</div>
-              <div>扩展SBA支持服务监听事件redis保存</div>
-              <div>扩展Turbine,定制展示UI</div>
-              <div>扩展ResourceServer完全屏蔽实现细节开发更简单</div>
-            </el-collapse-item>
-          </el-collapse>
-        </span>
+            <el-table-column
+              prop="date"
+              label="电量"
+              align="center">
+            </el-table-column>
+           </el-table>
+        </div>
       </div>
 
-    </basic-container>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-
 export default {
   name: 'Wel',
   data() {
     return {
-      activeNames: ['1', '2', '3', '4'],
-      DATA: [],
-      text: '',
-      actor: '',
-      count: 0,
-      isText: false
+         tableData: [
+           {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          {
+            date: '80%',
+            name: '王小虎',
+            address: '正在录音',
+            num:'18655732363'
+          },
+          ]
     }
   },
-  computed: {
-    ...mapGetters(['website'])
-  },
   methods: {
-    getData() {
-      if (this.count < this.DATA.length - 1) {
-        this.count++
-      } else {
-        this.count = 0
-      }
-      this.isText = true
-      this.actor = this.DATA[this.count]
-    },
-    setData() {
-      let num = 0
-      let count = 0
-      let active = false
-      const timeoutstart = 5000
-      const timeoutend = 1000
-      const timespeed = 10
-      setInterval(() => {
-        if (this.isText) {
-          if (count == this.actor.length) {
-            active = true
-          } else {
-            active = false
-          }
-          if (active) {
-            num--
-            this.text = this.actor.substr(0, num)
-            if (num == 0) {
-              this.isText = false
-              setTimeout(() => {
-                count = 0
-                this.getData()
-              }, timeoutend)
-            }
-          } else {
-            num++
-            this.text = this.actor.substr(0, num)
-            if (num == this.actor.length) {
-              this.isText = false
-              setTimeout(() => {
-                this.isText = true
-                count = this.actor.length
-              }, timeoutstart)
-            }
-          }
-        }
-      }, timespeed)
-    }
+
+
   }
 }
 </script>
 
 <style scoped="scoped" lang="scss">
-  .el-collapse-item__header {
-    display: block !important;
-  }
-
-  .wel-contailer {
-    position: relative;
-  }
-
-  .banner-text {
-    position: relative;
-    padding: 0 20px;
-    font-size: 20px;
-    text-align: center;
-    color: #333;
+.box-center{
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  min-width: 1300px;
+}
+.page-container{
+  width: 100%;
+  display: flex;
+  .pagechen{
+    flex: 1;
+    min-width: 223px;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+    border-radius: 4px;
+    margin-right: 20px;
+    padding: 20px;
+    .pageboxtitle1{
+      width: 100%;
+      font-size: 16px;
+      font-weight: 400;
+      color: #666666;
+      line-height: 16px;
+    }
+    .pageboxtitle2{
+      width: 100%;
+      margin-top: 14px;
+      display: flex;
+      flex-wrap: wrap;
+      .span1{
+        width: 100px;
+          height: 30px;
+        font-size: 30px;
+        font-weight: normal;
+        color: #32363D;
+        line-height: 30px;
+      }
+       .span2{
+         height: 30px;
+         font-size: 16px;
+         display:flex;
+         align-items:flex-end;
+         .span2-1{
+           color: #424D64;
+           margin-right: 15px;
+           font-weight: 400;
+         }
+         .span2-2{
+           font-weight: 600;
+           color: #E6273A;
+         }
+      }
+    }
   }
-
-  .banner-img {
-    position: absolute;
-    top: 0;
-    left: 0;
+}
+.table-box{
+  width:98.8%;
+  height: 400px;
+  background: #FFFFFF;
+  border-radius: 4px;
+  margin-top: 24px;
+  .title{
     width: 100%;
-    height: 100%;
-    opacity: 0.8;
-    display: none;
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+    text-indent: 30px;
+    font-weight: 500;
+    color: #32363D;
+    border-bottom: 1px solid #E6E6E6;
   }
-
-  .actor {
-    height: 250px;
-    overflow: hidden;
-    font-size: 18px;
-    color: #333;
-  }
-
-  .actor:after {
-    content: '';
-    width: 3px;
-    height: 25px;
-    vertical-align: -5px;
-    margin-left: 5px;
-    background-color: #333;
-    display: inline-block;
-    animation: blink 0.4s infinite alternate;
+  .tabbox{
+    padding-left: 30px;
+    padding-right: 30px;
+    margin-top: 20px;
   }
-
-  .typeing:after {
-    animation: none;
-  }
-
-  @keyframes blink {
-    to {
-      opacity: 0;
+}
+ .el-row {
+    margin-bottom: 20px;
+    &:last-child {
+      margin-bottom: 0;
     }
   }
 </style>