qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 初始化版本！

Browse Source
This commit is contained in:
tianyongbao
2024-05-31 13:08:46 +08:00
parent 884a84802d
commit b3fe699735
587 changed files with 103758 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/pages_qiun/components/data-center/user-healthy.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<view class="content">
<scroll-view v-if="true" scroll-y class="data_body" :style="{height:scrollHeight}">
<!--数据进度条-->
<view class="progress">
<data-progress :progressList="userHealthyLineBar" :borderRadius="20" padMiddle="true"></data-progress>
</view>
<view class="split_line"></view>
<!-- 新增小程序会员趋势-->
<view class="friend_operate">
<text-block :content="baseData"></text-block>
<view class="trend_title">新增小程序会员趋势</view>
<view class="charts-box">
<qiun-data-charts
type="mix"
canvasId="three_a"
:canvas2d="isCanvas2d"
:reshow="delayload"
:opts="{yAxis:{data:[{position: 'left',title: '销售额/万',max:userTrand?userTrand.yAxis[0].max:0,min:userTrand?userTrand.yAxis[0].min:0},{position: 'right',title: '',max:userTrand?userTrand.yAxis[1].max:0,min:userTrand?userTrand.yAxis[1].min:0,unit:'%'}]}}"
:chartData="userTrand"/>
</view>
</view>
<view class="split_line"></view>
<!-- 会员扫码率趋势-->
<view class="friend_operate">
<text-block :content="scanTrand"></text-block>
<view class="trend_title">会员扫码率趋势</view>
<view class="charts-box">
<qiun-data-charts
type="mix"
canvasId="three_b"
:canvas2d="isCanvas2d"
:reshow="delayload"
:opts="{yAxis:{data:[{position: 'left',title: '',max:scanTrandPrecent?scanTrandPrecent.yAxis[0].max:0,min:scanTrandPrecent?scanTrandPrecent.yAxis[0].min:0,unit:'%'}]}}"
:chartData="scanTrandPrecent"/>
</view>
</view>
<view class="split_line"></view>
<!-- 小程序活跃会员占比-->
<view class="friend_operate">
<text-block :content="miniActive"></text-block>
<view class="charts-box">
<qiun-data-charts
type="mix"
canvasId="three_c"
:canvas2d="isCanvas2d"
:reshow="delayload"
:opts="{yAxis:{data:[{position: 'left',title: '销售额/万',max:miniActivePrecent?miniActivePrecent.yAxis[0].max:0,min:miniActivePrecent?miniActivePrecent.yAxis[0].min:0},{position: 'right',title: '',max:miniActivePrecent?miniActivePrecent.yAxis[1].max:0,min:miniActivePrecent?miniActivePrecent.yAxis[1].min:0,unit:'%'}]}}"
:chartData="miniActivePrecent"
/>
</view>
</view>
</scroll-view>
<view v-else class="container padding_stand-big normal_color">
<li class="iconfont icon-cry cry"></li>暂无数据
</view>
</view>
</template>
<script>
import DataProgress from "../data-progress/data-progress.vue"
import userHealthyLineBar from '../../static/json/user-healthy/1.json';
import baseData from '../../static/json/user-healthy/2.json';
import userTrand from '../../static/json/user-healthy/3.json';
import scanTrand from '../../static/json/user-healthy/4.json';
import scanTrandPrecent from '../../static/json/user-healthy/5.json';
import miniActive from '../../static/json/user-healthy/6.json';
import miniActivePrecent from '../../static/json/user-healthy/7.json';
import Config from '../../static/js/config'
var _self;
export default {
name:'user-healthy',
props: {
scrollHeight:{
type:String,
default:"600px"
}
},
components:{
DataProgress
},
data() {
return {
userHealthyLineBar,
baseData,
userTrand,
scanTrand,
scanTrandPrecent,
miniActive,
miniActivePrecent,
delayload:false,
isCanvas2d:Config.ISCANVAS2D,
}
},
mounted() {
this.getData();
},
methods:{
async getData(){
uni.showLoading();
await setTimeout(() => {
this.delayload = true;
uni.hideLoading();
}, 1000)
}
}
}
</script>
<style scoped lang="less">
.content{
padding-top: 10rpx;
.progress,.firend_operate{
padding: 0 10rpx;
}
.progress{
margin-bottom: 20rpx;
}
.friend_operate{
padding: 30rpx 10rpx;
.title{
text-align:left;
margin-bottom: 20rpx;
}
.trend_title{
text-align: right;
font-size: 22rpx;
color: #ff9900;
margin-top: 20rpx;
}
}
}
</style>

