产品类别暂存

components/Yl_FunTabs/index.scss

@@ -96,6 +96,7 @@
             font-size: 24rpx;
             color: #333333;
             padding: 8rpx 20rpx;
+            margin-right: 20rpx;
         }
 
         .active {

salesPanel/personTarget/GK/index.js

@@ -117,6 +117,11 @@ Component({
             this.setData({
                 showType: item.index
             })
+        },
+        swiperChange(e) {
+            this.setData({
+                showType: e.detail.current
+            })
         }
     }
 })

salesPanel/personTarget/GK/index.wxml

@@ -2,51 +2,55 @@
 <filtrate id='Filtrate' iconName='icon-bumen' wx:if='{{areaList.length}}' list='{{areaList}}' type="{{active}}" title='营销区域' bind:onChange='changeArea' />
 <viewDate iconName='icon-shijian1' fields='month' title='时间范围' bind:onChange='changeDate' />
 <view style="height: 20rpx;"></view>
-<view class="global-card">
+<view class="global-card" style="overflow: hidden;">
 	<view class="global-card tabs">
 		<view wx:for="{{tabs}}" wx:key="name" class="tab {{showType == item.index ? 'active':''}}" data-item='{{item}}' bind:tap="changeType">
 			{{item.name}}
 		</view>
 	</view>
 
-	<view class="chart">
-		<view class="circle">
-			<view class="circle_left ab" style="{{render.leftRate(detail[tabs[showType].key+'rate_achieve'])}}" />
-			<view class="circle_right ab" style="{{render.rightRate(detail[tabs[showType].key+'rate_achieve'])}}" />
-			<view class="circle_text">
-				<text class="name">目标达成率</text>
-				<text class="value">{{detail[tabs[showType].key + 'rate_achieve' ]}}%</text>
+	<swiper current="{{showType}}" circular style="height: 760rpx;" bindchange='swiperChange'>
+		<swiper-item wx:for="{{tabs}}" wx:key="name">
+			<view class="chart">
+				<view class="circle">
+					<view class="circle_left ab" style="{{render.leftRate(detail[item.key +'rate_achieve'])}}" />
+					<view class="circle_right ab" style="{{render.rightRate(detail[item.key +'rate_achieve'])}}" />
+					<view class="circle_text">
+						<text class="name">目标达成率</text>
+						<text class="value">{{detail[item.key + 'rate_achieve' ]}}%</text>
+					</view>
+				</view>
 			</view>
-		</view>
-	</view>
 
-	<view class="card">
-		<view class="title">销售额</view>
-		<view class="price">
-			<text>{{detail[tabs[showType].key + 'saleamount' ]}}</text>
-		</view>
-		<view class="row">
-			同比：{{detail[tabs[showType].key + 'saleamount_yoy' ]}}%
-			<view wx:if="{{detail[tabs[showType].key + 'saleamount_yoy'] != 0}}" class="{{detail[tabs[showType].key + 'saleamount_yoy']>=0?'increase':'decrease'}}" />
-		</view>
-		<view class="row">
-			环比：{{detail[tabs[showType].key + 'saleamount_mom' ]}}%
-			<view wx:if="{{detail[tabs[showType].key + 'saleamount_mom'] != 0}}" class="{{detail[tabs[showType].key + 'saleamount_mom']>=0?'increase':'decrease'}}" />
-		</view>
-	</view>
+			<view class="card">
+				<view class="title">销售额</view>
+				<view class="price">
+					<text>{{detail[item.key + 'saleamount' ]}}</text>
+				</view>
+				<view class="row">
+					同比：{{detail[item.key + 'rate_yoy' ]}}%
+					<view wx:if="{{detail[item.key  + 'rate_yoy'] != 0}}" class="{{detail[item.key + 'rate_yoy']>=0?'increase':'decrease'}}" />
+				</view>
+				<view class="row">
+					环比：{{detail[item.key + 'rate_mom' ]}}%
+					<view wx:if="{{detail[item.key + 'rate_mom'] != 0}}" class="{{detail[item.key + 'rate_mom']>=0?'increase':'decrease'}}" />
+				</view>
+			</view>
 
