131 lines
3.9 KiB
Vue
131 lines
3.9 KiB
Vue
<template>
|
|
<view>
|
|
<CuNavbar title="业绩数据" isBack></CuNavbar>
|
|
<view class="bg-primary bg-opacity-80 p-base">
|
|
<DateTime v-model="currentDate" @confirm="dateConfirm" />
|
|
<view class="flex items-center py-base text-white">
|
|
<view class="flex-1 text-center">
|
|
<view class="text-32rpx">当前业绩</view>
|
|
<view class="mt-10rpx">{{ countData.actual_performance }}</view>
|
|
</view>
|
|
<view>/</view>
|
|
<view class="flex-1 text-center">
|
|
<view class="text-32rpx">目标业绩</view>
|
|
<view class="mt-10rpx">{{ countData.expected_performance }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uv-sticky bgColor="#fff" zIndex="20">
|
|
<view class="">
|
|
<uv-tabs
|
|
:activeStyle="{ color: '#ee2c37' }"
|
|
:lineColor="'#ee2c37'"
|
|
:scrollable="false"
|
|
:list="tabList"
|
|
:current="currentTab"
|
|
@change="tabChange"
|
|
></uv-tabs>
|
|
</view>
|
|
</uv-sticky>
|
|
<view class="">
|
|
<view v-for="(ob, i) in showList" :key="i">
|
|
<uv-sticky bgColor="#f5f5f5" zIndex="10" offsetTop="44">
|
|
<view class="h-80rpx flex items-center px-base">
|
|
<TitleComp :title="i"></TitleComp>
|
|
</view>
|
|
</uv-sticky>
|
|
<view class="card">
|
|
<view v-for="(item, i) in ob" :key="i">
|
|
<view class="flex items-center h-84rpx">
|
|
<view class="w-110rpx text-primary"
|
|
>{{ timeFormat(`${item.month}-01`, 'mm') }}月</view
|
|
>
|
|
<view class="flex-1"
|
|
>{{ item.actual_performance }}/{{
|
|
item.expected_performance
|
|
}}</view
|
|
>
|
|
<view
|
|
:style="{
|
|
color: statusFun(item.status, 'shore_task_status', 'color'),
|
|
}"
|
|
>{{ statusFun(item.status, 'shore_task_status', 'name') }}</view
|
|
>
|
|
</view>
|
|
<uv-line v-if="i !== ob.length - 1" color="#f5f5f5"></uv-line>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import CuNavbar from '@/components/cu-navbar/index'
|
|
import TitleComp from '@/components/title-comp/index'
|
|
import DateTime from '@/components/date-time/index'
|
|
import { http } from '@/utils/request'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { timeFormat } from '@climblee/uv-ui/libs/function/index'
|
|
import { ref, reactive, computed } from 'vue'
|
|
import statusFun from '@/utils/status'
|
|
const list = ref([])
|
|
const tabList = [
|
|
{ name: '业绩目标', value: 'future' },
|
|
{ name: '完成业绩', value: 'history' },
|
|
]
|
|
const currentTab = ref(0)
|
|
const historyDate = uni.getStorageSync('historyDate')
|
|
const currentDate = ref(historyDate || Number(new Date()))
|
|
const countData = reactive({
|
|
actual_performance: 0,
|
|
expected_performance: 0,
|
|
})
|
|
const currentTabObj = computed(() => tabList[currentTab.value])
|
|
const showList = computed(() => encapsulateDataByMonth(list.value))
|
|
|
|
onLoad(() => {
|
|
getCount()
|
|
getList()
|
|
})
|
|
|
|
const dateConfirm = (e) => {
|
|
uni.setStorageSync('historyDate', e.value)
|
|
currentDate.value = e.value
|
|
getCount()
|
|
}
|
|
|
|
const getCount = async () => {
|
|
const resData = await http.get('/account/store-performance', {
|
|
params: {
|
|
month: timeFormat(currentDate.value, 'yyyy-mm'),
|
|
},
|
|
})
|
|
Object.assign(countData, resData)
|
|
}
|
|
|
|
const tabChange = (e) => {
|
|
currentTab.value = e.index
|
|
getList()
|
|
}
|
|
|
|
const getList = async () => {
|
|
const resData = await http.get('/account/store-performance-tasks', {
|
|
params: {
|
|
filter: currentTabObj.value.value,
|
|
},
|
|
})
|
|
list.value = resData
|
|
}
|
|
|
|
function encapsulateDataByMonth(data) {
|
|
return data.reduce((groupedData, item) => {
|
|
|
|
const year = timeFormat(new Date(item.month), 'yyyy')
|
|
|
|
groupedData[year] = groupedData[year] || []
|
|
groupedData[year].push(item)
|
|
return groupedData
|
|
}, {})
|
|
}
|
|
</script>
|