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.
334 lines
7.3 KiB
334 lines
7.3 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>
|
|
|
|
|
|
|
|
<view class="main_section">
|
|
<view class="section_box">
|
|
<view class="item">
|
|
<view>已签客户</view>
|
|
<view>23</view>
|
|
</view>
|
|
|
|
<view class="item" @click="openViewFirmInfo()">
|
|
<view>企业信息</view>
|
|
<view></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section_box">
|
|
<view class="item" @click="openViewFeedback()">
|
|
<view>意见反馈</view>
|
|
<view></view>
|
|
</view>
|
|
|
|
<view class="item" @click="openViewSetUp()">
|
|
<view>设置</view>
|
|
<view></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" // 边框颜色
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
async init(){
|
|
let res = {
|
|
series: [
|
|
{
|
|
data: [
|
|
{
|
|
"name": "新签",
|
|
"value": 50,
|
|
"labelShow": false
|
|
},
|
|
{
|
|
"name": "续费",
|
|
"value": 30,
|
|
"labelShow": false
|
|
},
|
|
{
|
|
"name": "未完成",
|
|
"value": 20,
|
|
"labelShow": false
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
this.chartData = JSON.parse(JSON.stringify(res));
|
|
},
|
|
|
|
//打开到课率统计
|
|
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;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
.section_box {
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 6rpx 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.item{
|
|
padding: 24rpx 78rpx;
|
|
border-top: 1px solid #F2F2F2;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.item:nth-child(1){
|
|
border-top: 0;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
</style>
|