销售回款显示

pages/index/performance/modules/chart/index.js

@@ -0,0 +1,82 @@
+let _Http = getApp().globalData.http,
+  {
+    formatTime
+  } = require("../../../../../utils/getTime"),
+  obj = {}
+Component({
+  properties: {
+
+  },
+  lifetimes: {
+    attached: function () {
+      let date = formatTime().split(" ")[0].split("/");
+      obj = {
+        year: date[0],
+        month: date[1],
+        day: date[2],
+        quarter: Math.ceil(date[1] / 3)
+      };
+      console.log(obj)
+      this.getDetail()
+    },
+  },
+  data: {
+
+  },
+  methods: {
+    getDetail() {
+      _Http.basic({
+        "id": "20231018103203",
+        "content": {
+          date: Date.now()
+        },
+      }).then(res => {
+        console.log("获取经销商统计", res)
+        if (res.data.length == 0) return;
+        let data = res.data[0],
+          ar = [{
+            fulfill: data.m1a + data.m2a + data.m3a,
+            target: data.m3l + data.m3l + data.m3l,
+          }, {
+            fulfill: data.m4a + data.m5a + data.m6a,
+            target: data.m4l + data.m5l + data.m6l,
+          }, {
+            fulfill: data.m7a + data.m8a + data.m9a,
+            target: data.m7l + data.m8l + data.m9l,
+          }, {
+            fulfill: data.m10a + data.m11a + data.m12a,
+            target: data.m10l + data.m11l + data.m12l,
+          }].map(v => {
+            v.achievingRate = (v.fulfill / v.target) * 100 + '%'
+            return v
+          });
+        this.setData({
+          areafullname: data.areafullname,
+          statistics: [{
+            label: "月度",
+            fulfill: data[`m${obj.month}a`],
+            target: data[`m${obj.month}l`],
+            distance: Math.abs(data[`m${obj.month}a`] - data[`m${obj.month}l`]), //差额
+            achievingRate: data[`m${obj.month}pl`] + "%", //达成
+            color: "#FF9900"
+          }, {
+            label: "季度",
+            ...ar[obj.quarter - 1],
+            distance: Math.abs(ar[obj.quarter - 1].fulfill - ar[obj.quarter - 1].target), //差额
+            color: "#2AB4A3"
+          }, {
+            fulfill: data.y1a,
+            target: data.y1l,
+            achievingRate: data.y1pl + '%',
+            label: "年度",
+            distance: Math.abs(data.y1a - data.y1l), //差额
+            color: "#FF001F"
+          }].map(v => {
+            v.achievingRate = v.achievingRate.split("%")[0] - 0
+            return v
+          })
+        })
+      })
+    }
+  }
+})

pages/index/performance/modules/chart/index.json

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

pages/index/performance/modules/chart/index.scss

@@ -0,0 +1,104 @@
+.label {
+	padding: 30rpx;
+	padding-bottom: 10rpx;
+	box-sizing: border-box;
+	background-color: #fff;
+	color: #000;
+	font-size: 30rpx;
+	font-weight: bold;
+
+	text{
+		color: #31A7FF;
+		margin-left: 6rpx;
+	}
+}
+.chart {
+	width: 100vw;
+	background-color: #fff;
+	display: flex;
+	padding: 30rpx 0;
+	box-sizing: border-box;
+
+	.item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		flex: 1;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 0;
+		font-weight: bold;
+
+		.s-label,
+		.s-fulfill,
+		.s-row {
+			width: 100%;
+			text-align: center;
+			padding: 0 8rpx;
+		}
+
+		.s-label {
+			font-size: 26rpx;
+		}
+
+		.s-fulfill {
+			font-size: 34rpx;
+			margin-top: 8rpx;
+		}
+
+		.s-row {
+			font-size: 22rpx;
+			margin-top: 8rpx;
+		}
+
+
+		.circle {
+			width: 100rpx;
+			height: 100rpx;
+			position: relative;
+			border-radius: 50%;
+			margin-bottom: 25rpx;
+			transform: scale(1.15);
+
+			.ab {
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				margin: auto;
+			}
+
+			&_left {
+				border: 8rpx solid #ccc;
+				border-radius: 50%;
+				clip: rect(0, 50rpx, 100rpx, 0);
+			}
+
+			&_right {
+				border: 8rpx solid #ccc;
+				border-radius: 50%;
+				clip: rect(0, 100rpx, 100rpx, 50rpx);
+			}
+
+			&_text {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				font-size: 24rpx;
+				font-family: PingFang SC-Regular, PingFang SC;
+
+				.value {
+					margin-top: -6rpx;
+				}
+
+				.name {
+					margin-top: 6rpx;
+				}
+			}
+		}
+
+	}
+}

pages/index/performance/modules/chart/index.wxml

@@ -0,0 +1,26 @@
+<block wx:if="{{areafullname}}">
+	<view class="label">区域业绩目标<text wx:if="{{areafullname}}">({{areafullname}})</text></view>
+	<view class="chart">
+		<view class="item" wx:for="{{statistics}}" style="color: {{item.color}} !important;">
+			<view class="circle" style="box-shadow: inset 0 0 0 8rpx  {{item.color}};">
+				<view class="circle_left ab" style="{{render.leftRate(item.achievingRate)}}" />
+				<view class="circle_right ab" style="{{render.rightRate(item.achievingRate,item.color)}}" />
+				<view class="circle_text">
+					{{item.achievingRate}}%
+				</view>
+			</view>
+			<view class="s-label">
+				{{item.label}}
+			</view>
+			<view class="s-fulfill line-1">
+				{{item.fulfill}}万
+			</view>
+			<view class="s-row line-1">
+				目标:{{item.target}}万
+			</view>
+			<view class="s-row line-1">
+				差额:{{item.distance}}万
+			</view>
+		</view>
+	</view>
+</block>