From 8a5be11bfec65052dceb364ec3664f98695aaf5e Mon Sep 17 00:00:00 2001
From: liutong <836164388@qq.com>
Date: Wed, 19 Mar 2025 10:55:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(market/data):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E9=94=80=E5=94=AE=E5=88=86=E6=9E=90=E5=92=8C=E9=94=80=E5=94=AE?=
 =?UTF-8?q?=E6=8E=92=E5=90=8D=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加销售分析图表，展示成交率、试听率和跟进率
- 实现销售排名列表，显示前四名销售人员的业绩
-增加标签切换功能，用户可在销售分析和销售排名之间切换
- 优化页面布局和样式，提升用户体验
---
 pages/market/data/index.vue | 259 +++++++++++++++++++++++++++++++-----
 1 file changed, 229 insertions(+), 30 deletions(-)

diff --git a/pages/market/data/index.vue b/pages/market/data/index.vue
index c56f4fb..842c2f9 100644
--- a/pages/market/data/index.vue
+++ b/pages/market/data/index.vue
@@ -59,29 +59,81 @@
     </view>
 
 
-
     <view class="main_section">
-      <view class="section_box">
-        <view class="item">
-         <view>已签客户</view>
-         <view>23</view>
+      <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" @click="openViewFirmInfo()">
-          <view>企业信息</view>
-          <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">
-        <view class="item" @click="openViewFeedback()">
-          <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="item" @click="openViewSetUp()">
-          <view>设置</view>
-          <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>
@@ -91,6 +143,8 @@
   </view>
 </template>
 
+
+
 <script>
 import user from '@/api/user.js';
 import AQTabber from "@/components/AQ/AQTabber.vue"
@@ -149,6 +203,44 @@ export default {
       //新客签到进度条统计
       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() {
@@ -156,7 +248,8 @@ export default {
   },
   methods: {
     async init(){
-      let res = {
+      //环形统计图相关
+      let chartData_1 = {
         series: [
           {
             data: [
@@ -179,7 +272,47 @@ export default {
           }
         ]
       };
-      this.chartData = JSON.parse(JSON.stringify(res));
+      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
     },
 
     //打开到课率统计
@@ -372,26 +505,92 @@ export default {
   flex-direction: column;
   gap: 22rpx;
 
-  .section_box {
-    background: #fff;
-    border-radius: 16rpx;
-    padding: 6rpx 24rpx;
+  .tag_section{
     display: flex;
-    flex-direction: column;
-    .item{
-      padding: 24rpx 78rpx;
-      border-top: 1px solid #F2F2F2;
-      font-size: 28rpx;
-      display: flex;
-      justify-content: space-between;
+    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;
     }
-    .item:nth-child(1){
-      border-top: 0;
+    .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;
+      }
+    }
   }
 
+
+
 }