xpz2018
4 years ago
30 changed files with 954 additions and 523 deletions
Split View
Diff Options
-
5api/saas.js
-
BINassets/home/icon-report.png
-
43components/circle/canvas.js
-
185components/circle/index.js
-
3components/circle/index.json
-
9components/circle/index.wxml
-
1components/circle/index.wxss
-
3components/grid-item/index.js
-
7components/grid-item/index.wxml
-
215components/table/index.js
-
2components/table/index.json
-
43components/table/index.wxml
-
76components/table/index.wxss
-
2pages/home/index/index.wxml
-
BINxtends/image/icon-agent.png
-
BINxtends/image/icon-gross.png
-
BINxtends/image/icon-purchase.png
-
BINxtends/image/icon-sale.png
-
82xtends/statics/agent-report/index.js
-
26xtends/statics/agent-report/index.wxml
-
82xtends/statics/gross-report/index.js
-
27xtends/statics/gross-report/index.wxml
-
209xtends/statics/index/index.js
-
2xtends/statics/index/index.json
-
175xtends/statics/index/index.wxml
-
59xtends/statics/index/index.wxss
-
92xtends/statics/purchase-report/index.js
-
18xtends/statics/purchase-report/index.wxml
-
84xtends/statics/sale-report/index.js
-
27xtends/statics/sale-report/index.wxml
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 68 | Size: 3.4 KiB |
@ -0,0 +1,43 @@ |
|||
export function adaptor(ctx) { |
|||
// @ts-ignore
|
|||
return Object.assign(ctx, { |
|||
setStrokeStyle(val) { |
|||
ctx.strokeStyle = val; |
|||
}, |
|||
setLineWidth(val) { |
|||
ctx.lineWidth = val; |
|||
}, |
|||
setLineCap(val) { |
|||
ctx.lineCap = val; |
|||
}, |
|||
setFillStyle(val) { |
|||
ctx.fillStyle = val; |
|||
}, |
|||
setFontSize(val) { |
|||
ctx.font = String(val); |
|||
}, |
|||
setGlobalAlpha(val) { |
|||
ctx.globalAlpha = val; |
|||
}, |
|||
setLineJoin(val) { |
|||
ctx.lineJoin = val; |
|||
}, |
|||
setTextAlign(val) { |
|||
ctx.textAlign = val; |
|||
}, |
|||
setMiterLimit(val) { |
|||
ctx.miterLimit = val; |
|||
}, |
|||
setShadow(offsetX, offsetY, blur, color) { |
|||
ctx.shadowOffsetX = offsetX; |
|||
ctx.shadowOffsetY = offsetY; |
|||
ctx.shadowBlur = blur; |
|||
ctx.shadowColor = color; |
|||
}, |
|||
setTextBaseline(val) { |
|||
ctx.textBaseline = val; |
|||
}, |
|||
createCircularGradient() {}, |
|||
draw() {}, |
|||
}); |
|||
} |
|||
@ -0,0 +1,185 @@ |
|||
import { VantComponent } from '../common/component'; |
|||
import { BLUE, WHITE } from '../common/color'; |
|||
import { adaptor } from './canvas'; |
|||
import { isObj } from '../common/validator'; |
|||
import { getSystemInfoSync } from '../common/utils'; |
|||
function format(rate) { |
|||
return Math.min(Math.max(rate, 0), 100); |
|||
} |
|||
const PERIMETER = 2 * Math.PI; |
|||
const BEGIN_ANGLE = -Math.PI / 2; |
|||
const STEP = 1; |
|||
VantComponent({ |
|||
props: { |
|||
text: String, |
|||
lineCap: { |
|||
type: String, |
|||
value: 'round', |
|||
}, |
|||
value: { |
|||
type: Number, |
|||
value: 0, |
|||
observer: 'reRender', |
|||
}, |
|||
speed: { |
|||
type: Number, |
|||
value: 50, |
|||
}, |
|||
size: { |
|||
type: Number, |
|||
value: 100, |
|||
observer() { |
|||
this.drawCircle(this.currentValue); |
|||
}, |
|||
}, |
|||
fill: String, |
|||
layerColor: { |
|||
type: String, |
|||
value: WHITE, |
|||
}, |
|||
color: { |
|||
type: null, |
|||
value: BLUE, |
|||
observer() { |
|||
this.setHoverColor().then(() => { |
|||
this.drawCircle(this.currentValue); |
|||
}); |
|||
}, |
|||
}, |
|||
type: { |
|||
type: String, |
|||
value: '', |
|||
}, |
|||
strokeWidth: { |
|||
type: Number, |
|||
value: 4, |
|||
}, |
|||
clockwise: { |
|||
type: Boolean, |
|||
value: true, |
|||
}, |
|||
}, |
|||
data: { |
|||
hoverColor: BLUE, |
|||
}, |
|||
methods: { |
|||
getContext() { |
|||
const { type, size } = this.data; |
|||
if (type === '') { |
|||
const ctx = wx.createCanvasContext('van-circle', this); |
|||
return Promise.resolve(ctx); |
|||
} |
|||
const dpr = getSystemInfoSync().pixelRatio; |
|||
return new Promise((resolve) => { |
|||
wx.createSelectorQuery() |
|||
.in(this) |
|||
.select('#van-circle') |
|||
.node() |
|||
.exec((res) => { |
|||
const canvas = res[0].node; |
|||
const ctx = canvas.getContext(type); |
|||
if (!this.inited) { |
|||
this.inited = true; |
|||
canvas.width = size * dpr; |
|||
canvas.height = size * dpr; |
|||
ctx.scale(dpr, dpr); |
|||
} |
|||
resolve(adaptor(ctx)); |
|||
}); |
|||
}); |
|||
}, |
|||
setHoverColor() { |
|||
const { color, size } = this.data; |
|||
if (isObj(color)) { |
|||
return this.getContext().then((context) => { |
|||
const LinearColor = context.createLinearGradient(size, 0, 0, 0); |
|||
Object.keys(color) |
|||
.sort((a, b) => parseFloat(a) - parseFloat(b)) |
|||
.map((key) => |
|||
LinearColor.addColorStop(parseFloat(key) / 100, color[key]) |
|||
); |
|||
this.hoverColor = LinearColor; |
|||
}); |
|||
} |
|||
this.hoverColor = color; |
|||
return Promise.resolve(); |
|||
}, |
|||
presetCanvas(context, strokeStyle, beginAngle, endAngle, fill) { |
|||
const { strokeWidth, lineCap, clockwise, size } = this.data; |
|||
const position = size / 2; |
|||
const radius = position - strokeWidth / 2; |
|||
context.setStrokeStyle(strokeStyle); |
|||
context.setLineWidth(strokeWidth); |
|||
context.setLineCap(lineCap); |
|||
context.beginPath(); |
|||
context.arc(position, position, radius, beginAngle, endAngle, !clockwise); |
|||
context.stroke(); |
|||
if (fill) { |
|||
context.setFillStyle(fill); |
|||
context.fill(); |
|||
} |
|||
}, |
|||
renderLayerCircle(context) { |
|||
const { layerColor, fill } = this.data; |
|||
this.presetCanvas(context, layerColor, 0, PERIMETER, fill); |
|||
}, |
|||
renderHoverCircle(context, formatValue) { |
|||
const { clockwise } = this.data; |
|||
// 结束角度
|
|||
const progress = PERIMETER * (formatValue / 100); |
|||
const endAngle = clockwise |
|||
? BEGIN_ANGLE + progress |
|||
: 3 * Math.PI - (BEGIN_ANGLE + progress); |
|||
this.presetCanvas(context, this.hoverColor, BEGIN_ANGLE, endAngle); |
|||
}, |
|||
drawCircle(currentValue) { |
|||
const { size } = this.data; |
|||
this.getContext().then((context) => { |
|||
context.clearRect(0, 0, size, size); |
|||
this.renderLayerCircle(context); |
|||
const formatValue = format(currentValue); |
|||
if (formatValue !== 0) { |
|||
this.renderHoverCircle(context, formatValue); |
|||
} |
|||
context.draw(); |
|||
}); |
|||
}, |
|||
reRender() { |
|||
// tofector 动画暂时没有想到好的解决方案
|
|||
const { value, speed } = this.data; |
|||
if (speed <= 0 || speed > 1000) { |
|||
this.drawCircle(value); |
|||
return; |
|||
} |
|||
this.clearInterval(); |
|||
this.currentValue = this.currentValue || 0; |
|||
this.interval = setInterval(() => { |
|||
if (this.currentValue !== value) { |
|||
if (this.currentValue < value) { |
|||
this.currentValue += STEP; |
|||
} else { |
|||
this.currentValue -= STEP; |
|||
} |
|||
this.drawCircle(this.currentValue); |
|||
} else { |
|||
this.clearInterval(); |
|||
} |
|||
}, 1000 / speed); |
|||
}, |
|||
clearInterval() { |
|||
if (this.interval) { |
|||
clearInterval(this.interval); |
|||
this.interval = null; |
|||
} |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.currentValue = this.data.value; |
|||
this.setHoverColor().then(() => { |
|||
this.drawCircle(this.currentValue); |
|||
}); |
|||
}, |
|||
destroyed() { |
|||
this.clearInterval(); |
|||
}, |
|||
}); |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
<wxs src="../wxs/utils.wxs" module="utils" /> |
|||
|
|||
<view class="van-circle"> |
|||
<canvas class="van-circle__canvas" type="{{ type }}" style="width: {{ utils.addUnit(size) }};height:{{ utils.addUnit(size) }}" id="van-circle" canvas-id="van-circle"></canvas> |
|||
<view wx:if="{{ !text }}" class="van-circle__text"> |
|||
<slot></slot> |
|||
</view> |
|||
<cover-view wx:else class="van-circle__text">{{ text }}</cover-view> |
|||
</view> |
|||
@ -0,0 +1 @@ |
|||
@import '../common/index.wxss';.van-circle{position:relative;display:inline-block;text-align:center}.van-circle__text{position:absolute;top:50%;left:0;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#323233;color:var(--circle-text-color,#323233)} |
|||
@ -1,138 +1,89 @@ |
|||
/** slot action 固定按钮操作 |
|||
* btnName 按钮名 |
|||
* valueCallback 按钮返回值 |
|||
按钮绑定事件 btnClick |
|||
|
|||
tr绑定事件 onRowClick |
|||
valueCallback tr返回值 |
|||
|
|||
columns 数组 { |
|||
key: '', |
|||
title: '', |
|||
width: 200, |
|||
fixed: 'left', //设置fixed 必须设置width
|
|||
align: 'center', |
|||
|
|||
// 按钮默认 slot action
|
|||
slot: 'action' |
|||
valueCallback: '', |
|||
btnName: '' |
|||
} |
|||
**/ |
|||
Component({ |
|||
options: { |
|||
multipleSlots: true, |
|||
/** |
|||
* 外部样式类 |
|||
*/ |
|||
externalClasses: ['header-row-class-name', 'row-class-name', 'cell-class-name'], |
|||
/** |
|||
* 组件样式隔离 |
|||
*/ |
|||
options: { |
|||
styleIsolation: "isolated", |
|||
multipleSlots: true // 支持多个slot
|
|||
}, |
|||
/** |
|||
* 组件的属性列表 |
|||
*/ |
|||
properties: { |
|||
data: { |
|||
type: Array, |
|||
value: [] |
|||
}, |
|||
// 自定义外部样式class th头部样式 tr样式 td样式
|
|||
externalClasses: ['thead-row-class', 'tbody-tow-class', 'td-class'], |
|||
properties: { |
|||
// td 数组
|
|||
data: { |
|||
type: Array, |
|||
value: [] |
|||
}, |
|||
// thead 数组
|
|||
columns: { |
|||
type: Array, |
|||
value: [] |
|||
}, |
|||
// table 高度
|
|||
height: { |
|||
type: String, |
|||
value: 'auto' |
|||
}, |
|||
// table 宽度
|
|||
width: { |
|||
type: Number || String, |
|||
value: 750 |
|||
}, |
|||
// 单元格的宽度
|
|||
tdWidth: { |
|||
type: Number, |
|||
value: 35 |
|||
}, |
|||
// 固定表头 thead达到Header的位置时就应该被fixed了
|
|||
offsetTop: { |
|||
type: Number, |
|||
value: 150 |
|||
}, |
|||
// 是否带有纵向边框
|
|||
isBorder: { |
|||
type: Boolean, |
|||
value: true |
|||
}, |
|||
// 是否带有斑马条纹
|
|||
isStripe: { |
|||
type: Boolean, |
|||
value: true |
|||
}, |
|||
// tr 返回值Key
|
|||
valueCallback: { |
|||
type: String, |
|||
value: '' |
|||
}, |
|||
// 无数据时信息
|
|||
msg: { |
|||
type: String, |
|||
value: '暂无数据~' |
|||
}, |
|||
// thead 固定
|
|||
isFixed: { |
|||
type: Boolean, |
|||
value: true |
|||
}, |
|||
headers: { |
|||
type: Array, |
|||
value: [] |
|||
}, |
|||
data: { |
|||
scrolWidth: '100%', |
|||
marginTopValue: 0, |
|||
leftWidth: 0, |
|||
leftIndex: 0, |
|||
rightWidth: 0, |
|||
rightIndex: 0, |
|||
// table的高度, 溢出可滚动
|
|||
height: { |
|||
type: Number || String, |
|||
value: 'auto' |
|||
}, |
|||
width: { |
|||
type: Number || String, |
|||
value: '100%' |
|||
}, |
|||
// 生命周期
|
|||
lifetimes: { |
|||
// 组件实例进入页面节点树时调用
|
|||
attached() { |
|||
const scrolWidth = this.properties.columns.reduce((total, item) => total + item.width, 0) |
|||
this.createSelectorQuery().selectAll(".thead .td").boundingClientRect((res) => { |
|||
if (!isNaN(scrolWidth)) { |
|||
this.properties.columns.map(item => { |
|||
item.width = item.width / scrolWidth * this.properties.width |
|||
}) |
|||
} else { |
|||
this.properties.columns.map((item, index) => { |
|||
item.width = res[index].width |
|||
}) |
|||
} |
|||
}).exec(res => { |
|||
let list = [], listLeft = [], listRight = [], leftWidth = 0, rightWidth = 0; |
|||
list = this.properties.columns.filter(item => !item.fixed) |
|||
listLeft = this.properties.columns.filter(item => item.fixed == 'left') |
|||
listLeft.map(item => { |
|||
leftWidth += item.width |
|||
}) |
|||
listRight = this.properties.columns.filter(item => item.fixed == 'right') |
|||
listRight.map(item => { |
|||
rightWidth += item.width |
|||
}) |
|||
this.setData({ |
|||
columns: [...listLeft, ...list, ...listRight], |
|||
marginTopValue: res[0][0].height, |
|||
leftWidth: leftWidth, |
|||
rightWidth: rightWidth, |
|||
leftIndex: listLeft.length ? listLeft.length : 0, |
|||
rightIndex: listRight.length ? this.properties.columns.length - listRight.length - 1 : 0 |
|||
}) |
|||
}) |
|||
}, |
|||
// 单元格的宽度
|
|||
tdWidth: { |
|||
type: Number, |
|||
value: 35 |
|||
}, |
|||
methods: { |
|||
onRowClick(e) { |
|||
this.triggerEvent('rowClick', e.target.dataset) |
|||
}, |
|||
onBtnClick(e) { |
|||
this.triggerEvent('btnClick', e.target.dataset) |
|||
} |
|||
// 固定表头 thead达到Header的位置时就应该被fixed了
|
|||
offsetTop: { |
|||
type: Number, |
|||
value: 150 |
|||
}, |
|||
}) |
|||
// 是否带有纵向边框
|
|||
stripe: { |
|||
type: Boolean, |
|||
value: false |
|||
}, |
|||
// 是否带有纵向边框
|
|||
border: { |
|||
type: Boolean, |
|||
value: true |
|||
}, |
|||
msg: { |
|||
type: String, |
|||
value: '暂无数据~' |
|||
} |
|||
}, |
|||
/** |
|||
* 组件的初始数据 |
|||
*/ |
|||
data: { |
|||
scrolWidth: '100%' |
|||
}, |
|||
/** |
|||
* 组件的监听属性 |
|||
*/ |
|||
observers: { |
|||
// 在 numberA 或者 numberB 被设置时，执行这个函数
|
|||
'headers': function headers(_headers) { |
|||
var reducer = function reducer(accumulator, currentValue) { |
|||
return accumulator + Number(currentValue.width); |
|||
}; |
|||
var scrolWidth = _headers.reduce(reducer, 0); |
|||
|
|||
this.setData({ |
|||
scrolWidth: scrolWidth |
|||
}); |
|||
} |
|||
}, |
|||
/** |
|||
* 组件的方法列表 |
|||
*/ |
|||
methods: { |
|||
onRowClick: function onRowClick(e) { |
|||
this.triggerEvent('rowClick', e, e.currentTarget.dataset.it); |
|||
} |
|||
} |
|||
}); |
|||
@ -1,3 +1,3 @@ |
|||
{ |
|||
"component": true |
|||
} |
|||
} |
|||
@ -1,22 +1,21 @@ |
|||
<scroll-view scroll-x="true" enable-flex="true" class="table" style="width: 100%;"> |
|||
<view class="thead {{isBorder ? 'thead-border' : ''}} thead-row-class" style="width: {{width}}rpx; position: {{isFixed ? 'fixed' : 'static'}}"> |
|||
<view class="td" wx:for="{{columns}}" wx:key="index" style="width: {{item['width'] ? item['width'] : 200}}px; text-align: {{item.align ? item.align : 'center'}};">{{item.title}}</view> |
|||
</view> |
|||
<scroll-view scroll-y="true" class="tbody" style="width: {{width}}rpx; height: {{height ? height + 'rpx': 'auto'}};padding-top: {{marginTopValue}}px"> |
|||
<block wx:for="{{data}}" wx:key="index" wx:if="{{data.length > 0}}"> |
|||
<view class="tbody-tr {{ isStripe ? 'tbody-tr-stripe' : '' }} {{ isBorder ? 'tbody-tr-border' : ''}} tbody-tow-class"> |
|||
<view wx:for-item="thead" wx:for-index="theadIndex" wx:key="theadIndex" wx:for="{{columns}}" class="td td-class" |
|||
style="width: {{columns[theadIndex].width}}px; text-align:{{columns[theadIndex].align ? columns[theadIndex].align : 'center'}}" |
|||
data-value="{{valueCallback ? item[valueCallback]: item}}" bindtap="onRowClick"> |
|||
{{item[thead['key']]}} |
|||
<button wx:if="{{thead.slot}}" class='btn' plain="true" size='mini' data-value="{{item.valueCallback ? item[valueCallback]: item}}" |
|||
bindtap="onBtnClick">{{thead.btnName}}</button> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<block wx:if="{{data.length == 0}}"> |
|||
<view class="no-data"> {{msg}} </view> |
|||
</block> |
|||
</scroll-view> |
|||
</scroll-view> |
|||
<slot></slot> |
|||
<scroll-view scroll-x="true" style="width:100%;" class="table table-border"> |
|||
<!-- 表格头 start --> |
|||
<view class="thead {{ border ? 'thead-border' : ''}} header-row-class-name" style="width:{{ scrolWidth }}rpx;"> |
|||
<view wx:for="{{ headers }}" wx:key="index" class="td" style="width:{{ item.width }}rpx;line-height: 80rpx">{{ item.label }}</view> |
|||
</view> |
|||
<!-- 表格体 start --> |
|||
<scroll-view scroll-y="true" class="tbody" style="width:{{ scrolWidth }}rpx; height:{{ height ? height : 'auto' }}rpx;"> |
|||
<block wx:if="{{ data.length > 0 }}" wx:for-item="it" wx:for="{{ data }}" wx:for-index="idx" wx:key="idx"> |
|||
<view class="tbody-tr {{ stripe ? 'tbody-tr-stripe' : '' }} {{ border ? 'tbody-tr-border' : ''}} row-class-name"> |
|||
<view wx:for-item="head" wx:for="{{ headers }}" wx:key="index" class="td cell-class-name" data-it="{{it}}" |
|||
data-row="{{index}}" data-column="{{idx+1}}" style="width:{{ headers[index].width }}rpx;color:{{ headers[index].color }};" bindtap="onRowClick"> |
|||
{{it[head["prop"]]}} |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<!-- 列表无数据处理 --> |
|||
<block wx:if="{{ data.length === 0 }}"> |
|||
<view class="no-data">{{ msg }}</view> |
|||
</block> |
|||
</scroll-view> |
|||
</scroll-view> |
|||
@ -1,68 +1,86 @@ |
|||
|
|||
.table { |
|||
position: relative; |
|||
font-size: 28rpx; |
|||
background: #fff; |
|||
border-right:none; |
|||
/* border-radius: 8rpx; */ |
|||
overflow: hidden; |
|||
} |
|||
.thead{ |
|||
border-bottom: none; |
|||
display: flex; |
|||
border: 1px solid #ebeef5; |
|||
justify-content: flex-start; |
|||
/* border-top-right-radius: 8rpx; |
|||
border-top-left-radius: 8rpx; */ |
|||
overflow: visible; |
|||
color: #909399; |
|||
border: 1rpx solid #ebeef5; |
|||
box-sizing: border-box; |
|||
z-index: 9; |
|||
} |
|||
.thead .td { |
|||
padding: 20rpx 10rpx; |
|||
/* padding: 20rpx 10rpx; */ |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
white-space:nowrap; |
|||
text-align: center; |
|||
border-right: 1rpx solid #fff; |
|||
background: #fff; |
|||
} |
|||
.thead-border .td, .tbody-tr-border .td { |
|||
.thead .td:last-child { |
|||
border-right: none; |
|||
} |
|||
.thead-border .td { |
|||
border-right: 1rpx solid #ebeef5; |
|||
} |
|||
.thead .td:last-child, .tbody-tr-border .td:last-child{ |
|||
.thead-border .td:last-child { |
|||
border-right: none; |
|||
} |
|||
/* .tr{ |
|||
display: flex; |
|||
white-space:nowrap; |
|||
} */ |
|||
.tbody { |
|||
box-sizing: border-box; |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
border: 1px solid #ebeef5; |
|||
border: 1px solid #ebeef5; |
|||
border-top: none; |
|||
/* border-bottom-left-radius: 8rpx; |
|||
border-bottom-right-radius: 8rpx; */ |
|||
} |
|||
.tbody-tr { |
|||
border-bottom: 1px solid #ebeef5; |
|||
display: flex; |
|||
border-bottom: 1px solid #ebeef5; |
|||
} |
|||
.tbody-tr .td { |
|||
padding: 20rpx 10rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #fff; |
|||
} |
|||
/* .tbody-tr:last-child { |
|||
border-bottom-left-radius: 8rpx; |
|||
border-bottom-right-radius: 8rpx; |
|||
} */ |
|||
|
|||
.tbody-tr-stripe { |
|||
background: #fff; |
|||
border-bottom: none; |
|||
} |
|||
.tbody-tr-stripe:nth-child(2n) .td{ |
|||
.tbody-tr-stripe:nth-child(2n) { |
|||
background: #F6F6F6; |
|||
} |
|||
/* .tbody-tr .td text { |
|||
line-height: 0; |
|||
} */ |
|||
.tbody-tr .td .btn { |
|||
font-size: 28rpx; |
|||
padding:0 5rpx; |
|||
color: #666; |
|||
width: 30px; |
|||
.tbody-tr .td { |
|||
white-space: wrap; |
|||
height: 80rpx; |
|||
/* padding:20rpx 10rpx; */ |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
} |
|||
.td { |
|||
overflow: hidden; |
|||
word-break: break-all; |
|||
|
|||
.tbody-tr-border .td { |
|||
border-right: 1rpx solid #F6F6F6; |
|||
} |
|||
.tbody-tr-border .td:last-child { |
|||
border-right: none; |
|||
} |
|||
.no-data { |
|||
text-align: center; |
|||
padding: 40rpx; |
|||
display: flex; |
|||
padding: 50rpx; |
|||
color: #666; |
|||
justify-content: center; |
|||
} |
|||
| Before | After |
|---|---|
|
|
| Width: 80 | Height: 80 | Size: 3.6 KiB |
| Before | After |
|---|---|
|
|
| Width: 80 | Height: 80 | Size: 4.3 KiB |
| Before | After |
|---|---|
|
|
| Width: 80 | Height: 80 | Size: 3.4 KiB |
| Before | After |
|---|---|
|
|
| Width: 80 | Height: 80 | Size: 4.5 KiB |
@ -1,20 +1,38 @@ |
|||
<!--xtends//statics/index/index.wxml--> |
|||
<wxs module="formate" src="../../../pages/formate.wxs"></wxs> |
|||
<cu-custom bgColor="bg-white" isBack="{{true}}"> |
|||
<view slot="content">代卖报表</view> |
|||
</cu-custom> |
|||
|
|||
<view class="bg-white flex flex-justify" style="height:80rpx;padding: 0rpx 32rpx" bindtap="showCalendar"> |
|||
<view class="bg-white flex flex-justify van-hairline--bottom" style="height:80rpx;padding: 0rpx 32rpx" bindtap="showCalendar"> |
|||
<view class="flex flex-center" bindtap="showCalendar"> |
|||
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view> |
|||
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">出货信息</view> |
|||
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">代卖统计</view> |
|||
</view> |
|||
<view class="flex flex-center" style="padding: 2rpx 0rpx"> |
|||
<view class="text-black text-df" style="margin-right:8rpx">{{vdateString}}</view> |
|||
<van-icon name="{{show ? 'arrow-up' : 'arrow-down'}}" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<van-table columns="{{columns}}" height="{{height}}" data="{{data}}"></van-table> |
|||
<view class="bg-white flex" style="height:120rpx;padding-top:24rpx;"> |
|||
<view style="width:320rpx;padding-left:48rpx"> |
|||
<view class="text-xxl text-bold" style="color:#008AFF">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
|||
<view class="text-black text-sm">代卖重量(吨)</view> |
|||
</view> |
|||
<view style="width:300rpx;"> |
|||
<view class="text-xxl text-bold" style="color:#008AFF">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
|||
<view class="text-black text-sm">实收(元)</view> |
|||
</view> |
|||
</view> |
|||
<view class="bg-white flex" style="height:120rpx;padding-top:8rpx"> |
|||
<view style="width:320rpx;padding-left:48rpx"> |
|||
<view class="text-xxl text-bold" style="color:#008AFF">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
|||
<view class="text-black text-sm">代卖费(元)</view> |
|||
</view> |
|||
<view style="width:300rpx;"> |
|||
</view> |
|||
</view> |
|||
<van-table headers="{{columns}}" data="{{ data }}" height="{{ height }}" stripe="{{ true }}"/> |
|||
|
|||
<van-calendar show="{{ show }}" type="range" row-height="50" color="#008AFF" z-index="22" min-date="{{ minDate }}" max-date="{{ maxDate }}" default-date="{{ vdate }}" title="日期范围选择" show-subtitle="{{ false }}" show-confirm="{{ false }}" bind:close="onClose" bind:confirm="onSelect"/> |
|||
<notification id="qn-notification"/> |
|||
@ -1,20 +1,39 @@ |
|||
<!--xtends//statics/index/index.wxml--> |
|||
<wxs module="formate" src="../../../pages/formate.wxs"></wxs> |
|||
<cu-custom bgColor="bg-white" isBack="{{true}}"> |
|||
<view slot="content">毛利报表</view> |
|||
</cu-custom> |
|||
|
|||
<view class="bg-white flex flex-justify" style="height:80rpx;padding: 0rpx 32rpx" bindtap="showCalendar"> |
|||
<view class="bg-white flex flex-justify van-hairline--bottom" style="height:80rpx;padding: 0rpx 32rpx" bindtap="showCalendar"> |
|||
<view class="flex flex-center" bindtap="showCalendar"> |
|||
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view> |
|||
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">出货信息</view> |
|||
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">收支统计</view> |
|||
</view> |
|||
<view class="flex flex-center" style="padding: 2rpx 0rpx"> |
|||
<view class="text-black text-df" style="margin-right:8rpx">{{vdateString}}</view> |
|||
<van-icon name="{{show ? 'arrow-up' : 'arrow-down'}}" /> |
|||
</view> |
|||
</view> |
|||
|
|||
<van-table columns="{{columns}}" height="{{height}}" data="{{data}}"></van-table> |
|||
<view class="bg-white flex" style="height:120rpx;padding-top:24rpx;"> |
|||
<view style="width:320rpx;padding-left:48rpx"> |
|||
<view class="text-xxl text-bold" style="color:#008AFF">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
|||
<view class="text-black text-sm">总支出(元)</view> |
|||
</view> |
|||
<view style="width:300rpx;"> |
|||
<view class="text-xxl text-bold" style="color:#008AFF">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
|||
<view class="text-black text-sm">总收入(元)</view> |
|||
</view> |
|||
</view> |
|||
<view class="bg-white flex" style="height:120rpx;padding-top:8rpx"> |
|||
<view style="width:320rpx;padding-left:48rpx"> |
|||
<view class="text-xxl text-bold" style="color:#008AFF">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
|||
<view class="text-black text-sm">总毛利(元)</view> |
|||
</view> |
|||
<view style="width:300rpx;"> |
|||
</view> |
|||
</view> |
|||
<!-- <van-table columns="{{columns}}" height="{{height}}" data="{{data}}"></van-table> --> |
|||
<van-table headers="{{columns}}" data="{{ data }}" height="{{ height }}" stripe="{{ true }}"/> |
|||
|
|||
<van-calendar show="{{ show }}" type="range" row-height="50" color="#008AFF" z-index="22" min-date="{{ minDate }}" max-date="{{ maxDate }}" default-date="{{ vdate }}" title="日期范围选择" show-subtitle="{{ false }}" show-confirm="{{ false }}" bind:close="onClose" bind:confirm="onSelect"/> |
|||
<notification id="qn-notification"/> |
|||
@ -1,102 +1,151 @@ |
|||
// xtends//statics/index/index.js
|
|||
import Scene from '../../../pages/index/scene' |
|||
import uCharts from '../../libs/u-charts'; |
|||
import { getSummaryReport } from "../../../api/saas" |
|||
const math = require('../../../utils/math') |
|||
import util from '../../../utils/util' |
|||
const app = getApp() |
|||
|
|||
var that; |
|||
var canvaColumn = null; |
|||
var windowWidth = 0; |
|||
// var that;
|
|||
// var canvaColumn = null;
|
|||
// var windowWidth = 0;
|
|||
|
|||
Scene({ |
|||
/** |
|||
* 页面的初始数据 |
|||
*/ |
|||
data: { |
|||
cWidth: '', |
|||
cHeight: '', |
|||
// cWidth: '',
|
|||
// cHeight: '',
|
|||
form1: {}, |
|||
form2: {}, |
|||
percent: 85, |
|||
show: false |
|||
}, |
|||
/** |
|||
* 生命周期函数--监听页面加载 |
|||
*/ |
|||
onLoad: function (options) { |
|||
that = this |
|||
windowWidth = wx.getSystemInfoSync().windowWidth |
|||
this.data.cWidth = windowWidth - this.rpx2px(100) |
|||
// math.divide
|
|||
this.data.cHeight = this.rpx2px(400) |
|||
this.getServerData() |
|||
// that = this
|
|||
// windowWidth = wx.getSystemInfoSync().windowWidth
|
|||
// this.data.cWidth = windowWidth - this.rpx2px(100)
|
|||
// // math.divide
|
|||
// this.data.cHeight = this.rpx2px(400)
|
|||
// this.getServerData()
|
|||
wx.showLoading({ title: '加载中', mask: true }) |
|||
var min = new Date() |
|||
min.setFullYear(min.getFullYear() - 1, min.getMonth(), min.getDate()) |
|||
min.setHours(0, 0, 0) |
|||
var minDate = min.getTime() |
|||
var max = new Date(new Date().getTime() + 24 * 60 * 60 * 1000) |
|||
max.setHours(0, 0, 0) |
|||
var maxDate = max.getTime() |
|||
var today = new Date() |
|||
today.setHours(0, 0, 0) |
|||
var vdate = [today.getTime(), maxDate] |
|||
var vdateString = util.formatDate(new Date(), 'Y-M-D') + '至' + util.formatDate(max, 'Y-M-D') |
|||
this.data.form1.dimensionDateStart = util.formatDate(today, 'Y-M-D') |
|||
this.data.form1.dimensionDateEnd = util.formatDate(max, 'Y-M-D') |
|||
this.data.form2.startTime = util.formatDate(today, 'Y-M-D') + ' 00:00:00' |
|||
this.data.form2.endTime = util.formatDate(max, 'Y-M-D') + ' 00:00:00' |
|||
this.setData({ minDate, maxDate, vdate, vdateString }) |
|||
this.fetchSummaryInfo(this.data.form1) |
|||
}, |
|||
rpx2px: function(rpx) { |
|||
return rpx / 750 * windowWidth; |
|||
}, |
|||
getServerData: function() { |
|||
wx.request({ |
|||
url: 'https://www.ucharts.cn/data.json', |
|||
success: function (res) { |
|||
let Column = { categories: [], series: [] }; |
|||
Column.categories = res.data.data.Pie.categories; |
|||
Column.series = res.data.data.Pie.series; |
|||
// 自定义标签颜色和字体大小
|
|||
// Column.series[1].textColor = 'red';
|
|||
// Column.series[1].textSize = 18;
|
|||
that.showColumn("canvasColumn", Column); |
|||
}, |
|||
fail: () => { |
|||
console.log("请点击右上角【详情】，启用不校验合法域名"); |
|||
}, |
|||
fetchSummaryInfo: function(form){ |
|||
getSummaryReport(form).then(result => { |
|||
// this.setData({ })
|
|||
wx.hideLoading() |
|||
}).catch(err => { |
|||
wx.hideLoading() |
|||
}) |
|||
}, |
|||
showColumn(canvasId, chartData) { |
|||
let ctx = wx.createCanvasContext(canvasId, this); |
|||
canvaColumn = new uCharts({ |
|||
type: 'ring', |
|||
context: ctx, |
|||
// fontSize: 11,
|
|||
background: '#FFFFFF', |
|||
pixelRatio: 1, |
|||
// animation: true,
|
|||
// categories: chartData.categories,
|
|||
series: chartData.series, |
|||
color: [ "#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ], |
|||
dataLabel: true, |
|||
width: that.data.cWidth, |
|||
height: that.data.cHeight, |
|||
legend: { |
|||
show: true, |
|||
position: "right", |
|||
float: "center", |
|||
padding: 5, |
|||
margin: 5, |
|||
fontSize: 13, |
|||
fontColor: "#666666", |
|||
lineHeight: 25, |
|||
hiddenColor: "#CECECE", |
|||
itemGap: 10 |
|||
}, |
|||
extra: { |
|||
ring: { |
|||
ringWidth: 30, |
|||
centerColor: "#FFFFFF", |
|||
activeOpacity: 0.5, |
|||
activeRadius: 10, |
|||
offsetAngle: 0, |
|||
customRadius: 0, |
|||
labelWidth: 15, |
|||
border: true, |
|||
borderWidth: 3, |
|||
borderColor: "#FFFFFF", |
|||
linearType: "none" |
|||
} |
|||
} |
|||
}); |
|||
showCalendar: function(e){ |
|||
console.log(e.currentTarget.id) |
|||
this.setData({ show: true }) |
|||
}, |
|||
touchColumn(e) { |
|||
canvaColumn.showToolTip(e, { |
|||
formatter: function (item) { |
|||
console.log(item) |
|||
return item.name + ':' + item.data |
|||
} |
|||
}) |
|||
} |
|||
onClose: function() { |
|||
this.setData({ show: false }) |
|||
}, |
|||
onSelect: function({detail}) { |
|||
var start = new Date(detail[0]) |
|||
var end = new Date(detail[1]) |
|||
var vdateString = util.formatDate(start, 'Y-M-D') + '至' + util.formatDate(end, 'Y-M-D') |
|||
this.data.form.startTime = util.formatDate(start, 'Y-M-D') + ' 00:00:00' |
|||
this.data.form.endTime = util.formatDate(end, 'Y-M-D') + ' 00:00:00' |
|||
this.setData({ show: false, vdateString }) |
|||
wx.showLoading({ title: '加载中', mask: true }) |
|||
this.fetchStatisticsInfo() |
|||
}, |
|||
// rpx2px: function(rpx) {
|
|||
// return rpx / 750 * windowWidth;
|
|||
// },
|
|||
// getServerData: function() {
|
|||
// wx.request({
|
|||
// url: 'https://www.ucharts.cn/data.json',
|
|||
// success: function (res) {
|
|||
// let Column = { categories: [], series: [] };
|
|||
// Column.categories = res.data.data.Pie.categories;
|
|||
// Column.series = res.data.data.Pie.series;
|
|||
// // 自定义标签颜色和字体大小
|
|||
// // Column.series[1].textColor = 'red';
|
|||
// // Column.series[1].textSize = 18;
|
|||
// that.showColumn("canvasColumn", Column);
|
|||
// },
|
|||
// fail: () => {
|
|||
// console.log("请点击右上角【详情】，启用不校验合法域名");
|
|||
// },
|
|||
// })
|
|||
// },
|
|||
// showColumn(canvasId, chartData) {
|
|||
// let ctx = wx.createCanvasContext(canvasId, this);
|
|||
// canvaColumn = new uCharts({
|
|||
// type: 'ring',
|
|||
// context: ctx,
|
|||
// // fontSize: 11,
|
|||
// background: '#FFFFFF',
|
|||
// pixelRatio: 1,
|
|||
// // animation: true,
|
|||
// // categories: chartData.categories,
|
|||
// series: chartData.series,
|
|||
// color: [ "#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc" ],
|
|||
// dataLabel: true,
|
|||
// width: that.data.cWidth,
|
|||
// height: that.data.cHeight,
|
|||
// legend: {
|
|||
// show: false,
|
|||
// position: "right",
|
|||
// float: "center",
|
|||
// padding: 5,
|
|||
// margin: 5,
|
|||
// fontSize: 13,
|
|||
// fontColor: "#666666",
|
|||
// lineHeight: 25,
|
|||
// hiddenColor: "#CECECE",
|
|||
// itemGap: 10
|
|||
// },
|
|||
// extra: {
|
|||
// ring: {
|
|||
// ringWidth: 30,
|
|||
// centerColor: "#FFFFFF",
|
|||
// activeOpacity: 0.5,
|
|||
// activeRadius: 10,
|
|||
// offsetAngle: 0,
|
|||
// customRadius: 0,
|
|||
// labelWidth: 15,
|
|||
// border: true,
|
|||
// borderWidth: 3,
|
|||
// borderColor: "#FFFFFF",
|
|||
// linearType: "none"
|
|||
// }
|
|||
// }
|
|||
// });
|
|||
// },
|
|||
// touchColumn(e) {
|
|||
// canvaColumn.showToolTip(e, {
|
|||
// formatter: function (item) {
|
|||
// console.log(item)
|
|||
// return item.name + ':' + item.data
|
|||
// }
|
|||
// })
|
|||
// }
|
|||
}) |
|||
@ -1,20 +1,41 @@ |
|||
<!--xtends//statics/index/index.wxml--> |
|||
<wxs module="formate" src="../../../pages/formate.wxs"></wxs> |
|||
<cu-custom bgColor="bg-white" isBack="{{true}}"> |
|||
<view slot="content">销售报表</view> |
|||
</cu-custom> |
|||
|
|||
<view class="bg-white flex flex-justify" style="height:80rpx;padding: 0rpx 32rpx" bindtap="showCalendar"> |
|||
<view class="bg-white flex flex-justify van-hairline--bottom" style="height:80rpx;padding: 0rpx 32rpx" bindtap="showCalendar"> |
|||
<view class="flex flex-center" bindtap="showCalendar"> |
|||
<view style="height:24rpx;width:6rpx;background-image: linear-gradient(180deg, #007AFF 0%, #027BFF 15%, #5AABFF 45%, #CAF4FE 100%);"></view> |
|||
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">出货信息</view> |
|||
<view class="text-black text-sg text-bold" style="margin-left: 12rpx">销售统计</view> |
|||
</view> |
|||
<view class="flex flex-center" style="padding: 2rpx 0rpx"> |
|||
<view class="text-black text-df" style="margin-right:8rpx">{{vdateString}}</view> |
|||
<van-icon name="{{show ? 'arrow-up' : 'arrow-down'}}" /> |
|||
</view> |
|||
</view> |
|||
<view class="bg-white flex" style="height:120rpx;padding-top:24rpx;"> |
|||
<view style="width:320rpx;padding-left:48rpx"> |
|||
<view class="text-xxl text-bold" style="color:#278CC8">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
|||
<view class="text-black text-sm">出货重量(吨)</view> |
|||
</view> |
|||
<view style="width:300rpx;"> |
|||
<view class="text-xxl text-bold" style="color:#278CC8">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
|||
<view class="text-black text-sm">结算重量(吨)</view> |
|||
</view> |
|||
</view> |
|||
<view class="bg-white flex" style="height:120rpx;padding-top:8rpx"> |
|||
<view style="width:320rpx;padding-left:48rpx"> |
|||
<view class="text-xxl text-bold" style="color:#278CC8">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
|||
<view class="text-black text-sm">出货车数(车)</view> |
|||
</view> |
|||
<view style="width:300rpx;"> |
|||
<view class="text-xxl text-bold" style="color:#278CC8">{{formate.formateWeight(totalInfo.totalWeight || 0)}}</view> |
|||
<view class="text-black text-sm">金额(元)</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<van-table columns="{{columns}}" height="{{height}}" data="{{data}}"></van-table> |
|||
<van-table headers="{{columns}}" data="{{ data }}" height="{{ height }}" stripe="{{ true }}"/> |
|||
|
|||
<van-calendar show="{{ show }}" type="range" row-height="50" color="#008AFF" z-index="22" min-date="{{ minDate }}" max-date="{{ maxDate }}" default-date="{{ vdate }}" title="日期范围选择" show-subtitle="{{ false }}" show-confirm="{{ false }}" bind:close="onClose" bind:confirm="onSelect"/> |
|||
<notification id="qn-notification"/> |
|||
Write
Preview
Loading…
Cancel
Save