200
src/pages_qiun/components/data-center/user-operate.vue Normal file
View File

@@ -0,0 +1,200 @@
<template>
<view class="content">
<scroll-view v-if="true" scroll-y class="data_body" :style="{height:scrollHeight}">
<!--数据进度条-->
<view class="progress">
<data-progress :progressList="userOperateLineBar" :borderRadius="20" padMiddle="true"></data-progress>
</view>
<view class="split_line"></view>
<!-- 活跃会员-->
<view class="friend_operate">
<view class="title">活跃会员</view>
<text-block :content="userActive"></text-block>
</view>
<!-- 会员消费 -->
<view class="friend_operate" style="padding-bottom: 30rpx;">
<view class="title">会员消费</view>
<text-block :content="userConsume"></text-block>
</view>
<view class="split_line"></view>
<!-- 会员ARPU -->
<view class="friend_operate">
<view class="title">会员ARPU
<text class="font-small">(会员年度平均销售金额)</text>
<text class="trend_title">目标增量{{userARPU.targetAdd}}</text>
</view>
<view class="charts-box">
<qiun-data-charts type="mix"
:chartData="userARPU"
:reshow="delayload"
:canvas2d="isCanvas2d"
canvasId="two_a"
:opts="{yAxis:{data:[{title: '',max:userARPU?userARPU.yAxis[0].max:0,min:userARPU?userARPU.yAxis[0].min:0},{title: '',unit:'%',max:userARPU?userARPU.yAxis[1].max:0,min:userARPU?userARPU.yAxis[1].min:0,position:'right'}]},extra:{markLine:{data:[{value:userARPU?userARPU.target:'',LineColor:'#ff9900',showLabel:true}]}}}"/>
</view>
</view>
<view class="split_line"></view>
<!-- 会员消费频次 -->
<view class="friend_operate">
<view class="title">会员消费频次
<text class="font-middle">(年)</text>
<text class="trend_title">目标增量{{userARPU.targetAdd}}</text>
</view>
<view class="charts-box">
<qiun-data-charts type="mix"
:chartData="userARPU"
:reshow="delayload"
:canvas2d="isCanvas2d"
canvasId="two_b"
:opts="{yAxis:{data:[{title: '',max:userARPU?userARPU.yAxis[0].max:0,min:userARPU?userARPU.yAxis[0].min:0},{title: '',unit:'%',max:userARPU?userARPU.yAxis[1].max:0,min:userARPU?userARPU.yAxis[1].min:0,position:'right'}]},extra:{markLine:{data:[{value:userARPU?userARPU.target:'',LineColor:'#ff9900',showLabel:true}]}}}"/>
</view>
</view>
<view class="split_line"></view>
<!-- 微客群运营-->
<view class="friend_operate">
<view class="title">活跃会员分布
<text class="font-middle">(最近活跃时间)</text>
</view>
<senior-table :headers="dataTable.headers" :contents="dataTable.contents" :urlCol="dataTable.urlCol" :firstLineFixed="true" :sortCol="dataTable.sortCol" :computedCol="dataTable.computedCol" :formatCol="dataTable.formatCol"></senior-table>
</view>
<view class="split_line"></view>
<!-- X商品脱落率-->
<view class="friend_operate">
<view class="title">
X（慢病） 商品脱落率
</view>
<view style="display: flex;justify-content: space-between;">
<view v-for="(item,index) in xProductDropPrecent" class="charts-box" style="height: 130px;width: 45%;">
<qiun-data-charts
type="arcbar"
:chartData="item"
:canvasId="'two_c_'+ index"
:canvas2d="true"
:reshow="delayload"
:opts="{title:{name:item.series[0].data * 100 + '%',color:item.series[0].color,fontSize:25},subtitle:{name:item.series[0].name,color:'#666666',fontSize:12}}" />
</view>
</view>
</view>
<!-- 慢病病种脱落率-->
<view class="friend_operate">
<view class="title">慢病病种脱落率
</view>
<view class="charts-box">
<qiun-data-charts type="mix"
:chartData="illnessDropPrecent"
:reshow="delayload"
:canvas2d="true"
canvasId="two_d"
:opts="{yAxis:{data:[{title: ''}]}}"/>
</view>
</view>
<!-- W商品脱落率-->
<view class="friend_operate">
<view class="title">
W（保健） 商品脱落率
</view>
<view style="display: flex;justify-content: space-between;">
<view v-for="(item,index) in wProductDropPrecent" class="charts-box" style="height: 130px;width: 45%;">
<qiun-data-charts
type="arcbar"
:chartData="item"
:canvasId="'two_e_'+index"
:canvas2d="true"
:reshow="delayload"
:opts="{title:{name:item.series[0].data * 100 + '%',color:item.series[0].color,fontSize:25},subtitle:{name:item.series[0].name,color:'#666666',fontSize:12}}" />
</view>
</view>
</view>
</scroll-view>
<view v-else class="container padding_stand-big normal_color">
<li class="iconfont icon-cry cry"></li>暂无数据
</view>
</view>
</template>
<script>
import DataProgress from "../data-progress/data-progress.vue"
import SeniorTable from "../data-table/senior-table.vue"
import userOperateLineBar from '../../static/json/user-operate/1.json';
import userActive from '../../static/json/user-operate/2.json';
import userConsume from '../../static/json/user-operate/3.json';
import userARPU from '../../static/json/user-operate/4.json';
import dataTable from "../../static/json/user-operate/6.json"
import xProductDropPrecent from '../../static/json/user-operate/7.json';
import wProductDropPrecent from '../../static/json/user-operate/9.json';
import illnessDropPrecent from '../../static/json/user-operate/8.json';
export default {
name:'user-operate',
props: {
scrollHeight:{
type:String,
default:"600px"
}
},
components:{
DataProgress,SeniorTable
},
data() {
return {
userOperateLineBar,
userActive,
userConsume,
userARPU,
xProductDropPrecent,
wProductDropPrecent,
illnessDropPrecent,
dataTable,
delayload:false,
isCanvas2d:Config.ISCANVAS2D
}
},
mounted() {
this.getData();
},
methods:{
async getData(){
uni.showLoading();
await setTimeout(() => {
this.delayload = true;
uni.hideLoading();
}, 1000)
}
}
}
</script>
<style scoped lang="less">
.content{
padding-top: 10rpx;
.progress,.firend_operate{
padding: 0 10rpx;
}
.progress{
margin-bottom: 20rpx;
}
.friend_operate{
padding: 30rpx 20rpx;
.title{
text-align:left;
margin-bottom: 30rpx;
font-size: 40rpx;
}
.trend_title{
float: right;
font-size: 22rpx;
color: #ff9900;
margin-top: 20rpx;
}
}
}
</style>