-	<view class="card">
-		<view class="title">任务量</view>
-		<view class="price">
-			<text>{{detail[tabs[showType].key + 'targetamount' ]}}</text>
-		</view>
-		<view class="row">
-			目标达成率：{{detail[tabs[showType].key + 'rate_achieve' ]}}%
-		</view>
-		<view class="row">
-			销售额与任务量差额：{{detail[tabs[showType].key + 'balanceamount' ]}}
-		</view>
-	</view>
+			<view class="card">
+				<view class="title">任务量</view>
+				<view class="price">
+					<text>{{detail[item.key + 'targetamount' ]}}</text>
+				</view>
+				<view class="row">
+					目标达成率：{{detail[item.key + 'rate_achieve' ]}}%
+				</view>
+				<view class="row">
+					销售额与任务量差额：{{detail[item.key + 'balanceamount' ]}}
+				</view>
+			</view>
+		</swiper-item>
+	</swiper>
 </view>
 
 <wxs module="render">

salesPanel/personTarget/index.js

@@ -3,8 +3,11 @@ Page({
         tabsList: [{
             label: "概况",
             model: "#GK"
+        }, {
+            label: "产品类别",
+            model: "#target"
         }],
-        tabsActive: 0,
+        tabsActive: 1,
     },
     onLoad(options) {
         this.partialRenewal();

salesPanel/personTarget/index.json

@@ -1,6 +1,7 @@
 {
     "usingComponents": {
-        "GK": "./GK/index"
+        "GK": "./GK/index",
+        "target":"./target/index"
     },
     "navigationBarTitleText": "销售数据"
 }

salesPanel/personTarget/index.wxml

@@ -1,3 +1,4 @@
 <Yl_FunTabs id='Yl_FunTabs' safety='{{false}}' list='{{tabsList}}' mode='buts' active='{{tabsActive}}' bind:onChenge="tabsChange">
     <GK slot='概况' id='GK' />
+    <target slot='产品类别' id='target' />
 </Yl_FunTabs>

salesPanel/personTarget/target/index.js

@@ -0,0 +1,176 @@
+const _Http = getApp().globalData.http,
+    currency = require("../../../utils/currency"),
+    CNY = (value, symbol = "￥", precision = 2) => currency(value, {
+        symbol,
+        precision
+    }).format();
+
+Component({
+    properties: {
+
+    },
+    options: {
+        addGlobalClass: true
+    },
+    lifetimes: {
+        attached: function () {}
+    },
+    data: {
+        tabs: [],
+        salesShow: false,
+        showType: 0,
+        content: {
+            year: new Date().getFullYear(),
+            month: new Date().getMonth() + 1,
+            sa_saleareaid: 0,
+            "type": 1, //1:人员，2：医院，3：经销商
+            "month_start": 9,
+            "month_end": 12,
+            "userid": wx.getStorageSync('userMsg').userid,
+            "sa_customersid": 0,
+            "sa_agentsid": 0,
+            where: {}
+        },
+        areaList: [],
+        active: "",
+        details: {}
+    },
+    methods: {
+        async getList(init = false) {
+            if (init) this.getData()
+        },
+        //查询当前账号的营销区域
+        getArea() {
+            return new Promise((resolve, reject) => {
+                _Http.basic({
+                    "content": {},
+                    "id": 2026010513574702
+                }).then(res => {
+                    console.log("营销区域", res)
+                    const areaList = res.code != 1 ? [] : res.data.map(v => {
+                        v.value = v.areaname
+                        return v
+                    });
+                    resolve(areaList);
+                    this.setData({
+                        areaList,
+                        active: areaList[0].areaname
+                    })
+                })
+            })
+        },
+        changeArea({
+            detail
+        }) {
+            this.setData({
+                active: detail,
+                "content.sa_saleareaid": this.data.areaList.find(v => v.areaname == 'detail').sa_saleareaid
+            });
+            this.getData();
+        },
+        async getData() {
+            let content = this.data.content
+            if (content.sa_saleareaid == 0) await this.getArea().then(res => {
+                if (res.length > 0) {
+                    content.sa_saleareaid = res[0].sa_saleareaid
+                }
+            })
+            _Http.basic({
+                "id": 2026010714131502,
+                content
+            }).then(res => {
+                console.log("产品目标", res)
+                if (res.code != 1) return wx.showToast({
+                    title: res.msg,
+                    icon: "none"
+                });
+                let tabs = [],
+                    details = {};
+
+                res.data.forEach((item, index) => {
+                    tabs.push({
+                        name: item.itemclassname,
+                        index: index,
+                        key: 'm_'
+                    })
+                    item.m_balanceamount = CNY(item.m_balanceamount)
+                    item.m_saleamount = CNY(item.m_saleamount)
+                    item.m_targetamount = CNY(item.m_targetamount)
+                    details[item.itemclassname] = item;
+                })
+
+
+                this.setData({
+                    tabs,
+                    details
+                })
+            })
+        },
+        changeDate({
+            detail
+        }) {
+            let date = detail.split("-")
+            this.setData({
+                "content.year": date[0],
+                "content.month": date[1] - 0
+            })
+            this.getData()
+        },
+        changeType(e) {
+            const {
+                item
+            } = e.currentTarget.dataset;
+            this.setData({
+                showType: item.index
+            })
+        },
+        // 获取营销类别
+        getSales() {
+            _Http.basic({
+                "content": {},
+                "id": 2025123014533002
+            }).then(res => {
+                console.log("营销类别", res)
+                const tabs = res.code != 1 ? [] : res.data.map((v, i) => {
+                    return {
+                        name: v,
+                        index: i,
+                        key: 'm_'
+                    }
+                });
+                this.setData({
+                    tabs
+                })
+                this.closeSelect()
+            })
+        },
+        selectSale() {
+            this.setData({
+                salesShow: true
+            })
+        },
+        onSelect(e) {
+            this.setData({
+                showType: e.detail.index
+            })
+            this.closeSelect();
+        },
+        swiperChange(e) {
+            this.setData({
+                showType: e.detail.current
+            })
+            this.closeSelect()
+        },
+        closeSelect() {
+            this.setData({
+                salesShow: false
+            });
+            this.setData({
+                tabs: this.data.tabs.map(v => {
+                    v.color = v.index == this.data.showType ? '#3874F6' : ''
+                    return v
+                })
+            })
+        },
+    }
+})

salesPanel/personTarget/target/index.json

@@ -0,0 +1,5 @@
+{
+    "component": true,
+    "usingComponents": {
+    }
+}

salesPanel/personTarget/target/index.scss

@@ -0,0 +1,126 @@
+page {
+    width: 100vw;
+    overflow: hidden;
+}
+
+.head {
+    display: flex;
+    margin-bottom: 30rpx;
+
+    .item {
+        font-weight: bold;
+    }
+}
+
+.chart {
+    margin: 0 auto;
+    width: 280rpx;
+    flex-shrink: 0;
+    margin-bottom: 20rpx;
+
+    .circle {
+        width: 280rpx;
+        height: 280rpx;
+        position: relative;
+        border-radius: 50%;
+        box-shadow: inset 0 0 0 20rpx var(--assist);
+
+        .ab {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+        }
+
+        &_left {
+            border: 20rpx solid #EBEEF5;
+            border-radius: 50%;
+            clip: rect(0, 140rpx, 280rpx, 0);
+        }
+
+        &_right {
+            border: 20rpx solid #EBEEF5;
+            border-radius: 50%;
+            clip: rect(0, 280rpx, 280rpx, 140rpx);
+        }
+
+        &_text {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-size: 32rpx;
+
+            .value {
+                font-family: Microsoft YaHei, Microsoft YaHei;
+                font-weight: bold;
+                font-size: 32rpx;
+                color: #333333;
+                margin-top: 12rpx;
+            }
+
+            .name {
+                font-family: Microsoft YaHei, Microsoft YaHei;
+                color: #999999;
+                margin-top: 16rpx;
+            }
+        }
+    }
+}
+
+.card {
+    width: 100%;
+    border-radius: 20rpx;
+    border: 1rpx solid #E0E0E0;
+    padding: 20rpx 40rpx;
+    margin-top: 20rpx;
+
+    .title {
+        line-height: 32rpx;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-size: 24rpx;
+        color: #999999;
+    }
+
+    .price {
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-size: 24rpx;
+        color: #3685FC;
+        margin-top: 10rpx;
+
+        text {
+            font-size: 40rpx;
+            margin-right: 6rpx;
+        }
+    }
+
+    .row {
+        line-height: 32rpx;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-size: 24rpx;
+        color: #999999;
+        margin-top: 6rpx;
+
+        .increase,
+        .decrease {
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-left: 8rpx solid transparent;
+            border-right: 8rpx solid transparent;
+            margin-left: 10rpx;
+        }
+
+        .increase {
+            border-bottom: 14rpx solid #009966;
+        }
+
+        .decrease {
+            border-top: 14rpx solid #EF0606;
+        }
+    }
+
+}

salesPanel/personTarget/target/index.wxml

@@ -0,0 +1,72 @@
+<view style="height: 10rpx;"></view>
+<filtrate id='Filtrate' iconName='icon-bumen' wx:if='{{areaList.length}}' list='{{areaList}}' type="{{active}}" title='营销区域' bind:onChange='changeArea' />
+<viewDate iconName='icon-shijian1' fields='month' title='时间范围' bind:onChange='changeDate' />
+<view style="height: 20rpx;"></view>
+<view class="global-card" style="overflow: hidden;">
+
+	<view class="head">
+		<view class="item" catch:tap="selectSale">{{tabs[showType].name}}<text class="iconfont icon-webxialaxuanxiangjiantou"></text></view>
+	</view>
+	<van-action-sheet show="{{  salesShow }}" actions="{{ tabs }}" bind:select='onSelect' bind:cancel='closeSelect' bind:click-overlay='closeSelect' cancel-text="取消" />
+
+
+	<swiper current="{{showType}}" circular style="height: 760rpx;" bindchange='swiperChange'>
+		<swiper-item wx:for="{{tabs}}" wx:key="name">
+			<view class="chart">
+				<view class="circle">
+					<view class="circle_left ab" style="{{render.leftRate(details[tabs[showType].name][item.key +'rate_achieve'])}}" />
+					<view class="circle_right ab" style="{{render.rightRate(details[tabs[showType].name][item.key +'rate_achieve'])}}" />
+					<view class="circle_text">
+						<text class="name">目标达成率</text>
+						<text class="value">{{details[tabs[showType].name][item.key + 'rate_achieve' ]}}%</text>
+					</view>
+				</view>
+			</view>
+
+			<view class="card">
+				<view class="title">销售额</view>
+				<view class="price">
+					<text>{{details[tabs[showType].name][item.key + 'saleamount' ]}}</text>
+				</view>
+				<view class="row">
+					同比：{{details[tabs[showType].name][item.key + 'rate_yoy' ]}}%
+					<view wx:if="{{details[tabs[showType].name][item.key  + 'rate_yoy'] != 0}}" class="{{details[tabs[showType].name][item.key + 'rate_yoy']>=0?'increase':'decrease'}}" />
+				</view>
+				<view class="row">
+					环比：{{details[tabs[showType].name][item.key + 'rate_mom' ]}}%
+					<view wx:if="{{details[tabs[showType].name][item.key + 'rate_mom'] != 0}}" class="{{details[tabs[showType].name][item.key + 'rate_mom']>=0?'increase':'decrease'}}" />
+				</view>
+			</view>
+
+			<view class="card">
+				<view class="title">任务量</view>
+				<view class="price">
+					<text>{{details[tabs[showType].name][item.key + 'targetamount' ]}}</text>
+				</view>
+				<view class="row">
+					目标达成率：{{details[tabs[showType].name][item.key + 'rate_achieve' ]}}%
+				</view>
+				<view class="row">
+					销售额与任务量差额：{{details[tabs[showType].name][item.key + 'balanceamount' ]}}
+				</view>
+			</view>
+		</swiper-item>
+	</swiper>
+</view>
+
+<wxs module="render">
+	module.exports = {
+		rightRate: function (rate) {
+			if (rate - 0 < 50) {
+				return 'transform: rotate(' + 3.6 * (rate - 0) + 'deg);';
+			} else {
+				return 'transform: rotate(0);border-color: var(--assist);';
+			}
+		},
+		leftRate: function (rate) {
+			if (rate - 0 >= 50) {
+				return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);';
+			}
+		}
+	}
+</wxs>