You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
597 lines
15 KiB
597 lines
15 KiB
<!--数据-首页-->
|
|
<template>
|
|
<view class="main_box">
|
|
<!--自定义导航栏-->
|
|
<view class="navbar_section">
|
|
<view class="title">数据</view>
|
|
</view>
|
|
|
|
<view class="count_section">
|
|
<view class="title_box">业绩目标</view>
|
|
<view class="box_1">
|
|
<view class="left">
|
|
<view class="charts-box">
|
|
<qiun-data-charts
|
|
type="ring"
|
|
:opts="opts"
|
|
:chartData="chartData"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title">目标金额</view>
|
|
<view class="content">
|
|
<text class="strong">￥100000</text>
|
|
</view>
|
|
<view class="title">完成金额</view>
|
|
<view class="content">
|
|
<text class="strong">￥100000</text>
|
|
<text>较上月</text>
|
|
</view>
|
|
|
|
<view class="legeng">
|
|
<view class="item">
|
|
<view class="piece" style="background-color: #45c59f;"></view>
|
|
<view class="lable">新签</view>
|
|
|
|
<view class="item">
|
|
<view class="piece" style="background-color:#02a7f0;"></view>
|
|
<view class="lable">续费</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="title_box" v-show="box_2_show">新客签到</view>
|
|
<view class="box_2" v-show="box_2_show">
|
|
<view class="progress-container">
|
|
<view :style="{ width: progress + '%' }" class="progress-bar">
|
|
</view>
|
|
<view class="dian" :style="{ left: (progress - 2) + '%' }"></view>
|
|
</view>
|
|
<view class="progress-text">
|
|
<text>0</text>
|
|
<text>50人</text>
|
|
<text>100人</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="main_section">
|
|
<view class="tag_section">
|
|
<view :class="['left',tagType=='1'?'select':'']" @click="changeTag('1')">销售分析</view>
|
|
<view :class="['right',tagType=='2'?'select':'']" @click="changeTag('2')">销售排名</view>
|
|
</view>
|
|
|
|
<!-- 销售分析-->
|
|
<view class="section_box_1" v-if="tagType=='1'">
|
|
<view class="left">
|
|
<qiun-data-charts
|
|
type="funnel"
|
|
:opts="opts_2"
|
|
:chartData="chartData_2"
|
|
/>
|
|
</view>
|
|
<view class="right">
|
|
<view class="item">
|
|
<view class="title" style="color: #12E7E8;">
|
|
成交率<text>(93.77%)</text>
|
|
</view>
|
|
<view class="title" style="color: #12E7E8;">
|
|
11239<text>人</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title" style="color: #4DA3FF;">
|
|
试听率<text>(93.77%)</text>
|
|
</view>
|
|
<view class="title" style="color: #4DA3FF;">
|
|
11239<text>人</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="title" style="color: #FFCB31;">
|
|
跟进率<text>(93.77%)</text>
|
|
</view>
|
|
<view class="title" style="color: #FFCB31;">
|
|
11239<text>人</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 销售排名-->
|
|
<view class="section_box_2" v-else>
|
|
<view class="itme">
|
|
<view class="title">01 李小刚</view>
|
|
<view class="money">￥100000</view>
|
|
<view class="plan">
|
|
<fui-progress :percent="80" height="15" radius="15" background="#e4e4e4" activeColor="#4bced0"></fui-progress>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="itme">
|
|
<view class="title">02 张刚</view>
|
|
<view class="money">￥100000</view>
|
|
<view class="plan">
|
|
<fui-progress :percent="80" height="15" radius="15" background="#e4e4e4" activeColor="#4bced0"></fui-progress>
|
|
</view>
|
|
</view>
|
|
<view class="itme">
|
|
<view class="title">03 李华</view>
|
|
<view class="money">￥100000</view>
|
|
<view class="plan">
|
|
<fui-progress :percent="80" height="15" radius="15" background="#e4e4e4" activeColor="#4bced0"></fui-progress>
|
|
</view>
|
|
</view>
|
|
<view class="itme">
|
|
<view class="title">04 王明</view>
|
|
<view class="money">￥100000</view>
|
|
<view class="plan">
|
|
<fui-progress :percent="80" height="15" radius="15" background="#e4e4e4" activeColor="#4bced0"></fui-progress>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部导航-->
|
|
<AQTabber/>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
// import user from '@/api/user.js';
|
|
import AQTabber from "@/components/AQ/AQTabber.vue"
|
|
|
|
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
//统计图相关
|
|
chartData: {},
|
|
opts: {
|
|
rotate: false, // 是否旋转图表
|
|
rotateLock: false, // 是否锁定旋转
|
|
color: [
|
|
"#e9e9e9", // 颜色1：未完成
|
|
"#02a7f0", // 颜色2：续费
|
|
"#45c59f", // 颜色3：新签
|
|
],
|
|
padding: [0, 0, 0, 0], // 图表内边距 [上, 右, 下, 左]
|
|
dataLabel: true, // 是否显示数据标签
|
|
enableScroll: false, // 是否启用滚动
|
|
legend: {
|
|
show: false, // 是否显示图例
|
|
// position: "right", // 图例位置
|
|
// lineHeight: 25 // 图例行高
|
|
},
|
|
title: {
|
|
name: "完成度", // 主标题文本
|
|
fontSize: 16, // 主标题字体大小
|
|
color: "#666666" // 主标题颜色
|
|
},
|
|
subtitle: {
|
|
name: "40%", // 副标题文本
|
|
fontSize: 18, // 副标题字体大小
|
|
color: "#7cb5ec" // 副标题颜色
|
|
},
|
|
extra: {
|
|
ring: {
|
|
ringWidth: 17, // 环形图宽度
|
|
activeOpacity: 0.5, // 激活状态透明度
|
|
activeRadius: 5, // 启用Tooltip点击时，突出部分的宽度（最大值不得超过labelWidth）
|
|
offsetAngle: 0, // 起始角度偏移
|
|
labelWidth: 1, // 标签宽度
|
|
border: true, // 是否显示边框
|
|
customRadius:68,//自定义半径（一般不需要传值，饼图会自动计算半径，自定义半径可能会导致显示图表显示不全）
|
|
borderWidth: 2, // 分割线的宽度
|
|
borderColor: "#fff" // 边框颜色
|
|
}
|
|
}
|
|
},
|
|
|
|
//新客签到进度条统计
|
|
progress: 50, // 初始进度为50%
|
|
box_2_show: false,//新客签到进度条统计|true=显示,false=隐藏
|
|
|
|
tagType:'1',//1=销售分析,2=销售排名
|
|
|
|
//销售分析统计图
|
|
chartData_2: {},
|
|
opts_2: {
|
|
// 颜色数组，用于图表的系列颜色
|
|
// color: ["#12E7E8","#4DA3FF","#FFCB31"],
|
|
// 内边距，顺序为上、右、下、左
|
|
padding: [0,0,0,0],
|
|
// 是否启用滚动，false 表示不启用
|
|
enableScroll: false,
|
|
legend:{
|
|
show:true// 是否显示图例标识
|
|
},
|
|
// 额外配置项
|
|
extra: {
|
|
// 漏斗图配置
|
|
funnel: {
|
|
// 激活状态下的透明度
|
|
activeOpacity: 0.3,
|
|
// 激活状态下的宽度
|
|
activeWidth: 10,
|
|
// 是否显示边框
|
|
border: true,
|
|
// 边框宽度
|
|
borderWidth: 2,
|
|
// 边框颜色
|
|
borderColor: "#FFFFFF",
|
|
// 填充透明度
|
|
fillOpacity: 1,
|
|
// 标签对齐方式，left 表示左对齐
|
|
labelAlign: "right",
|
|
// 漏斗图类型，pyramid 表示金字塔型
|
|
type: "pyramid"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
async init(){
|
|
//环形统计图相关
|
|
let chartData_1 = {
|
|
series: [
|
|
{
|
|
data: [
|
|
{
|
|
"name": "新签",
|
|
"value": 50,
|
|
"labelShow": false
|
|
},
|
|
{
|
|
"name": "续费",
|
|
"value": 30,
|
|
"labelShow": false
|
|
},
|
|
{
|
|
"name": "未完成",
|
|
"value": 20,
|
|
"labelShow": false
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
this.chartData = JSON.parse(JSON.stringify(chartData_1));
|
|
|
|
//销售分析统计图相关
|
|
let chartDataB = {
|
|
series: [
|
|
{
|
|
data: [
|
|
{
|
|
"name": "跟进中", // 数据项的名称，表示当前数据的分类为“跟进中”
|
|
"centerText": "70", // 中心显示的文本内容，这里为空字符串，表示不显示中心文本
|
|
"value": 70, // 数据项的值，表示“跟进中”的数量为50
|
|
// "labelText":'跟进中'
|
|
"labelShow":false,
|
|
"color": "#FFCB31", // 自定义颜色
|
|
},
|
|
{
|
|
"name": "试听",
|
|
"centerText": "30",
|
|
"value": 30,
|
|
// "labelText":"试听"
|
|
"labelShow":false,
|
|
"color": "#4DA3FF", // 自定义颜色
|
|
},
|
|
{
|
|
"name": "已成交",
|
|
"centerText": "10",
|
|
"value": 10,
|
|
// "labelText":"已成交"
|
|
"labelShow":false,
|
|
"color": "#12E7E8", // 自定义颜色
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
this.chartData_2 = JSON.parse(JSON.stringify(chartDataB));
|
|
},
|
|
|
|
//切换tag
|
|
changeTag(type){
|
|
this.tagType = type
|
|
},
|
|
|
|
//打开到课率统计
|
|
openViewArrivalStatistics(){
|
|
uni.navigateTo({
|
|
url: '/pages/market/my/arrival_statistics'
|
|
})
|
|
},
|
|
|
|
//打开即将到期
|
|
openViewDueSoon(){
|
|
uni.navigateTo({
|
|
url: '/pages/market/my/due_soon'
|
|
})
|
|
},
|
|
|
|
//打开授课统计
|
|
openViewSchoolingStatistics(){
|
|
uni.navigateTo({
|
|
url: '/pages/market/my/schooling_statistics'
|
|
})
|
|
},
|
|
|
|
//打开意见反馈
|
|
openViewFeedback(){
|
|
uni.navigateTo({
|
|
url: '/pages/common/feedback'
|
|
})
|
|
},
|
|
|
|
//打开个人资料
|
|
openViewMyInfo(){
|
|
uni.navigateTo({
|
|
url: '/pages/market/my/info'
|
|
})
|
|
},
|
|
|
|
//打开企业信息
|
|
openViewFirmInfo(){
|
|
uni.navigateTo({
|
|
url: '/pages/market/my/firm_info'
|
|
})
|
|
},
|
|
|
|
|
|
//打开设置
|
|
openViewSetUp(){
|
|
uni.navigateTo({
|
|
url: '/pages/market/my/set_up'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
.main_box{
|
|
background: #292929;
|
|
min-height: 28vh;
|
|
}
|
|
|
|
//自定义导航栏
|
|
.navbar_section{
|
|
border: 1px solid #292929;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #292929;
|
|
.title{
|
|
padding: 20rpx 0;
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
|
|
//统计信息
|
|
.count_section{
|
|
padding: 20rpx 46rpx;
|
|
padding-bottom: 60rpx;
|
|
background-color: #434544;
|
|
color: #fff;
|
|
.title_box{
|
|
font-size: 26rpx;
|
|
}
|
|
.box_1{
|
|
margin-top: 25rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 30rpx;
|
|
.left{
|
|
width: 280rpx; /* 设置宽度为 280rpx */
|
|
height: 280rpx; /* 设置高度为 280rpx */
|
|
.charts-box {
|
|
width: 280rpx; /* 设置宽度为 280rpx */
|
|
height: 280rpx; /* 设置高度为 280rpx */
|
|
}
|
|
}
|
|
.right{
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
.title{}
|
|
.content{
|
|
display: flex;
|
|
gap: 40rpx;
|
|
.strong{
|
|
font-size: 30rpx;
|
|
}
|
|
.text{
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
.legeng{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 50rpx;
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
.piece{
|
|
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
// 其他样式省略
|
|
.box_2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
|
|
.progress-container {
|
|
position: relative;
|
|
width: 80%;
|
|
height: 4rpx;
|
|
background-color: #ccc;
|
|
border-radius: 2rpx;
|
|
//overflow: hidden;
|
|
margin-bottom: 10rpx;
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background-color: #45c59f;
|
|
border-radius: 2rpx;
|
|
}
|
|
.dian{
|
|
position: absolute;
|
|
top: -9rpx;
|
|
left: 0rpx;
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
|
|
}
|
|
}
|
|
|
|
.progress-text {
|
|
margin-left: 5%;
|
|
width: 85%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text {
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main_section{
|
|
background: #292929 100%;
|
|
padding: 0 24rpx;
|
|
padding-top: 40rpx;
|
|
padding-bottom: 150rpx;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 22rpx;
|
|
|
|
.tag_section{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
view{
|
|
border: 1px solid #969696;
|
|
width: 258rpx;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
background-color: #292929;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
}
|
|
.left{
|
|
border-radius: 22rpx 0rpx 0rpx 22rpx;
|
|
}
|
|
.right{
|
|
border-radius: 0rpx 22rpx 22rpx 0rpx;
|
|
}
|
|
.select{
|
|
background-color: #fff;
|
|
color: #29D3B4;
|
|
}
|
|
}
|
|
|
|
.section_box_1{
|
|
margin-top: 38rpx;
|
|
padding: 66rpx 14rpx;
|
|
border-radius: 12rpx;
|
|
background-color: #434544FF;
|
|
color: #d9dada;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
height: 600rpx;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.left{
|
|
width: 70%;
|
|
}
|
|
.right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
.item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
.title{
|
|
font-size: 26rpx;
|
|
text-align: left;
|
|
text{
|
|
margin-left: 5rpx;
|
|
color: #d9dada;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.section_box_2{
|
|
color: #fff;
|
|
margin-top: 38rpx;
|
|
padding: 20rpx 42rpx;
|
|
background-color: #434544;
|
|
border-radius: 12rpx;
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
.itme{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15rpx;
|
|
.money{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|