385
src/pages_qiun/components/data-center/user-server.vue Normal file
View File

@@ -0,0 +1,385 @@
<template>
<view class="content">
<scroll-view class="data_body" scroll-y :style="{height:scrollHeight}">
<template v-if="true">
<!-- 会员成长数据-->
<view class="view_item">
<view class="title">会员成长数据</view>
<view class="progress_circle">
<view v-for="(item,index) in CircleData" :key="index" :class="['progress_block','block_'+index]">
<view class="name">{{item.series[0].name}}</view>
<view class="value">{{item.series[0].value}}</view>
<view class="charts-box arcbar" style="height: 180rpx;width: 60%;">
<qiun-data-charts type="arcbar" :chartData="item" :canvasId="'four_a_'+index" :canvas2d="isCanvas2d"
:resshow="delayload"
:opts="{title:{name:item.series[0].precent,color:item.series[0].color,fontSize:15},subtitle:{name:'',color:'#666666',fontSize:12},extra:{arcbar:{backgroundColor:item.series[0].backgroundColor}}}" />
</view>
<view class="planet">
<view class="planet_shadow"></view>
<view class="crater1"></view>
<view class="crater2"></view>
<view class="crater3"></view>
<view class="crater4"></view>
</view>
<view class="star" :class="['star'+index]"></view>
<view class="star pink" :class="['star'+index]"></view>
<view class="star blue" :class="['star'+index]"></view>
<view class="star yellow" :class="['star'+index]"></view>
</view>
</view>
</view>
<view class="split_line"></view>
<!-- 会员数据来源 -->
<view class="friend_operate">
<view class="title">会员数据来源
<text class="font-small" style="color: #ff9900;">(Top5访问来源)</text>
</view>
<view v-if="delayload" class="charts-box">
<qiun-data-charts
type="ring"
canvasId="four_b"
:canvas2d="isCanvas2d"
:resshow="delayload"
:opts="{legend:{position: 'bottom'},title:{name: '',},subtitle: {name: ''}}"
:chartData="ProductRateData"/>
</view>
</view>
<view class="split_line"></view>
<!-- 服务评价概览-->
<view class="friend_operate">
<view class="title">服务评价概览</view>
<text-block :content="ServiceComment"></text-block>
</view>
<!-- 本周会员访问趋势图 -->
<view class="friend_operate">
<view class="title">本周会员访问趋势图</view>
<view v-if="delayload" class="charts-box" style="height: 300px;">
<qiun-data-charts
type="mix"
canvasId="four_c"
:canvas2d="isCanvas2d"
:resshow="delayload"
:opts="{yAxis:{data:[{position: 'left',title: '',min:0,unit:'万'}]}}"
:chartData="TrendData"
/>
</view>
</view>
<view class="split_line"></view>
<!-- 新增会员排行榜 -->
<view class="friend_operate">
<view class="title">新增会员排行榜</view>
<progress-bar :isRank="isRank" :content="RankData" />
</view>
</template>
<template v-else>
<view class="container padding_stand-big normal_color">
<li class="iconfont icon-cry cry"></li>暂无数据
</view>
</template>
</scroll-view>
</view>
</template>
<script>
import ProgressBar from "../progress-bar/progress-bar.vue"
import CircleData from "../../static/json/user-server/1.json"
import ProductRateData from '../../static/json/user-server/2.json';
import TrendData from '../../static/json/user-server/3.json';
import ServiceComment from '../../static/json/user-server/4.json';
import RankData from '../../static/json/user-server/5.json';
import Config from '../../static/js/config'
export default {
name:"user-server",
props:{
scrollHeight:{
type:String,
default:"600px"
}
},
components:{
ProgressBar
},
data(){
return {
CircleData,
TrendData,
ProductRateData,
ServiceComment,
RankData,
isRank:true,
isCanvas2d:Config.ISCANVAS2D,
delayload: false, //延时加载图表，否则会出现图表加载完后定位错乱
}
},
methods:{
async getData(){
uni.showLoading();
await setTimeout(() => {
this.delayload = true;
uni.hideLoading();
}, 1000)
}
},
mounted() {
this.getData();
}
}
</script>
<style scoped lang="scss">
.content{
padding-top: 10rpx;
}
.data_body{
height: 100%;
text-align: center;
color: #333333;
background-repeat: repeat;
background-color: #ffffff;
.friend_operate{
padding: 30rpx 20rpx;
.title{
text-align:left;
margin-bottom: 30rpx;
font-size: 40rpx;
}
}
.view_item{
padding: 30rpx 20rpx;
.title{
text-align:left;
margin-bottom: 30rpx;
font-size: 40rpx;
}
}
.progress_circle{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
height: 450rpx;
.progress_block{
width: 45%;
border-radius: 20rpx;
height: 180rpx;
position: relative;
overflow: hidden;
.name{
color: #fff;
font-size: 24rpx;
position: absolute;
top: 20rpx;
left: 10rpx;
max-width: 144rpx;
}
.value{
color: #fff;
font-size: 40rpx;
position: absolute;
top: 64rpx;
left: 10rpx;
max-width: 144rpx;
}
.circle{
position: absolute;
right: 8rpx;
top: 16rpx;
}
.arcbar{
position: absolute;
right: -4rpx;
top: 8rpx;
}
}
.block_0{
background-color: #0FC3FF;
}
.block_1{
background-color: #FF6B8B;
}
.block_2{
background-color: #FFCB1D;
}
.block_3{
background-color: #3BDCAA;
}
}
}
.planet {
width: 60px;
height: 60px;
border-radius: 50%;
background: #333;
position: absolute;
left: -13px;
bottom: -26px;
overflow: hidden;
opacity: 0.5;
z-index: 0;
}
.planet_shadow {
position: absolute;
border-radius: 50%;
height: 100%;
width: 100%;
top: -40%;
right: -10%;
border: 35px solid rgba(0, 0, 0, .15);
}
.crater1,
.crater2,
.crater3,
.crater4 {
position: absolute;
border-radius: 50%;
background: rgba(0, 0, 0, .3);
box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2);
}
.crater1 {
width: 20px;
height: 20px;
left: 25%;
top: 20%;
}
.crater2 {
width: 10px;
height: 10px;
left: 50%;
top: 60%;
}
.crater3 {
width: 15px;
height: 15px;
left: 30%;
top: 65%;
}
.crater4 {
width: 15px;
height: 15px;
left: 60%;
top: 35%;
}
.star {
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #FFF;
top: 10px;
left: 50px;
position: relative;
transform-origin: 100% 0;
box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
opacity: 0;
z-index: 2;
}
.star0{
animation: star-ani 4s infinite ease-out;
}
.star1{
animation: star-ani 5s infinite ease-out;
}
.star2{
animation: star-ani 6s infinite ease-out;
}
.star3{
animation: star-ani 7s infinite ease-out;
}
.star:after {
content: '';
display: block;
top: 20px;
left: 60px;
border: 0px solid #fff;
border-width: 0px 90px 2px 90px;
border-color: transparent transparent transparent rgba(255, 255, 255, .3);
transform: rotate(-45deg) translate3d(1px, 3px, 0);
box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
transform-origin: 0% 100%;
animation: shooting-ani 100s infinite ease-out;
}
.pink {
top: 10px;
left: 60px;
background: #ff5a99;
animation-delay: 5s;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
}
.pink:after {
border-color: transparent transparent transparent #ff5a99;
animation-delay: 5s;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
}
.blue {
top: 15px;
left: 70px;
background: cyan;
animation-delay: 7s;
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
}
.blue:after {
border-color: 'transpareanimation-delay: 12s';
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
animation-delay: 7s;
}
.yellow {
top: 0px;
left: 80px;
background: #ffcd5c;
animation-delay: 5.8s;
}
.yellow:after {
border-color: transparent transparent transparent #ffcd5c;
animation-delay: 5.8s;
}
@keyframes star-ani {
0% {
opacity: 0;
transform: scale(0) rotate(0) translate3d(0, 0, 0);
-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
}
50% {
opacity: 0.5;
transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
-webkit-transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
-moz-transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
}
100% {
opacity: 0;
transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
-webkit-transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
-moz-transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
}
}
</style>

