liumin
/
zkPCproject
0
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

init

newStyle
wangxiaohua 3 years ago
parent
5008228004
commit
fa1edfaaff
2 changed files with 284 additions and 158 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      public/index.html
  2. +283
    -158
      src/page/wel.vue

+ 1
- 0
public/index.html View File

@@ -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() {


+ 283
- 158
src/page/wel.vue View File

@@ -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>

Write Preview
Loading…
Cancel
Save