600 lines
14 KiB
Vue
600 lines
14 KiB
Vue
<template>
|
||
<view class="content">
|
||
<headersVue :titles="titles" style="position: static !important;">
|
||
<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
|
||
</headersVue>
|
||
<view class="ail">
|
||
<view class="time-selector">
|
||
<common-time-select v-model="range" @subsection-change="maskClick"></common-time-select>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" v-if="datas.length == 0 && id !== 6">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode="aspectFit"></image>
|
||
<text class="empty-text">暂无数据</text>
|
||
</view>
|
||
|
||
<!-- 客户来源统计 -->
|
||
<view v-if="id == 1" class="statistics-container">
|
||
<view class="statistics-grid" v-for="(item,index) in datas" :key="index">
|
||
<view class="statistic-item">
|
||
<view class="statistic-label">客户来源</view>
|
||
<view class="statistic-value">{{ item.customerSource || '' }}</view>
|
||
</view>
|
||
<view class="statistic-item">
|
||
<view class="statistic-label">车型</view>
|
||
<view class="statistic-value">{{ item.goodsTitle || '' }}</view>
|
||
</view>
|
||
<view class="statistic-item">
|
||
<view class="statistic-label">数量</view>
|
||
<view class="statistic-value">{{ item.theNum || '' }}</view>
|
||
</view>
|
||
<view class="statistic-item">
|
||
<view class="statistic-label">公示金额</view>
|
||
<view class="statistic-value">{{ item.theAmount || '' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 检测车型统计 -->
|
||
<view v-if="id == 2" class="statistics-container">
|
||
<view class="statistics-grid compact">
|
||
<view class="statistic-card" v-for="(item,index) in datas" :key="index">
|
||
<view class="statistic-label">{{ item.goodsTitle || '' }}</view>
|
||
<view class="statistic-value">{{ item.theNum || '' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 代收款 -->
|
||
<view v-if="id == 3" class="statistics-container">
|
||
<view class="statistics-grid compact">
|
||
<view class="statistic-card" v-for="(item,index) in datas" :key="index">
|
||
<view class="statistic-label">{{ item.theName || '' }}</view>
|
||
<view class="statistic-value">{{ item.theAmount || '' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 检测类型统计 -->
|
||
<view v-if="id == 4" class="statistics-container">
|
||
<view class="statistics-grid compact">
|
||
<view class="statistic-card" v-for="(item,index) in datas" :key="index">
|
||
<view class="statistic-label">{{ item.skuName || '' }}</view>
|
||
<view class="statistic-value">{{ item.orderCount || 0 }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 客户来源统计(可点击) -->
|
||
<view v-if="id == 5" class="statistics-container">
|
||
<view class="statistics-grid compact">
|
||
<view class="statistic-card clickable" v-for="(item,index) in datas" :key="index"
|
||
@click="goProjectList(item)">
|
||
<view class="statistic-label">{{ item.name || '' }}</view>
|
||
<view class="statistic-value">{{ item.theNum || 0 }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 资料统计 -->
|
||
<view v-if="id == 6" class="statistics-container">
|
||
<view class="empty-state" v-if="datas.length == 0">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode="aspectFit"></image>
|
||
<text class="empty-text">暂无数据</text>
|
||
</view>
|
||
<view class="file-list" v-else>
|
||
<view class="file-item" v-for="(item,index) in datas" :key="index">
|
||
<view class="file-info">
|
||
<view class="file-name">资料名称：{{ item.fileName || '' }}</view>
|
||
<view class="file-time">{{ type=='add' ? '新增时间' : '修改时间' }} {{formatDate(item.createTime)}}
|
||
</view>
|
||
<view class="file-type">类型：{{ item.type == 2 ?'文件' :'文件夹' }}</view>
|
||
</view>
|
||
<view v-if="item.type=='2'" class="file-action" @click="viewFile(item.filePath)">查看文件</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 来源-待收款 -->
|
||
<view v-if="id == 7" class="statistics-container">
|
||
<view class="statistics-grid compact">
|
||
<view class="statistic-card clickable" v-for="(item,index) in datas" :key="index"
|
||
@click="goProjectListByType(item)">
|
||
<view class="statistic-row">
|
||
<view class="statistic-label">来源</view>
|
||
<view class="statistic-value">{{ item.sourceName || '' }}</view>
|
||
</view>
|
||
<view class="statistic-row">
|
||
<view class="statistic-label">金额</view>
|
||
<view class="statistic-value">{{ item.pendingAmountYuan || 0 }}</view>
|
||
</view>
|
||
<view class="statistic-row">
|
||
<view class="statistic-label">台次</view>
|
||
<view class="statistic-value">{{ item.pendingCount || 0 }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '@/config'
|
||
import request from '../../utils/request';
|
||
import * as utils from '../../utils/utils';
|
||
import headersVue from "@/components/header/headers.vue";
|
||
import CommonTimeSelect from "@/components/commonTimeSelect.vue";
|
||
|
||
export default {
|
||
components: {
|
||
headersVue,
|
||
CommonTimeSelect
|
||
},
|
||
data() {
|
||
return {
|
||
id: 1,
|
||
datas: [],
|
||
remark: '未知类别',
|
||
range: ['2023-9-28', '2023-10-7'],
|
||
titles: '',
|
||
businessId: '',
|
||
type: '',
|
||
}
|
||
|
||
},
|
||
watch: {
|
||
range(newval) {
|
||
if (this.id == 1) {
|
||
this.getone()
|
||
}
|
||
if (this.id == 2) {
|
||
this.gettwo()
|
||
}
|
||
if (this.id == 3) {
|
||
this.getthree()
|
||
}
|
||
if (this.id == 4) {
|
||
this.getfour()
|
||
}
|
||
},
|
||
},
|
||
onLoad(option) {
|
||
this.gettime()
|
||
this.id = option.id
|
||
if (this.id == 1) {
|
||
this.remark = option.remark
|
||
this.getone()
|
||
this.titles = '客户来源统计'
|
||
}
|
||
if (this.id == 2) {
|
||
this.gettwo()
|
||
this.titles = '检测车型统计'
|
||
}
|
||
if (this.id == 3) {
|
||
this.getthree()
|
||
this.titles = '代收款'
|
||
}
|
||
if (this.id == 4) {
|
||
this.getfour()
|
||
this.titles = '检测类型统计'
|
||
}
|
||
if (this.id == 5) {
|
||
this.businessId = option.dataId
|
||
this.getCustomerSourceCount()
|
||
this.titles = '客户来源统计'
|
||
}
|
||
if (this.id == 6) {
|
||
this.getMonth()
|
||
this.getFileBytype()
|
||
this.type = option.type
|
||
this.titles = '资料统计'
|
||
}
|
||
if (this.id == 7) {
|
||
this.type = option.type
|
||
this.channelMoneyStaticsByBusi()
|
||
this.titles = '来源-待收款'
|
||
}
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
formatDate(time) {
|
||
return utils.formatDateTimeToMinute(time);
|
||
},
|
||
gettime() {
|
||
// 获取当前时间
|
||
var now = new Date();
|
||
|
||
// 获取年份
|
||
var year = now.getFullYear();
|
||
|
||
// 获取月份
|
||
var month = now.getMonth() + 1; // 月份从 0 开始，需要加 1
|
||
if (month < 10) {
|
||
var month = "0" + month
|
||
}
|
||
|
||
// 获取日期
|
||
var date = now.getDate();
|
||
|
||
// 格式化时间
|
||
var currentTime = year + '-' + month + '-' + date
|
||
this.range[0] = currentTime
|
||
this.range[1] = currentTime
|
||
|
||
},
|
||
getMonth() {
|
||
// 获取当前时间
|
||
const now = new Date();
|
||
|
||
// 获取年份和月份
|
||
const year = now.getFullYear();
|
||
let month = now.getMonth() + 1; // 月份从 0 开始
|
||
|
||
// 补零处理
|
||
const formatNumber = (num) => (num < 10 ? '0' + num : num);
|
||
|
||
// 本月第一天
|
||
const firstDay = `${year}-${formatNumber(month)}-01`;
|
||
|
||
// 获取本月最后一天
|
||
const lastDate = new Date(year, month, 0).getDate();
|
||
const lastDay = `${year}-${formatNumber(month)}-${formatNumber(lastDate)}`;
|
||
|
||
// 设置范围
|
||
this.range[0] = firstDay;
|
||
this.range[1] = lastDay;
|
||
},
|
||
async getone() {
|
||
let data = {
|
||
startTime: this.range[0],
|
||
endTime: this.range[1],
|
||
remark: this.remark
|
||
}
|
||
let res = await request({
|
||
url: '/partnerOwn/partner/staticsTable3Detail',
|
||
method: 'get',
|
||
params: data
|
||
})
|
||
this.datas = res.data
|
||
},
|
||
async gettwo() {
|
||
let data = {
|
||
startTime: this.range[0],
|
||
endTime: this.range[1]
|
||
}
|
||
let res = await request({
|
||
url: '/partnerOwn/partner/staticsTable4',
|
||
method: 'get',
|
||
params: data
|
||
})
|
||
this.datas = res.data
|
||
|
||
},
|
||
goProjectList(data) {
|
||
uni.navigateTo({
|
||
url: `/pages/index/staffProjectList/staffProjectList?customerSource=${data.name}&range=${encodeURIComponent(JSON.stringify(this.range))}`
|
||
})
|
||
},
|
||
goProjectListByType(data) {
|
||
uni.navigateTo({
|
||
url: `/pages/index/staffProjectList/staffProjectList?customerSource=${data.sourceName}&type=1&range=${encodeURIComponent(JSON.stringify(this.range))}`
|
||
})
|
||
},
|
||
async getthree() {
|
||
let data = {
|
||
startTime: this.range[0],
|
||
endTime: this.range[1]
|
||
}
|
||
let res = await request({
|
||
url: '/partnerOwn/partner/staticsTable5',
|
||
method: 'get',
|
||
params: data
|
||
})
|
||
this.datas = res.data
|
||
|
||
},
|
||
viewFile(filePath) {
|
||
let url = ''
|
||
//判断地址是否包含http如果包含就不拼接前缀
|
||
if (filePath.indexOf('http') === -1) {
|
||
url = this.$baseImageUrl + '/' + filePath
|
||
} else {
|
||
url = filePath
|
||
}
|
||
uni.downloadFile({
|
||
url: url,
|
||
success: (res) => { // 使用箭头函数
|
||
var filePath = res.tempFilePath;
|
||
this.isLoading = false;
|
||
|
||
uni.openDocument({
|
||
filePath: filePath,
|
||
showMenu: true,
|
||
success: (res) => {
|
||
console.log("文件打开成功");
|
||
},
|
||
fail: (err) => {
|
||
console.error("文件打开失败", err);
|
||
uni.showToast({
|
||
title: '文件打开失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.error("文件下载失败", err);
|
||
}
|
||
});
|
||
},
|
||
async getfour() {
|
||
let data = {
|
||
startTime: this.range[0],
|
||
endTime: this.range[1]
|
||
}
|
||
let res = await request({
|
||
url: '/partnerOwn/partner/queryInspectionSkuList',
|
||
method: 'get',
|
||
params: data
|
||
})
|
||
this.datas = res.data
|
||
|
||
},
|
||
async getCustomerSourceCount() {
|
||
let data = {
|
||
startTime: this.range[0],
|
||
endTime: this.range[1],
|
||
businessId: this.businessId
|
||
}
|
||
let res = await request({
|
||
url: '/partnerOwn/partner/customerSourceCount',
|
||
method: 'get',
|
||
params: data
|
||
})
|
||
this.datas = res.data
|
||
},
|
||
async getFileBytype() {
|
||
let data = {
|
||
startTime: this.range[0],
|
||
endTime: this.range[1],
|
||
servicePackageId: 'jiance'
|
||
}
|
||
let res = await request({
|
||
url: '/partnerOwn/partner/getFileByType',
|
||
method: 'get',
|
||
params: data
|
||
})
|
||
this.datas = []
|
||
if (this.type == 'add') {
|
||
this.datas = res.data.insertFile
|
||
} else {
|
||
this.datas = res.data.updateFile
|
||
}
|
||
},
|
||
async channelMoneyStaticsByBusi() {
|
||
console.log('type', this.type);
|
||
let data = {
|
||
startTime: this.range[0],
|
||
endTime: this.range[1],
|
||
busi: this.type
|
||
}
|
||
let res = await request({
|
||
url: '/partnerOwn/partner/channelMoneyStaticsByBusi',
|
||
method: 'get',
|
||
params: data
|
||
})
|
||
this.datas = res.data
|
||
},
|
||
maskClick(e) {
|
||
if (this.id == 1) {
|
||
this.remark = option.remark
|
||
this.getone()
|
||
}
|
||
if (this.id == 2) {
|
||
this.gettwo()
|
||
}
|
||
if (this.id == 3) {
|
||
this.getthree()
|
||
}
|
||
if (this.id == 4) {
|
||
this.getfour()
|
||
}
|
||
if (this.id == 5) {
|
||
this.getCustomerSourceCount()
|
||
}
|
||
if (this.id == 6) {
|
||
this.getFileBytype()
|
||
}
|
||
if (this.id == 7) {
|
||
this.channelMoneyStaticsByBusi()
|
||
}
|
||
},
|
||
getback() {
|
||
uni.navigateBack()
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
height: calc(100vh);
|
||
background-color: #F7F8FC;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.ail {
|
||
width: 100%;
|
||
background-color: #F7F8FC;
|
||
box-sizing: border-box;
|
||
padding-bottom: 20px;
|
||
min-height: calc(100vh - 100px);
|
||
}
|
||
|
||
.time-selector {
|
||
width: 90%;
|
||
margin: 10px auto;
|
||
}
|
||
|
||
/* 空状态样式 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 60rpx 0;
|
||
|
||
image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
/* 统计容器 */
|
||
.statistics-container {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
/* 统计网格布局 */
|
||
.statistics-grid {
|
||
width: 100%;
|
||
|
||
&.compact {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
gap: 20rpx;
|
||
}
|
||
}
|
||
|
||
/* 统计项样式 */
|
||
.statistic-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 30rpx 0;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
/* 统计卡片样式 */
|
||
.statistic-card {
|
||
width: calc(50% - 10rpx);
|
||
background-color: white;
|
||
border-radius: 12rpx;
|
||
padding: 30rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
box-sizing: border-box;
|
||
|
||
&.clickable {
|
||
transition: all 0.2s;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
background-color: #f8f9fa;
|
||
}
|
||
}
|
||
}
|
||
|
||
.statistic-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.statistic-label {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.statistic-value {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #0D2E8D;
|
||
line-height: 1.2;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
/* 文件列表样式 */
|
||
.file-list {
|
||
width: 100%;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
background-color: white;
|
||
border-radius: 12rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.file-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.file-name {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.file-time,
|
||
.file-type {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.file-action {
|
||
color: #3D89FC;
|
||
font-size: 26rpx;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 8rpx;
|
||
background-color: rgba(61, 137, 252, 0.1);
|
||
white-space: nowrap;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 750px) {
|
||
.statistic-card {
|
||
width: 100%;
|
||
}
|
||
|
||
.file-item {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.file-action {
|
||
margin-left: 0;
|
||
margin-top: 20rpx;
|
||
align-self: flex-end;
|
||
}
|
||
}
|
||
</style> |