132
src/pages_qiun/components/data-center/wechat.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<view class="content">
<scroll-view v-if="true" scroll-y class="data_body" :style="{height:scrollHeight}">
<!--数据进度条-->
<view class="progress">
<data-progress :progressList="wechatLineBar" :borderRadius="20" padMiddle="true"></data-progress>
</view>
<view class="split_line"></view>
<!-- 微好友运营-->
<view class="friend_operate">
<view class="title">微好友运营</view>
<text-block :content="friendTextBlock"></text-block>
<view style="display: flex;justify-content: space-around;">
<view v-for="(item,index) in panelData" :key="index" class="charts-box"
style="width: 45%;height: 200px;">
<qiun-data-charts type="gauge"
:opts="{title:{name: item.series[0].data * 100 + '%',color: '#24ABFD',offsetY:30},subtitle: {name: item.series[0].name,color: '#666666',fontSize: 15,offsetY:70},extra:{gauge:{type:'progress',width:20,splitLine:{fixRadius:-10,width:15,},}}}"
:chartData="item" :reshow="delayload" :canvas2d="isCanvas2d" :canvasId="'one_a_' + index" />
</view>
</view>
<view class="trend_title">新增微好友&小程序会员趋势</view>
<view class="charts-box">
<qiun-data-charts type="mix" :chartData="friendTrand" :reshow="delayload"
:canvas2d="isCanvas2d" canvasId="one_b" :opts="{yAxis:{data:[{title: ''}]}}" />
</view>
</view>
<view class="split_line"></view>
<!-- 微客群运营-->
<view class="friend_operate">
<view class="title">微客群运营</view>
<text-block :content="friendTextBlock"></text-block>
<view class="trend_title">新增人群&退群人数趋势</view>
<view class="charts-box">
<qiun-data-charts type="mix" :chartData="teamTrand" :reshow="delayload" :canvas2d="isCanvas2d"
canvasId="one_c" :opts="{yAxis:{data:[{title: '',max:teamTrand?teamTrand.yAxis[0].max:0,min:teamTrand?teamTrand.yAxis[0].min:0}]}}" />
</view>
</view>
<view class="split_line"></view>
<!-- 客户联系-->
<view class="friend_operate">
<view class="title">【客户联系】1对1运营执行</view>
<senior-table :headers="dataTable.headers" :contents="dataTable.contents" :urlCol="dataTable.urlCol" :firstLineFixed="true" :sortCol="dataTable.sortCol"></senior-table>
</view>
</scroll-view>
<view v-else class="container padding_stand-big normal_color">
<li class="iconfont icon-cry cry"></li>暂无数据
</view>
</view>
</template>
<script>
import DataProgress from "../data-progress/data-progress.vue"
import SeniorTable from "../data-table/senior-table.vue"
import wechatLineBar from '../../static/json/wechat/1.json';
import friendTextBlock from '../../static/json/wechat/2.json';
import panelData from '../../static/json/wechat/3.json';
import friendTrand from '../../static/json/wechat/4.json';
import teamTrand from '../../static/json/wechat/5.json';
import dataTable from "../../static/json/wechat/6.json"
import Config from '../../static/js/config'
export default {
name:'wechat',
props: {
scrollHeight:{
type:String,
default:"600px"
}
},
components:{
DataProgress,
SeniorTable,
},
data() {
return {
wechatLineBar,
friendTextBlock,
friendTrand,
panelData,
teamTrand,
dataTable,
scrollTop: 0,
delayload: false,
isCanvas2d: Config.ISCANVAS2D,
}
},
mounted() {
this.getData();
},
methods:{
async getData() {
uni.showLoading();
await setTimeout(() => {
this.delayload = true;
uni.hideLoading();
}, 1000)
}
}
}
</script>
<style scoped lang="less">
.content{
padding-top: 10rpx;
.progress,.firend_operate{
padding: 0 10rpx;
}
.progress{
margin-bottom: 20rpx;
}
.friend_operate{
padding: 30rpx 20rpx;
.title{
text-align:left;
margin-bottom: 30rpx;
font-size: 40rpx;
}
.trend_title{
text-align: right;
font-size: 22rpx;
color: #ff9900;
margin-top: 50rpx;
}
}
}
</style>