From fe75cffbf3bae6777aa2794fd89fa5dc37f5df8d Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 10:11:23 +0800
Subject: [PATCH] 项目初始化
---
src/pages_qiun/components/data-center/user-operate.vue | 200 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 200 insertions(+), 0 deletions(-)
diff --git a/src/pages_qiun/components/data-center/user-operate.vue b/src/pages_qiun/components/data-center/user-operate.vue
new file mode 100644
index 0000000..459cd04
--- /dev/null
+++ b/src/pages_qiun/components/data-center/user-operate.vue
@@ -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>
--
Gitblit v1.9.3