业绩目标

packageA/target/index.js

@@ -0,0 +1,280 @@
+const _Http = getApp().globalData.http;
+
+Page({
+    data: {
+        pickerIndex: 0,
+        showText: "全部",
+        popupShow: false,
+        activeId: null,
+        mainActiveIndex: 0,
+        targetYear: null,
+        hrid: null,
+        departmentid: null,
+        "year": new Date().getFullYear().toString(),
+        "content": {
+            "nocache": true,
+            "year": new Date().getFullYear().toString(), //年
+            "targettype": "人员目标", //1
+            "type": 1, //
+            "where": {
+                "condition": ""
+            }
+        },
+        target: null, //目标
+        showActions: false,
+        actionSheet: "开票金额",
+        actions: [{
+            name: '开票金额',
+            value: "1"
+        }, {
+            name: '订单金额',
+            value: "2"
+        }, {
+            name: '出货金额',
+            value: "3"
+        }],
+    },
+    onLoad(options) {
+        /* 获取部门列表 */
+        _Http.basic({
+            "id": 20220922113302,
+            "content": {
+                pageSize: 9999
+            }
+        }).then(res => {
+            if (res.msg != '成功') return wx.showToast({
+                title: res.msg,
+                icon: "none"
+            })
+            let hrList = res.data.map(v => {
+                v.hr.unshift({
+                    name: v.depname + ' (包含所有下级)',
+                    hrid: v.departmentid
+                })
+                return {
+                    id: v.departmentid,
+                    text: v.depname,
+                    children: v.hr.map(value => {
+                        const text = value.position ? value.name + ` (${value.position})` : value.name
+                        return {
+                            id: value.hrid,
+                            text
+                        }
+                    })
+                }
+            })
+            this.setData({
+                hrList
+            })
+        });
+        this.getYear(true)
+
+    },
+    getYear(init = false) {
+        /* 获取年份 */
+        _Http.basic({
+            "classname": "sysmanage.develop.optiontype.optiontype",
+            "method": "optiontypeselect",
+            "content": {
+                pageSize: 999,
+                "typename": 'targetyearofpersonal',
+                "parameter": {
+                    "siteid": wx.getStorageSync('siteP').siteid
+                }
+            }
+        }).then(res => {
+            if (res.msg != '成功') return wx.showToast({
+                title: res.msg,
+                icon: "none"
+            })
+            this.setData({
+                userYearList: res.data.map(v => v.year),
+                "content.year": res.data.length ? res.data[res.data.length - 1].year : this.data.content.year,
+                year: res.data.length ? res.data[res.data.length - 1].year : this.data.year,
+                pickerIndex: res.data.length - 1
+            })
+            if (init) this.getData();
+        })
+        /* 获取年份 */
+        _Http.basic({
+            "classname": "sysmanage.develop.optiontype.optiontype",
+            "method": "optiontypeselect",
+            "content": {
+                pageSize: 999,
+                "typename": 'targetyearofproject',
+                "parameter": {
+                    "siteid": wx.getStorageSync('siteP').siteid
+                }
+            }
+        }).then(res => {
+            console.log('项目分类', res)
+            if (res.msg != '成功') return wx.showToast({
+                title: res.msg,
+                icon: "none"
+            })
+            this.setData({
+                projectYearList: res.data.map(v => v.year)
+            })
+        })
+    },
+    onShow() {
+        this.getData();
+    },
+    onClickNav({
+        detail
+    }) {
+        this.setData({
+            mainActiveIndex: detail.index
+        })
+    },
+    onClickItem({
+        detail
+    }) {
+        let hrid = null,
+            departmentid = null;
+        if (detail.text.includes('包含所有下级')) {
+            departmentid = detail.id
+        } else {
+            hrid = detail.id
+        };
+        let text = detail.text.split("(")[0];
+        this.setData({
+            hrid,
+            departmentid,
+            activeId: detail.id,
+            text
+        })
+    },
+    /* 切换分析对象 */
+    openPupop() {
+        this.setData({
+            popupShow: true
+        })
+    },
+    onClose() {
+        this.setData({
+            popupShow: false
+        })
+    },
+    toDetail() {
+        wx.navigateTo({
+            url: `./person?year=${this.data.content.year}&yearArr=${this.data.userYearList}&pickerIndex=${this.data.pickerIndex}`
+        })
+    },
+    getData(e) {
+        if (e) this.setData({
+            showText: this.data.text ? this.data.text : '全部'
+        })
+        let content = this.data.content;
+        if (this.data.hrid) content.hrid = this.data.hrid;
+        if (this.data.departmentid) content.departmentid = this.data.departmentid;
+        _Http.basic({
+            "id": 20220920133102,
+            content
+        }).then(res => {
+            this.onClose()
+            if (res.msg != '成功') return wx.showToast({
+                title: res.data,
+                icon: "none"
+            })
+            let lineData = [],
+                histogram = [];
+            res.data.month.forEach(v => {
+                lineData = lineData.concat([{
+                        label: v.month + '月',
+                        value: v.l,
+                        type: "基本目标金额"
+                    },
+                    {
+                        label: v.month + '月',
+                        value: v.h,
+                        type: "挑战目标金额"
+                    },
+                    {
+                        label: v.month + '月',
+                        value: v.a,
+                        type: "实际订单金额"
+                    }
+                ])
+                histogram = histogram.concat([{
+                        label: v.month + '月',
+                        value: v.pl,
+                        type: "基础目标实际完成率"
+                    },
+                    {
+                        label: v.month + '月',
+                        value: v.ph,
+                        type: "挑战目标实际完成率"
+                    }
+                ])
+            });
+            //绘制线图
+            this.selectComponent("#line").render(lineData);
+            this.selectComponent("#histogram").render(histogram);
+            this.setData({
+                targetYear: {
+                    yl: res.data.y1l,
+                    yh: res.data.y1h,
+                    ya: res.data.y1a,
+                }
+            });
+            if (this.data.year == this.data.content.year) {
+                const m = new Date().getMonth() + 1;
+                let s = [
+                    [1, 2, 3],
+                    [4, 5, 6],
+                    [7, 8, 9],
+                    [10, 11, 12]
+                ].findIndex(v => v.some(va => va == m)) + 1;
+                this.setData({
+                    targetSeason: {
+                        sl: res.data[`s${s}l`],
+                        sh: res.data[`s${s}h`],
+                        sa: res.data[`s${s}a`],
+                    },
+                    targetMonth: {
+                        ml: res.data[`m${m}l`],
+                        mh: res.data[`m${m}h`],
+                        ma: res.data[`m${m}a`]
+                    }
+                })
+            }
+        })
+    },
+    /* 弹出选择 */
+    select({
+        detail
+    }) {
+        if (this.data.actionSheet == detail.name) return;
+        this.setData({
+            actionSheet: detail.name,
+            "content.type": detail.value,
+            showActions: false
+        });
+        this.getData();
+    },
+    cancelActions() {
+        this.setData({
+            showActions: false
+        })
+    },
+    openActions() {
+        this.setData({
+            showActions: true
+        })
+    },
+    /* 选择年份 */
+    bindDateChange({
+        detail
+    }) {
+        let index = detail.value;
+        let year = this.data.userYearList[index];
+        if (year == detail.value) return;
+        this.setData({
+            "content.year": year,
+            pickerIndex: index
+        });
+        this.getData();
+    },
+    onShareAppMessage() {}
+})

