<!-- <template>
<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
<ProjectPayment></ProjectPayment>
<ProjectInvoice></ProjectInvoice>
<ProjectBid></ProjectBid>
<ProjectFund></ProjectFund>
</div>
</template>
<script setup>
import { reactive, ref } from "vue"
import ProjectPayment from "./components/ProjectPayment.vue"
import ProjectInvoice from "./components/ProjectInvoice.vue"
import ProjectBid from "./components/ProjectBid.vue"
import ProjectFund from "./components/ProjectFund.vue"
</script> -->
<template>
<div class="workbench">
<el-card shadow="never" class=" !border-none">
<div class="mb-6 flex justify-between items-center">
<span class="text-2xl">概况</span>
<div class="flex items-center text-sm">
<span class="mr-4">时间筛选: </span>
<el-date-picker v-model="startEndTime2" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" unlink-panels @change="getData2" />
<el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-1/5 flex mb-6" v-for="(item, index) in basicList" :key="index">
<div class="mr-2">
<div class="rounded-full p-2" :style="{ 'background-color': colorList[index % 8] }">
<iconfont :iconName="item.icon" white className="text-6xl" />
</div>
</div>
<div>
<div class="text-info">{{ item.name }}</div>
<div class="text-6xl">{{ item.num }}</div>
<!-- <div class="text-info">环比增长: <span :class="item.percent > 0 ? 'text-success' : 'text-danger'">{{
item.percent }}%</span></div> -->
</div>
</div>
</div>
</el-card>
<el-card shadow="never" class="mt-4 !border-none">
<div>
<div class="mb-6 flex justify-between items-center">
<span class="text-2xl">趋势</span>
<!-- <div class="flex items-center text-sm">
<span class="mr-4">时间筛选: </span>
<el-date-picker v-model="startEndTime2" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" unlink-panels @change="getData2" />
<el-button type="primary" class="ml-4" @click="getData2">查询</el-button>
</div> -->
</div>
<v-charts style="height: 400px" :option="visitorOption" :autoresize="true" />
</div>
</el-card>
</div>
</template>
<script lang="ts" setup name="statistics_user">
import { apistatisfinancialStatistics } from "@/api/statistics"
import moment from 'moment'
import vCharts from 'vue-echarts'
// 表单数据
const visitorOption: any = reactive({
xAxis: {
type: 'category',
data: [0],
axisLabel: {
rotate: 45,
color: '#333'
}
},
yAxis: {
type: 'value',
position: 'left',
axisLabel: {
formatter: '{value}'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
data: ['访问量']
},
itemStyle: {
// 点的颜色。
color: 'red'
},
tooltip: {
trigger: 'axis'
},
series: [
{
name: '访问量',
data: [0],
type: 'line',
smooth: true
}
]
})
// 颜色
const colorList = ['#5DB1FF', '#4CD384', '#FFC46A', '#CAA5F1', '#FFC46A', '#4CD384', '#5DB1FF', '#CAA5F1']
// 商品浏览量, 商品访客数, 加购件数, 下单件数, 支付件数, 支付金额, 成本金额, 退款金额, 退款件数, 访客-支付转化率
const basicList = reactive([
// {
// name: '访客数',
// type: 'people',
// icon: 'RectangleCopy',
// num: 0,
// percent: 0
// },
// {
// name: '浏览量',
// type: 'browse',
// icon: 'RectangleCopy49',
// num: 0,
// percent: 0
// },
// {
// name: '新增用户数',
// type: 'newUser',
// icon: 'RectangleCopy53',
// num: 0,
// percent: 0
// },
// {
// name: '成交用户数',
// type: 'payPeople',
// icon: 'RectangleCopy5',
// num: 0,
// percent: 0
// },
// {
// name: '访客-支付转换率',
// type: 'payPercent',
// icon: 'RectangleCopy4',
// num: 0,
// percent: 0
// },
// {
// name: '激活付费会员数',
// type: 'payUser',
// icon: 'RectangleCopy7',
// num: 0,
// percent: 0
// },
// {
// name: '充值用户数',
// type: 'rechargePeople',
// icon: 'RectangleCopy59',
// num: 0,
// percent: 0
// },
// {
// name: '客单价',
// type: 'payPrice',
// icon: 'RectangleCopy15',
// num: 0,
// percent: 0
// },
// {
// name: '累计用户',
// type: 'cumulativeUser',
// icon: 'RectangleCopy54',
// num: 0,
// percent: 0
// },
// {
// name: '累计付费会员数',
// type: 'cumulativePayUser',
// icon: 'RectangleCopy7',
// num: 0,
// percent: 0
// },
// {
// name: '累计充值用户数',
// type: 'cumulativeRechargePeople',
// icon: 'RectangleCopy6',
// num: 0,
// percent: 0
// },
// {
// name: '累计成交用户数',
// type: 'cumulativePayPeople',
// icon: 'RectangleCopy9',
// num: 0,
// percent: 0
// }
])
function getLastMonthRange() {
// 获取今天的日期
let today = new Date();
// 获取上个月的日期
let lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
// 格式化日期为 "年-月-日"
let formatDateString = (date) => {
let year = date.getFullYear();
let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1，并且补0
let day = String(date.getDate()).padStart(2, '0'); // 补0
return `${year}-${month}-${day}`;
};
// 格式化上个月和今天的日期
let lastMonthFormatted = formatDateString(lastMonth);
let todayFormatted = formatDateString(today);
// 返回结果数组
return [lastMonthFormatted, todayFormatted];
}
const startEndTime = ref([new Date(), new Date()]);
const startEndTime2 = ref(getLastMonthRange());
const getData2 = () => {
let date = '';
if (startEndTime2.value[0] && startEndTime2.value[1]) date = moment(startEndTime2.value[0]).format('YYYY/MM/DD') + '-' + moment(startEndTime2.value[1]).format('YYYY/MM/DD');
apistatisfinancialStatistics({
date: date
}).then(res => {
// 清空echarts 数据
visitorOption.xAxis.data = []
visitorOption.series = []
console.log(res)
visitorOption.xAxis.data = Object.keys(res[0].value)
res.forEach((item, index) => {
visitorOption.series[index] = {
type: 'line',
smooth: true,
data: Object.values(item.value),
name: item.title
}
basicList[index] = {
name: item.title,
type: 'people',
icon: 'RectangleCopy',
num: item.total_money,
}
})
})
}
onMounted(() => {
getData2()
})
</script>
<style lang="scss" scoped></style>