packageA/target/index.json

@@ -0,0 +1,7 @@
+{
+    "usingComponents": {
+        "brokenLine": "./modules/brokenLine/index",
+        "histogram": "./modules/histogram/index",
+        "van-tree-select": "@vant/weapp/tree-select/index"
+    }
+}

packageA/target/index.scss

@@ -0,0 +1,155 @@
+.header {
+    height: 90rpx;
+    line-height: 90rpx;
+    width: 100vw;
+    text-align: center;
+    font-size: 28rpx;
+    font-family: PingFang SC-Bold, PingFang SC;
+    font-weight: bold;
+    color: #333333;
+    border-bottom: 1rpx solid #dddddd;
+    box-sizing: border-box;
+    position: fixed;
+    top: 0;
+}
+
+/* 过滤 */
+.filtrate {
+    display: flex;
+    width: 100vw;
+    height: 86rpx;
+    box-sizing: border-box;
+    align-items: center;
+
+    >view,
+    >picker,
+    .picker {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 28rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #333333;
+
+        .icon-daoruxialajiantou {
+            display: block;
+            color: #999999;
+            font-size: 16rpx;
+            margin-left: 10rpx;
+            transform: rotateX(180deg);
+        }
+
+    }
+}
+
+/* 内容 */
+.box {
+    width: 100vw;
+    background-color: #fff;
+    margin-bottom: 20rpx;
+    padding-top: 20rpx;
+    box-sizing: border-box;
+
+    .label {
+        display: flex;
+        height: 40rpx;
+        padding-left: 30rpx;
+        align-items: center;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #333333;
+        font-size: 28rpx;
+
+        .iconfont {
+            color: #3874F6;
+            font-size: 32rpx;
+            margin-right: 10rpx;
+        }
+    }
+
+    .content {
+        display: flex;
+        margin-top: 20rpx;
+
+        .col1 {
+            padding: 0 30rpx;
+            width: 60rpx;
+            font-size: 20rpx;
+            font-family: PingFang SC-Regular, PingFang SC;
+            color: #666666;
+
+            >view {
+                margin-top: 42rpx;
+            }
+        }
+
+        .col2 {
+            flex: 1;
+            height: 100%;
+
+            .title {
+                display: flex;
+                font-size: 20rpx;
+                font-family: PingFang SC-Regular, PingFang SC;
+                color: #666666;
+
+                >view {
+                    width: 33.33%;
+                    text-align: center;
+                }
+            }
+
+            .row {
+                display: flex;
+                height: 50rpx;
+                font-size: 36rpx;
+                font-family: PingFang SC-Bold, PingFang SC;
+                font-weight: bold;
+                color: #444444;
+                padding: 10rpx 0;
+
+                >view {
+                    width: 33.33%;
+                    text-align: center;
+
+                    text {
+                        color: #3874F6;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.footer {
+    position: fixed;
+    width: 100vw;
+    height: 130rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    bottom: 0;
+    background-color: #fff;
+    z-index: 9;
+
+    .but {
+        width: 500rpx;
+        height: 90rpx;
+        background: #3874F6;
+        border-radius: 100rpx;
+        font-size: 28rpx;
+        font-family: PingFang SC-Bold, PingFang SC;
+        font-weight: bold;
+        color: #FFFFFF;
+    }
+}
+
+.content-item-class {
+    font-size: 28rpx !important;
+    font-family: PingFang SC-Regular, PingFang SC !important;
+    color: #000000;
+}
+
+.content-active-class {
+    color: #3874F6 !important;
+}

packageA/target/index.wxml

@@ -0,0 +1,81 @@
+<!-- 过滤 -->
+<view class="filtrate">
+    <view bindtap="openPupop">{{showText}}<text class="iconfont icon-daoruxialajiantou" /></view>
+    <view catchtap="openActions">
+        {{actionSheet}}<text class="iconfont icon-daoruxialajiantou" />
+    </view>
+    <picker bindchange="bindDateChange" value="{{pickerIndex}}" range="{{active=='业绩目标'?userYearList:projectYearList}}">
+        <view class="picker"><text class="iconfont icon-niandu" style="margin-right: 10rpx; color: #999;" />{{content.year}}<text class="iconfont icon-daoruxialajiantou" /></view>
+    </picker>
+</view>
+<van-action-sheet show="{{ showActions }}" actions="{{ actions }}" bind:select='select' bind:cancel='cancelActions' cancel-text="取消" />
+<van-popup show="{{ popupShow }}" position="bottom" custom-style="height:100%;" round closeable bind:close="onClose">
+    <view class="header">选择分析对象</view>
+    <view style="height: 90rpx;" />
+    <van-tree-select items="{{ hrList }}" content-item-class='content-item-class' content-active-class='content-active-class' height='calc(100% - 170rpx)' main-active-index="{{ mainActiveIndex }}" active-id="{{ activeId }}" bind:click-nav="onClickNav" bind:click-item="onClickItem" />
+    <view class="footer" style="height: 170rpx;">
+        <van-button custom-class='but' catchtap="getData">确定</van-button>
+    </view>
+</van-popup>
+
+<view class="box">
+    <view class="label">
+        <text class="iconfont icon-a-shouyeshujugaikuangzhanshishuju" />
+        <text>目标完成情况（金额:万元）</text>
+    </view>
+    <view class="content">
+        <view class="col1">
+            <view style="margin-top: 62rpx;">年度:</view>
+            <block wx:if="{{content.year==year}}">
+                <view>本季:</view>
+                <view>本月:</view>
+            </block>
+        </view>
+        <view class="col2">
+            <view class="title">
+                <view>基本目标</view>
+                <view>挑战目标</view>
+                <view>实际完成</view>
+            </view>
+            <view class="row">
+                <view>{{targetYear.yl}}</view>
+                <view>{{targetYear.yh}}</view>
+                <view><text>{{targetYear.ya}}</text></view>
+            </view>
+            <block wx:if="{{content.year==year}}">
+                <view class="row">
+                    <view>{{targetSeason.sl}}</view>
+                    <view>{{targetSeason.sh}}</view>
+                    <view><text>{{targetSeason.sa}}</text></view>
+                </view>
+                <view class="row">
+                    <view>{{targetMonth.ml}}</view>
+                    <view>{{targetMonth.mh}}</view>
+                    <view><text>{{targetMonth.ma}}</text></view>
+                </view>
+            </block>
+        </view>
+    </view>
+    <view style="height:20rpx" />
+</view>
+<!-- 目标完成情况 -->
+<view class="box">
+    <view class="label">
+        <text class="iconfont icon-a-shouyeshujugaikuangzhanshishuju" />
+        <text>目标完成情况（金额:万元）</text>
+    </view>
+    <brokenLine id='line' />
+</view>
+<!-- 目标完成率 -->
+<view class="box">
+    <view class="label">
+        <text class="iconfont icon-a-shouyeshujugaikuangzhanshishuju" />
+        <text>目标完成率（实际相对目标的完成率）</text>
+    </view>
+    <histogram id='histogram' />
+</view>
+
+<view style="height: 130rpx;" />
+<view class="footer">
+    <van-button custom-class='but' bindtap="toDetail">{{active=='业绩目标'?'我的业绩目标':'我的项目目标'}}</van-button>
+</view>

packageA/target/modules/brokenLine/chart.js

@@ -0,0 +1,59 @@
+import {
+    Chart,
+    Axis,
+    Line,
+    Legend
+} from '@antv/f2';
+import {
+    jsx as _jsx
+} from "@antv/f2/jsx-runtime";
+import {
+    jsxs as _jsxs
+} from "@antv/f2/jsx-runtime";
+export default (({
+    data
+}) => {
+    return _jsxs(Chart, {
+        data,
+        children: [
+            _jsx(Axis, {
+                field: "label",
+                tickCount: 12,
+                style: {
+                    label: {
+                        align: 'between'
+                    },
+                }
+            }),
+            _jsx(Axis, {
+                field: "value",
+                tickCount: 5
+            }),
+            _jsx(Line, {
+                x: "label",
+                y: "value",
+                lineWidth: "4px",
+                color: "type"
+            }),
+            _jsx(Legend, {
+                position: "top",
+                style: {
+                    justifyContent: 'space-around',
+                },
+                triggerMap: {
+                    press: (items, records, legend) => {
+                        const map = {};
+                        items.forEach((item) => (map[item.name] = _.clone(item)));
+                        records.forEach((record) => {
+                            map[record.type].value = record.value;
+                        });
+                        legend.setItems(_.values(map));
+                    },
+                    pressend: (items, records, legend) => {
+                        legend.setItems(items);
+                    },
+                },
+            })
+        ]
+    });
+});

packageA/target/modules/brokenLine/index.js

@@ -0,0 +1,26 @@
+import {
+  createElement
+} from '@antv/f2';
+import Chart from './chart';
+import {
+  jsx as _jsx
+} from "@antv/f2/jsx-runtime";
+Component({
+  data: {
+    onRenderChart: () => {}
+  },
+  methods: {
+    render(data) {
+      this.setData({
+        onRenderChart: () => {
+          return this.renderChart(data);
+        }
+      });
+    },
+    renderChart(data) {
+      return createElement(Chart, {
+        data
+      });
+    }
+  }
+})

packageA/target/modules/brokenLine/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "f2": "@antv/f2-wx"
+  }
+}

packageA/target/modules/brokenLine/index.wxml

@@ -0,0 +1,3 @@
+<view class="container">
+  <f2 onRender="{{onRenderChart}}" />
+</view>

packageA/target/modules/brokenLine/index.wxss

@@ -0,0 +1,4 @@
+.container {
+  width: 100%;
+  height: 560rpx;
+}

packageA/target/modules/histogram/chart.js

@@ -0,0 +1,46 @@
+import {
+    Chart,
+    Interval,
+    Axis
+} from '@antv/f2';
+
+import {
+    jsx as _jsx
+} from "@antv/f2/jsx-runtime";
+import {
+    jsxs as _jsxs
+} from "@antv/f2/jsx-runtime";
+
+export default (({
+    data
+}) => {
+    return _jsxs(Chart, {
+        data,
+        scale: {
+            tem: {
+                tickCount: 5,
+            },
+        },
+        children: [
+            _jsx(Axis, {
+                field: "value",
+                tickCount: 12
+            }),
+            _jsx(Axis, {
+                field: "label"
+            }),
+            _jsx(Interval, {
+                x: "label",
+                y: "value",
+                color: "value",
+                adjust: "dodge",
+                style: {
+                    field: 'value',
+                    radius: (val) => {
+                        return val > 0 ? [4, 4, 0, 0] : [0, 0, 4, 4];
+                    },
+                }
+            })
+        ]
+    });
+});

packageA/target/modules/histogram/index.js

@@ -0,0 +1,26 @@
+import {
+  createElement
+} from '@antv/f2';
+import Chart from './chart';
+import {
+  jsx as _jsx
+} from "@antv/f2/jsx-runtime";
+Component({
+  data: {
+    onRenderChart: () => {}
+  },
+  methods: {
+    render(data) {
+      this.setData({
+        onRenderChart: () => {
+          return this.renderChart(data);
+        }
+      });
+    },
+    renderChart(data) {
+      return createElement(Chart, {
+        data
+      });
+    }
+  }
+})

packageA/target/modules/histogram/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "f2": "@antv/f2-wx"
+    }
+}

packageA/target/modules/histogram/index.wxml

@@ -0,0 +1,3 @@
+<view class="container">
+  <f2 onRender="{{onRenderChart}}" />
+</view>

packageA/target/modules/histogram/index.wxss

@@ -0,0 +1,4 @@
+.container {
+    width: 100%;
+    height: 560rpx;
+  }

packageA/target/person.js

@@ -0,0 +1,102 @@
+const _Http = getApp().globalData.http;
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        year: null
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        this.setData({
+            year: options.year,
+            yearArr: options.yearArr.split(","),
+            pickerIndex: options.pickerIndex
+        })
+        this.getData();
+    },
+    getData() {
+        _Http.basic({
+            "id": 20220920161302,
+            "content": {
+                "year": this.data.year,
+                "targettype": "人员目标",
+                "hrid": wx.getStorageSync('userMsg').hrid
+            },
+        }).then(res => {
+            if (res.msg != '成功') return wx.showToast({
+                title: res.data,
+                icon: "none"
+            })
+            this.setData({
+                person: res.data
+            })
+        })
+    },
+
+    /* 选择年份 */
+    bindDateChange({
+        detail
+    }) {
+        let index = detail.value;
+        if (this.data.pickerIndex == detail.value) return;
+        this.setData({
+            "year": this.data.yearArr[detail.value],
+            pickerIndex: index
+        });
+        this.getData();
+    },
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

packageA/target/person.json

@@ -0,0 +1,3 @@
+{
+    "usingComponents": {}
+}

packageA/target/person.scss

@@ -0,0 +1,110 @@
+.picker {
+    display: flex;
+    align-items: center;
+    height: 86rpx;
+    line-height: 86rpx;
+    font-size: 28rpx;
+    font-family: PingFang SC-Regular, PingFang SC;
+    color: #333333;
+    margin-left: 30rpx;
+
+    .icon-daoruxialajiantou {
+        display: block;
+        color: #999999;
+        font-size: 16rpx;
+        margin-left: 10rpx;
+        transform: rotateX(180deg);
+    }
+}
+
+.person {
+    width: 100vw;
+    height: 158rpx;
+    background-color: #ffffff;
+    box-sizing: border-box;
+    padding: 20rpx 30rpx;
+    border-bottom: 1px solid #ddd;
+
+    >view {
+        font-size: 24rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #999999;
+        line-height: 36rpx;
+    }
+
+    .title {
+        font-size: 28rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #000000;
+        margin-bottom: 15rpx;
+    }
+}
+
+/* 目标 */
+.target {
+    display: flex;
+    width: 100vw;
+    height: 124rpx;
+    background-color: #ffffff;
+    box-sizing: border-box;
+
+    >view {
+        width: 50%;
+
+        .lable {
+            font-size: 24rpx;
+            font-family: PingFang SC-Regular, PingFang SC;
+            color: #666666;
+            height: 34rpx;
+            line-height: 34rpx;
+            text-align: center;
+            margin-top: 20rpx;
+        }
+
+        .value {
+            font-size: 28rpx;
+            font-family: PingFang SC-Regular, PingFang SC;
+            color: #333333;
+            height: 40rpx;
+            line-height: 40rpx;
+            text-align: center;
+            margin-top: 10rpx;
+        }
+    }
+}
+
+.season {
+    width: 100vw;
+    height: 90rpx;
+    line-height: 90rpx;
+    background-color: #ffffff;
+    padding-left: 30rpx;
+    box-sizing: border-box;
+    font-size: 28rpx;
+    font-family: PingFang SC-Regular, PingFang SC;
+    color: #333333;
+    margin-top: 20rpx;
+}
+
+.m-target {
+    // height: 270rpx;
+    width: 100vw;
+    background-color: #ffffff;
+    border-top: 1px solid #ddd;
+    box-sizing: border-box;
+    padding-left: 30rpx;
+
+    >view {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        height: 90rpx;
+        line-height: 90rpx;
+        border-bottom: 1px solid #ddd;
+        box-sizing: border-box;
+        padding-right: 30rpx;
+        font-size: 28rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #666666;
+    }
+}

packageA/target/person.wxml

@@ -0,0 +1,120 @@
+<picker bindchange="bindDateChange" value="{{pickerIndex}}" range="{{yearArr}}">
+    <view class="picker"><text class="iconfont icon-niandu" style="margin-right: 10rpx; color: #999;" />{{year}}<text class="iconfont icon-daoruxialajiantou" /></view>
+</picker>
+
+<view class="person">
+    <view class="title">
+        人员：{{person.name}}
+    </view>
+    <view>
+        部门：{{person.depname}}
+    </view>
+    <view>
+        职位：{{person.position}}
+    </view>
+</view>
+<view class="target">
+    <view>
+        <view class="lable">年度基本目标金额(万元)</view>
+        <view class="value">{{person.y1l}}</view>
+    </view>
+    <view>
+        <view class="lable">年度挑战目标金额(万元)</view>
+        <view class="value">{{person.y1h}}</view>
+    </view>
+</view>
+
+<!-- 季度 -->
+<view class="season">
+    第一季度目标
+</view>
+<view class="target">
+    <view>
+        <view class="lable">基本目标金额(万元)</view>
+        <view class="value">{{person.s1l}}</view>
+    </view>
+    <view>
+        <view class="lable">挑战目标金额(万元)</view>
+        <view class="value">{{person.s1h}}</view>
+    </view>
+</view>
+<view class="m-target">
+    <view>1月基本目标金额(万元)<text>{{person.m1l}}</text></view>
+    <view>1月挑战目标金额(万元)<text>{{person.m1h}}</text></view>
+    <view>2月基本目标金额(万元)<text>{{person.m2l}}</text></view>
+    <view>2月挑战目标金额(万元)<text>{{person.m2h}}</text></view>
+    <view>3月基本目标金额(万元)<text>{{person.m3l}}</text></view>
+    <view>3月挑战目标金额(万元)<text>{{person.m3h}}</text></view>
+</view>
+
+<view class="season">
+    第二季度目标
+</view>
+<view class="target">
+    <view>
+        <view class="lable">基本目标金额(万元)</view>
+        <view class="value">{{person.s2l}}</view>
+    </view>
+    <view>
+        <view class="lable">挑战目标金额(万元)</view>
+        <view class="value">{{person.s2h}}</view>
+    </view>
+</view>
+<view class="m-target">
+    <view>4月基本目标金额(万元)<text>{{person.m4l}}</text></view>
+    <view>4月挑战目标金额(万元)<text>{{person.m4h}}</text></view>
+
+    <view>5月基本目标金额(万元)<text>{{person.m5l}}</text></view>
+    <view>5月挑战目标金额(万元)<text>{{person.m5h}}</text></view>
+
+    <view>6月基本目标金额(万元)<text>{{person.m6l}}</text></view>
+    <view>6月挑战目标金额(万元)<text>{{person.m6h}}</text></view>
+</view>
+
+<view class="season">
+    第三季度目标
+</view>
+<view class="target">
+    <view>
+        <view class="lable">基本目标金额(万元)</view>
+        <view class="value">{{person.s3l}}</view>
+    </view>
+    <view>
+        <view class="lable">挑战目标金额(万元)</view>
+        <view class="value">{{person.s3h}}</view>
+    </view>
+</view>
+<view class="m-target">
+    <view>7月基本目标金额(万元)<text>{{person.m7l}}</text></view>
+    <view>7月挑战目标金额(万元)<text>{{person.m7h}}</text></view>
+
+    <view>8月基本目标金额(万元)<text>{{person.m8l}}</text></view>
+    <view>8月挑战目标金额(万元)<text>{{person.m8h}}</text></view>
+
+    <view>9月基本目标金额(万元)<text>{{person.m9l}}</text></view>
+    <view>9月挑战目标金额(万元)<text>{{person.m9h}}</text></view>
+</view>
+
+<view class="season">
+    第四季度目标
+</view>
+<view class="target">
+    <view>
+        <view class="lable">基本目标金额(万元)</view>
+        <view class="value">{{person.s4l}}</view>
+    </view>
+    <view>
+        <view class="lable">挑战目标金额(万元)</view>
+        <view class="value">{{person.s4h}}</view>
+    </view>
+</view>
+<view class="m-target">
+    <view>10月基本目标金额(万元)<text>{{person.m10l}}</text></view>
+    <view>10月挑战目标金额(万元)<text>{{person.m10h}}</text></view>
+
+    <view>11月基本目标金额(万元)<text>{{person.m11l}}</text></view>
+    <view>11月挑战目标金额(万元)<text>{{person.m11h}}</text></view>
+
+    <view>12月基本目标金额(万元)<text>{{person.m12l}}</text></view>
+    <view>12月挑战目标金额(万元)<text>{{person.m12h}}</text></view>
+</view>