czg_team/new-cashier
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

源文件

Browse Source
This commit is contained in:
gyq
2024-05-23 14:39:33 +08:00
commit a1128dd791
2997 changed files with 500069 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

692
jeepay-ui-merchant/src/views/dashboard/Analysis.vue Normal file
View File

@@ -0,0 +1,692 @@
<template>
<div id="chart-card">
<div class="amount">
<div style="background-color: rgb(85, 85, 85)">
<a-skeleton :loading="skeletonIsShow" active :paragraph="{ rows: 6 }" />
<div v-show="!skeletonIsShow">
<div
v-if="$access('ENT_MCH_MAIN_PAY_DAY_COUNT') && !$hasMemberEnt()"
class="amount-top"
>
<div class="amount-date">
<div
:class="{ 'amount-date-active': amountDate === 'today' }"
@click="amountDateHandle('today')"
>
今日交易
</div>
<div
:class="{ 'amount-date-active': amountDate === 'yesterday' }"
@click="amountDateHandle('yesterday')"
>
昨日交易
</div>
</div>
<p>成交金额(元)</p>
<p style="font-size: 50px; margin-bottom: 35px; color: #fff">
{{ payAmountDataAll.payAmount }}
</p>
<div class="amount-list">
<div>
<p>成交笔数</p>
<span>{{ payAmountDataAll.payCount }}</span>
</div>
<div>
<p>退款金额(元)</p>
<span>{{ payAmountDataAll.refundAmount }}</span>
</div>
<div>
<p>退款笔数</p>
<span>{{ payAmountDataAll.refundCount }}</span>
</div>
</div>
</div>
<div
v-if="$access('ENT_MCH_MAIN_PAY_DAY_COUNT') && $hasMemberEnt()"
class="amount-top"
>
<div class="amount-date">
<div
:class="{ 'amount-date-active': amountDate === 'today' }"
@click="amountDateHandle('today')"
>
今日交易
</div>
<div
:class="{ 'amount-date-active': amountDate === 'yesterday' }"
@click="amountDateHandle('yesterday')"
>
昨日交易
</div>
</div>
<p style="margin-bottom: 0">成交金额(元)</p>
<a-tooltip placement="top" color="#fff">
<template #title>
<p style="font-size: 20px; margin-bottom: 0; color: #000">
{{ payAmountDataAll.payAmount }}
</p>
</template>
<p
style="
font-size: 40px;
margin-bottom: 0;
color: #fff;
width: max-content;
"
>
{{ amountHandle(payAmountDataAll.payAmount)
}}<span
v-if="payAmountDataAll.payAmount >= 100000000"
style="
font-size: 20px;
font-weight: 600;
margin-left: 5px;
vertical-align: middle;
"
>亿</span
><span
v-else-if="payAmountDataAll.payAmount >= 10000000"
style="
font-size: 20px;
font-weight: 600;
margin-left: 5px;
vertical-align: middle;
"
>万</span
>
</p>
</a-tooltip>
<div class="amount-list">
<div>
<p>成交笔数</p>
<span>{{ payAmountDataAll.payCount }}</span>
</div>
<div>
<p>退款金额(元)</p>
<span>{{ payAmountDataAll.refundAmount }}</span>
</div>
<div>
<p>退款笔数</p>
<span>{{ payAmountDataAll.refundCount }}</span>
</div>
<div>
<p>会员充值(元)</p>
<span>{{ (memberData.payAmount / 100).toFixed(2) }}</span>
</div>
<div>
<p>会员消费(元)</p>
<span>{{
(Math.abs(memberData.changeAmount) / 100).toFixed(2)
}}</span>
</div>
<div>
<p>会员消费笔数</p>
<span>{{ memberData.changeCount }}</span>
</div>
</div>
</div>
</div>
<div class="amount-line" />
<a-skeleton v-show="skeletonIsShow" active :paragraph="{ rows: 6 }" />
<div v-show="!skeletonIsShow" v-if="$access('ENT_MCH_MAIN_PAY_TREND_COUNT')" class="amount-bottom" style="width: 100%">
<div class="echart-title">
<div style="display: flex;">
<b style="color: #fff">趋势</b>
<a-tooltip class="tooltip">
<template #title>近期成交金额</template>
<i class="bi bi-info-circle" style="color:rgba(255, 255, 255, 0.6)" />
</a-tooltip>
</div>
<a-select v-model:value="amountSelectDate" class="date amount-date" placeholder="近30天" @change="amountSelectHandle">
<a-select-option value="30">近30天</a-select-option>
<a-select-option value="7">近7天</a-select-option>
</a-select>
</div>
<div v-show="!payAmountEmpty" id="pay-amount" style="width: 100%;" />
<a-empty v-show="payAmountEmpty" :image="emptyImg" />
</div>
</div>
</div>
<div class="personal">
<a-skeleton :loading="skeletonIsShow" active :paragraph="{ rows: 5 }" />
<div v-show="!skeletonIsShow">
<div class="before-msg">
<p>
<span>预留信息：</span
><a style="color: #2691ff; margin-right: 5px" @click="setMsg">{{
safeWord ? safeWord : "未设置"
}}</a>
<a-tooltip
placement="right"
title="此信息为你在本站预留的个性信息，用以鉴别假冒、钓鱼网站。如未看到此信息，请立即停止访问并修改密码。如需修改内容请前往个人中心"
>
<question-circle-outlined />
</a-tooltip>
</p>
<!-- <span>商户简称：</span><span>{{ shortName?shortName:'计全科技商户' }}</span> -->
</div>
<div class="personal-line" />
<div class="latest-post">
<div class="title">
<span>最新公告</span>
<a style="color: #2691ff" @click="toList"
>更多
<right-outlined :style="{ fontSize: '12px', color: '#2691ff' }"
/></a>
</div>
<div class="post-list">
<div
v-for="(item, index) in notice.noticeList"
:key="index"
class="post-item"
@click="toDetail(item.articleId)"
>
<span class="title">{{ item.title }}</span>
<span
>{{ item ? item.createdAt.slice(0, 10) : "" }}
<right-outlined :style="{ fontSize: '12px', color: '#707070' }"
/></span>
</div>
</div>
</div>
<div class="personal-line" />
<div class="quick-start">
<p>快速开始</p>
<ul>
<li v-for="menu in quickMenuList" :key="menu.entId">
<router-link :to="menu!.menuUri">{{ menu.entName }}</router-link>
</li>
</ul>
</div>
</div>
</div>
<div class="method">
<a-skeleton :loading="skeletonIsShow" active :paragraph="{ rows: 5 }" />
<div
v-show="!skeletonIsShow"
v-if="$access('ENT_MCH_MAIN_PAY_TYPE_COUNT')"
>
<div class="echart-title">
<b>支付方式</b>
<JeepayDateRangePicker
v-model:value="payMethodDate"
class="date"
customDateRangeType="date"
:allTimeIsShow="false"
@update:value="payMethodDateHandle"
/>
</div>
<div
v-show="!payMethodEmpty"
id="pay-method"
style="width: 100%; height: 100%"
/>
<a-empty v-show="payMethodEmpty" :image="emptyImg" />
</div>
</div>
<div class="pay-statistics">
<a-skeleton :loading="skeletonIsShow" active :paragraph="{ rows: 5 }" />
<div v-show="!skeletonIsShow" v-if="$access('ENT_MCH_MAIN_PAY_COUNT')">
<b>交易统计</b>
<JeepayDateRangePicker
v-model:value="payStatisticsDate"
class="date"
customDateRangeType="date"
:statisticalTimeIsShow="true"
@update:value="statisticsHandle"
/>
<div
v-show="!payStatisticsEmpty"
id="pay-statistics"
style="width: 100%; height: 100%"
/>
<a-empty v-show="payStatisticsEmpty" :image="emptyImg" />
</div>
</div>
</div>
<JeepayNoticeViewer ref="noticeViewer" />
</template>
<script lang="ts" setup>
import {
nextTick,
ref,
computed,
watch,
getCurrentInstance,
onMounted,
reactive,
} from "vue";
import * as echarts from "echarts"; // 引入图标组件
import { useUserStore } from "@/store/modules/user";
import { useRouter, useRoute } from "vue-router";
import {
$getPayTrendCount,
$getNumCount,
$getPayCount,
$getPayType,
$getUserInfo,
API_URL_NOTICELIST,
req,
$memberInfoCount,
} from "@/api/manage";
import {
pieEcharts,
statisticsEcharts,
amountEcharts,
} from "./echartsConfig.js"; // 图标配置项组件
import { Empty } from "ant-design-vue"; // 缺省图
const { $infoBox, $access, $hasMemberEnt } =
getCurrentInstance()!.appContext.config.globalProperties;
console.log("hasMemberEnt", $hasMemberEnt());
const userStore = useUserStore();
// 获取到路由对象
const router = useRouter(); //这是全部路由
const safeWord = ref(); //预留信息
const shortName = ref(); //简称
const memberData: any = reactive({});
const noticeViewer = ref();
const notice = reactive({
noticeList: [] as any,
});
//公告列表页
const toList = () => {
router.push({
path: "/notices",
});
};
//设置信息
const setMsg = () => {
router.push({
path: "/currentUserinfo",
query: { type: "msg" },
});
};
onMounted(() => {
$getUserInfo().then((res) => {
safeWord.value = res.safeWord;
shortName.value = res.shortName;
});
reqTableDataFunc({
pageSize: 3,
pageNumber: 1,
}).then((res) => {
console.log(res);
notice.noticeList = res.records;
});
});
function reqTableDataFunc(params: any) {
// 请求table接口数据
return req.list(
API_URL_NOTICELIST,
Object.assign(params, { articleType: 1 })
);
}
// 切换今日昨日金额数据
let amountDate = ref("today"); // 默认为今日
const amountDateHandle = (param) => {
amountDate.value = param;
numCountHandle(); // 切换后调用请求
if ($hasMemberEnt()) {
getMemberData();
}
};
let payAmountDataAll: any = ref({}); // 成交金额总数据（今天和昨天）
const payAmountGetDateData = (res) => {
//数据赋值
// 分转元显示
Object.keys(res.dayCount).forEach((item) => {
if (item == "payCount" || item == "refundCount") {
return;
} else {
res.dayCount[item] = (res.dayCount[item] / 100).toFixed(2);
}
});
payAmountDataAll.value = res.dayCount;
};
// 成交金额请求数据
const numCountHandle = () => {
$getNumCount({ queryDateRange: amountDate.value }).then((res) => {
payAmountGetDateData(res);
});
};
let payMethod; // 支付方式饼图
let payMethodEmpty = ref(false); // 支付方式饼图缺省图
let payMethodDate = ref("near2now_30"); // 饼图日期查询
// 当支付方式自定义日期格式中不包含N ，则代表选择了正确的日期格式
const payMethodDateHandle = () => {
let flag = payMethodDate.value.indexOf("N") === -1;
if (payMethodDate.value && flag) {
payMethodHandle(payMethodDate.value);
}
};
// 饼图数据赋值
const payMethodGetData = (res) => {
let payTypeData = [];
res[0].length === 0
? (payMethodEmpty.value = true)
: (payMethodEmpty.value = false);
res[0].forEach((item) => {
payTypeData.push({
value: (item.totalSuccAmt / 100).toFixed(2), // 分转元
name: item.name,
} as never);
});
pieEcharts.series[0].data = payTypeData; // 饼图数据赋值
nextTick(() => {
payMethod = echarts.init(
document.getElementById("pay-method") as HTMLElement
);
payMethod.setOption(pieEcharts); // 数据填充
});
};
// 饼图请求数据
const payMethodHandle = (data) => {
$getPayType(data)
.then((res) => {
payMethodGetData(res);
})
.catch((err) => {
console.log(err);
});
};
let payStatistics; // 交易统计折线图
let payStatisticsDate = ref("near2now_30"); // 交易统计折线图日期查询
let payStatisticsEmpty = ref(false); // 交易统计折线图缺省图
const statisticsHandle = () => {
let flag = payStatisticsDate.value.indexOf("N") === -1;
if (payStatisticsDate.value && flag) {
payStatisticsHandle(payStatisticsDate.value);
}
};
// 交易统计折线图数据赋值
const payStatisticsGetData = (res) => {
Object.keys(res).length === 0
? (payStatisticsEmpty.value = true)
: (payStatisticsEmpty.value = false);
statisticsEcharts.xAxis.data = res.resDateArr; // x轴日期
let payAmountArr = [];
res.resPayAmountArr.forEach((item) =>
payAmountArr.push((item / 100).toFixed(2) as never)
); // 成交金额分转元
statisticsEcharts.series[0].data = payAmountArr; // 成交金额
statisticsEcharts.series[1].data = res.resPayCountArr; // 订单笔数
let refAmountArr = [];
res.resRefAmountArr.forEach((item) =>
refAmountArr.push((item / 100).toFixed(2) as never)
); // 退款金额分转元
statisticsEcharts.series[2].data = refAmountArr; // 退款金额
nextTick(() => {
payStatistics = echarts.init(
document.getElementById("pay-statistics") as HTMLElement
);
payStatistics.setOption(statisticsEcharts); // 数据填充
});
};
// 交易统计折线图请求数据
const payStatisticsHandle = (data) => {
$getPayCount(data)
.then((res) => {
payStatisticsGetData(res);
})
.catch((err) => {
console.log(err);
});
};
// 今日金额折线图日期选择
const amountSelectHandle = (value: string) => {
payAmountHandle(value);
};
let payAmount; // 金额板块折线图
let payAmountEmpty = ref(false); // 金额折线图缺省图是否展示
let amountSelectDate = ref("近30天"); // 交易统计折线图日期查询
// 成交金额 数据赋值
const payAmountGetData = (res) => {
amountEcharts.xAxis.data = res.dateList || ["01-03", "01-04", "01-05", "01-06", "01-07", "01-08", "01-09", "01-10", "01-11", "01-12", "01-13", "01-14", "01-15", "01-16", "01-17", "01-18", "01-19", "01-20", "01-21", "01-22", "01-23", "01-24", "01-25", "01-26", "01-27", "01-28", "01-29", "01-30", "01-31",'02-01'];
res.dateList.length === 0
? (payAmountEmpty.value = true)
: (payAmountEmpty.value = false);
let payAmountList = [];
res.payAmountList.forEach((item) => {
payAmountList.push((item / 100).toFixed(2) as never);
});
amountEcharts.series[0].data = payAmountList || ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"]; // 数据赋值
console.log(payAmountList);
nextTick(() => {
payAmount = echarts.init(
document.getElementById("pay-amount") as HTMLElement
);
payAmount.setOption(amountEcharts);
});
};
// 金额板块折线图请求数据
const payAmountHandle = (date) => {
$getPayTrendCount(date)
.then((res) => {
payAmountGetData(res);
})
.catch((err) => {
console.log(err);
});
};
// 请求会员统计数据
const getMemberData = () => {
$memberInfoCount({ queryDateRange: amountDate.value }).then((res) => {
Object.assign(memberData, res);
});
};
if ($hasMemberEnt()) {
getMemberData();
}
// 缺省图片的样式
const emptyImg = Empty.PRESENTED_IMAGE_SIMPLE;
// 骨架屏是否展示
let skeletonIsShow = ref(true);
// 首页骨架屏隐藏采用 promise all,只有本页面5个请求全部获得数据才会隐藏， 请求顺序依次为：成交金额， 趋势折线图， 支付方式， 交易统计
Promise.all([
$getNumCount({ queryDateRange: amountDate.value }),
$getPayTrendCount(30),
$getPayType(payMethodDate.value),
$getPayCount(payStatisticsDate.value),
])
.then((res) => {
skeletonIsShow.value = false; // 骨架屏取消
payAmountGetDateData(res[0]); // 成交金额
console.log(res[1], "res[1]");
payAmountGetData(res[1]); // 趋势折线图
payMethodGetData(res[2]); // 饼图
payStatisticsGetData(res[3]); // 交易统计
})
.catch((error) => {
console.log(error);
});
// 所有图表根据屏幕大小 图表自适应
window.addEventListener("resize", () => {
payMethod.resize();
payStatistics.resize();
payAmount.resize();
});
// 问候语句
const nextAge = computed(() => {
const time = new Date();
const hour = time.getHours();
return hour < 9
? "早上好"
: hour <= 11
? "上午好"
: hour <= 13
? "中午好"
: hour < 20
? "下午好"
: "晚上好";
});
// 快速菜单集合
const quickMenuList: any = computed(() => {
const result = [];
const putResult = function (item) {
for (let i = 0; i < item.length; i++) {
if (item[i].menuUri && item[i].quickJump === 1) {
result.push(item[i] as never);
}
if (item[i].children) {
putResult(item[i].children);
}
}
};
putResult(userStore.userInfo["allMenuRouteTree"]);
return result;
});
// layout传过来的值，用于监听菜单的收起与展开，此时折线图板块应跟随宽度进行变化
const props = defineProps({
proLayoutObject: { type: Object, default: () => {} },
});
// 因为菜单的收起与展开有一定的过渡时间，所以采用了定时器
watch(
() => props.proLayoutObject.collapsed,
() => {
setTimeout(() => {
payStatistics.resize();
payAmount.resize();
}, 350);
}
);
//公告详情
function toDetail(articleId) {
noticeViewer.value.showDrawer(articleId);
}
// 金额处理 超过1000万时拼接万 超过亿时 拼接亿
const amountHandle = (amount) => {
if (amount >= 100000000) {
return parseFloat((amount / 100000000).toFixed(2));
} else if (amount >= 10000000) {
return parseFloat((amount / 10000).toFixed(2));
} else {
return amount;
}
};
</script>
<style lang="less" scoped>
@import "./index.less"; // 响应式布局
// 成交金额折线图 日期选择器样式
// /deep/ .ant-select-selector {
// background: rgba(255, 255, 255, 0.05) !important;
// color: rgba(255, 255, 255, 0.7) !important;
// }
// /deep/ .ant-select-arrow {
// color: rgba(255, 255, 255, 0.7) !important;
// }
// 个人信息页标题
.personal-title {
display: flex;
img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
}
& > div {
height: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
p {
font-size: 15px;
font-weight: 600;
margin: 0;
}
}
}
// 个人信息 快速开始
.quick-start {
p {
margin: 0;
font-weight: bold;
font-size: 14px;
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 20px;
margin-top: 20px;
}
}
// 通用图表标题
.echart-title {
display: flex;
justify-content: space-between;
align-items: center;
b {
font-size: 14px;
font-weight: 600;
margin-right: 10px;
}
.date {
width: 215px;
flex-shrink: unset;
}
}
// 交易统计图表标题
.pay-statistics {
& > div {
position: relative;
& > b,
& > .date {
position: absolute;
top: 30px;
z-index: 9;
}
& > b {
font-size: 14px;
font-weight: 600;
margin-right: 10px;
top: 36px;
}
& > .date {
width: 215px;
right: 30px;
}
}
}
.tooltip {
&:hover {
cursor: pointer;
}
}
// 缺省图的样式
/deep/ .ant-empty-normal {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
#chart-card .amount > div .amount-line[data-v-5391d79e] {
border-left: none !important;
}
</style>

495
jeepay-ui-merchant/src/views/dashboard/OrderLxLargeScreen.vue Normal file
View File

@@ -0,0 +1,495 @@
<template>
<!-- 交易路由概况-->
<div id="chart-card">
<div class="amount">
<div style="background-color: rgb(85, 85, 85);">
<a-skeleton :loading="skeletonIsShow" active :paragraph="{ rows: 6 }" />
<div v-show="!skeletonIsShow" v-if="$access('ENT_C_MAIN_PAY_DAY_COUNT')" class="amount-top">
<div class="amount-date">
<div :class="{'amount-date-active': amountDate === 'today'}" @click="amountDateHandle('today')">今日交易</div>
<div :class="{'amount-date-active': amountDate === 'yesterday'}" @click="amountDateHandle('yesterday')">昨日交易</div>
</div>
<p>成交金额(元)</p>
<a-tooltip placement="top" color="#fff">
<template #title>
<p style="font-size: 20px; margin-bottom: 0;color:#000">{{ payAmountDataAll.payAmount }}</p>
</template>
<p style="font-size: 40px;margin-bottom: 35px;color:#fff;width: max-content;">
{{ amountHandle(payAmountDataAll.payAmount) }}<span v-if="payAmountDataAll.payAmount >=100000000" style="font-size: 20px;font-weight: 600;margin-left: 5px;vertical-align: middle;">亿</span><span v-else-if="payAmountDataAll.payAmount >=10000000" style="font-size: 20px;font-weight: 600;margin-left: 5px;vertical-align: middle;">万</span>
</p>
</a-tooltip>
<div class="amount-list">
<div><p>成交笔数</p><span>{{ payAmountDataAll.payCount }}</span></div>
<div><p>手续费金额(元)</p><span>{{ payAmountDataAll.refundAmount }}</span></div>
<!-- <div><p>退款笔数</p><span>{{ payAmountDataAll.refundCount }}</span></div>-->
</div>
</div>
<div class="amount-line" />
<a-skeleton v-show="skeletonIsShow" active :paragraph="{ rows: 6 }" />
<div v-show="!skeletonIsShow" v-if="$access('ENT_C_MAIN_PAY_TREND_COUNT')" class="amount-bottom" style="width: 100%">
<div class="echart-title">
<div style="display: flex;">
<b style="color: #fff">趋势</b>
<a-tooltip class="tooltip">
<template #title>近期成交金额</template>
<i class="bi bi-info-circle" style="color:rgba(255, 255, 255, 0.6)" />
</a-tooltip>
</div>
<!-- -->
<a-select id="selet-date" v-model:value="amountSelectDate" class="date amount-date" placeholder="近30天" @change="amountSelectHandle">
<a-select-option value="30">近30天</a-select-option>
<a-select-option value="7">近7天</a-select-option>
</a-select>
</div>
<div v-show="!payAmountEmpty" id="pay-amount" style="width: 100%;" />
<a-empty v-show="payAmountEmpty" :image="emptyImg" />
</div>
</div>
</div>
<div class="personal">
<div class="h_opt_p_r">
<div class="h_title_box" style="cursor: pointer;"><span class="h_tit_name">账户概况</span></div>
<div class="h_opt_p_r_l h_opt_p_r_l_1">
<div>总交易金额(元)</div>
<div class="ant-statistic">
<div class="ant-statistic-content" style="color: rgb(255, 255, 255); font-size: 20px;"><span
class="ant-statistic-content-value"><span
class="ant-statistic-content-value-int">6,261</span><span
class="ant-statistic-content-value-decimal">.67</span></span></div>
</div>
</div>
<div class="h_opt_p_r_l h_opt_p_r_l_2">
<div>手续费余额(元)</div>
<div class="ant-statistic">
<div class="ant-statistic-content" style="color: rgb(255, 255, 255); font-size: 20px;"><span
class="ant-statistic-content-value"><span
class="ant-statistic-content-value-int">6,261</span><span
class="ant-statistic-content-value-decimal">.67</span></span></div>
</div>
</div>
<div class="h_opt_p_r_l h_opt_p_r_l_3">
<div>支付宝费率(%)：0.2</div>
<div>银行卡费率(%)：0.3</div>
<!-- <div class="ant-statistic">-->
<!-- <div class="ant-statistic-content" style="color: rgb(255, 255, 255); font-size: 20px;"><span-->
<!-- class="ant-statistic-content-value"><span class="ant-statistic-content-value-int">0</span><span-->
<!-- class="ant-statistic-content-value-decimal">.00</span></span></div>-->
<!-- </div>-->
</div>
<div>
<button type="button" class="ant-btn ant-btn-primary ant-btn-lg" style="margin-right: 3%;">
<span>充 值</span></button>
<button type="button" class="ant-btn ant-btn-default ant-btn-lg" style="margin-right: 3%;">
<span>结 算</span></button>
<!-- <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><span>计算器</span></button>-->
</div>
</div>
</div>
<div class="method">
<a-skeleton :loading="skeletonIsShow" active :paragraph="{ rows: 6 }" />
<div v-show="!skeletonIsShow" v-if="$access('ENT_C_MAIN_PAY_TYPE_COUNT')">
<div class="echart-title">
<b>支付方式</b>
<JeepayDateRangePicker v-model:value="payMethodDate" class="date" customDateRangeType="date" :allTimeIsShow="false" @update:value="payMethodDateHandle" />
</div>
<div v-show="!payMethodEmpty" id="pay-method" style="width: 100%;height: 100%" />
<a-empty v-show="payMethodEmpty" :image="emptyImg" />
</div>
</div>
<div class="pay-statistics">
<a-skeleton :loading="skeletonIsShow" active :paragraph="{ rows: 6 }" />
<div v-show="!skeletonIsShow" v-if="$access('ENT_C_MAIN_PAY_COUNT')">
<b>交易统计</b>
<!-- <JeepayDateRangePicker v-model:value="payStatisticsDate" class="date" customDateRangeType="date" :statisticalTimeIsShow="true" @update:value="statisticsHandle" />-->
<div v-show="!payStatisticsEmpty" id="pay-statistics" style="width: 100%;height: 100%" />
<a-empty v-show="payStatisticsEmpty" :image="emptyImg" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { nextTick, ref, computed, onMounted,getCurrentInstance } from 'vue'
import * as echarts from 'echarts' // 引入图标组件
import { useRouter, useRoute } from 'vue-router'
import { $getPayTrendCount, $getIsvAndMchCount, $getNumCount, $getPayCount, $getPayType,$getUserInfo } from '@/api/manage'
import {pieEcharts, statisticsEcharts, amountEcharts} from './echartsConfig.js' // 图标配置项组件
import { Empty } from 'ant-design-vue' // 缺省图
import { useUserStore } from '@/store/modules/user'
const { $infoBox, $access, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties
const userStore = useUserStore()
// 获取到路由对象
const router = useRouter() //这是全部路由
// 特约商户 普通商户文字显示与隐藏
let normalMchIsShow = ref(false) // 普通商户
let subMchIsShow = ref(false) // 特约商户
const safeWord = ref('')
onMounted(() =>{
$getUserInfo().then(res =>{
safeWord.value = res.safeWord
})
})
// 切换今日昨日金额数据
let amountDate = ref('today') // 默认为今日
const amountDateHandle = (param) => {
amountDate.value = param
numCountHandle() // 切换后调用请求
}
let payAmountDataAll: any = ref({}) // 成交金额总数据（今天和昨天）
const payAmountGetDateData = ( res ) => { //数据赋值
// 分转元显示
Object.keys(res.dayCount).forEach(item => {
if ((item == 'payCount') || (item == 'refundCount')) {
return
} else {
res.dayCount[item] = (res.dayCount[item] / 100).toFixed(2)
}
})
payAmountDataAll.value = res.dayCount
}
// 成交金额请求数据
const numCountHandle = () => {
$getNumCount({queryDateRange: amountDate.value}).then(res => {
payAmountGetDateData(res)
}).catch(err => {
console.log(err)
})
}
//设置信息
const setSafeWord = () =>{
router.push({
path:'/currentUserinfo',
query:{type:'msg'}
})
}
// 商户数量
let isvAndMchCount: any = ref({})
const isvAndMchGetData = (res) => {
isvAndMchCount.value = res
}
let payMethod // 支付方式饼图
let payMethodEmpty = ref(false) // 支付方式饼图缺省图
let payMethodDate = ref('near2now_30') // 饼图日期查询
// 当支付方式自定义日期格式中不包含N ，则代表选择了正确的日期格式
const payMethodDateHandle = () => {
let flag = payMethodDate.value.indexOf('N') === -1
if (payMethodDate.value && flag) {
payMethodHandle(payMethodDate.value)
}
}
// 饼图数据赋值
const payMethodGetData = (res) => {
let payTypeData = []
res[0].length === 0 ? payMethodEmpty.value = true : payMethodEmpty.value = false
res[0].forEach(item => {
payTypeData.push({
value: (item.typeAmount / 100).toFixed(2), // 分转元
name: item.typeName,
} as never)
})
pieEcharts.series[0].data = payTypeData // 饼图数据赋值
nextTick(() => {
payMethod = echarts.init(document.getElementById('pay-method') as HTMLElement)
payMethod.setOption(pieEcharts) // 数据填充
})
}
// 饼图请求数据
const payMethodHandle = (data) => {
$getPayType(data).then(res => {
payMethodGetData(res)
}).catch(err => {
console.log(err)
})
}
let payStatistics // 交易统计折线图
let payStatisticsDate = ref('near2now_30') // 交易统计折线图日期查询
let payStatisticsEmpty = ref(false) // 交易统计折线图缺省图
const statisticsHandle = () => {
let flag = payStatisticsDate.value.indexOf('N') === -1
if (payStatisticsDate.value && flag) {
payStatisticsHandle(payStatisticsDate.value)
}
}
// 交易统计折线图数据赋值
const payStatisticsGetData = (res) => {
Object.keys(res).length === 0 ? payStatisticsEmpty.value = true : payStatisticsEmpty.value = false
statisticsEcharts.xAxis.data = res.resDateArr // x轴日期
let payAmountArr = []
res.resPayAmountArr.forEach(item => payAmountArr.push((item / 100).toFixed(2) as never)) // 成交金额分转元
statisticsEcharts.series[0].data = payAmountArr // 成交金额
statisticsEcharts.series[1].data = res.resPayCountArr // 订单笔数
let refAmountArr = []
res.resRefAmountArr.forEach(item => refAmountArr.push((item / 100).toFixed(2) as never)) // 退款金额分转元
statisticsEcharts.series[2].data = refAmountArr // 退款金额
nextTick(() => {
payStatistics = echarts.init(document.getElementById('pay-statistics') as HTMLElement)
payStatistics.setOption(statisticsEcharts) // 数据填充
})
}
// 交易统计折线图请求数据
const payStatisticsHandle = (data) => {
$getPayCount(data).then(res => {
payStatisticsGetData(res)
}).catch(err => {
console.log(err)
})
}
// 今日金额折线图日期选择
const amountSelectHandle = (value: string) => {
payAmountHandle(value)
}
let payAmount // 金额板块折线图
let payAmountEmpty = ref(false) // 金额折线图缺省图是否展示
let amountSelectDate = ref('近30天') // 交易统计折线图日期查询
// 成交金额 数据赋值
const payAmountGetData = (res) => {
amountEcharts.xAxis.data = res.dateList
res.dateList.length === 0 ? payAmountEmpty.value = true : payAmountEmpty.value = false
let payAmountList = []
res.payAmountList.forEach(item => {payAmountList.push((item / 100).toFixed(2) as never)})
amountEcharts.series[0].data = payAmountList // 数据赋值
nextTick(() => {
payAmount = echarts.init(document.getElementById('pay-amount') as HTMLElement)
payAmount.setOption(amountEcharts)
})
}
// 金额板块折线图请求数据
const payAmountHandle = (date) => {
$getPayTrendCount(date).then(res => {
payAmountGetData(res)
}).catch(err => {
console.log(err)
})
}
// 缺省图片的样式
const emptyImg = Empty.PRESENTED_IMAGE_SIMPLE
// 骨架屏是否展示
let skeletonIsShow = ref(true)
// 首页骨架屏隐藏采用 promise all,只有本页面5个请求全部获得数据才会隐藏， 请求顺序依次为：成交金额， 趋势折线图， 商户数量， 支付方式， 交易统计
Promise.all([$getNumCount({queryDateRange: amountDate.value}), $getPayTrendCount(30), $getIsvAndMchCount(), $getPayType(payMethodDate.value), $getPayCount(payStatisticsDate.value)]).then((res) => {
skeletonIsShow.value = false // 骨架屏取消
payAmountGetDateData(res[0]) // 成交金额
payAmountGetData(res[1]) // 趋势折线图
isvAndMchGetData(res[2]) // 商户数量
payMethodGetData(res[3]) // 饼图
payStatisticsGetData(res[4]) // 交易统计
}).catch((error) => {
skeletonIsShow.value = false // 骨架屏取消
console.log(error)
})
// 所有图表根据屏幕大小 图表自适应
window.addEventListener('resize', () => {
payMethod.resize()
payStatistics.resize()
payAmount.resize()
})
// 问候语句
const nextAge = computed(() => {
const time = new Date()
const hour = time.getHours()
return hour < 9 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 20 ? '下午好' : '晚上好'
})
// 快速菜单集合
const quickMenuList: any = computed(() => {
const result = []
const putResult = function (item) {
for (let i = 0; i < item.length; i++) {
if (item[i].menuUri && item[i].quickJump === 1) {
result.push(item[i] as never)
}
if (item[i].children) {
putResult(item[i].children)
}
}
}
putResult(userStore.userInfo['allMenuRouteTree'])
return result
})
// 金额处理 超过1000万时拼接万 超过亿时 拼接亿
const amountHandle = (amount) => {
if (amount >= 100000000) {
return parseFloat( (amount / 100000000).toFixed(2) )
} else if (amount >= 10000000) {
return parseFloat( (amount / 10000).toFixed(2) )
} else {
return amount
}
}
</script>
<style lang="less" scoped>
@import './index.less'; // 响应式布局
// 个人信息页标题
.personal-title {
display: flex;
img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
}
&>div {
height: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
p {
font-size: 15px;
font-weight: 600;
margin:0;
}
}
}
// 个人信息 快速开始
.quick-start {
p {
margin: 0;
font-weight: bold;
font-size: 14px;
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 20px;
margin-top: 20px;
}
}
// 通用图表标题
.echart-title {
display: flex;
justify-content: space-between;
align-items: center;
b {
font-size: 14px;
font-weight: 600;
margin-right: 10px;
}
.date {
width: 215px
}
}
// 成交金额折线图 日期选择器样式
// #selet-date .ant-select {
// background: rgba(255, 255, 255, 0.05) !important;
// color: rgba(255, 255, 255, 0.7) !important;
// }
// /deep/ #selet-date .ant-select-arrow {
// color: rgba(255, 255, 255, 0.7) !important;
// }
// 交易统计图表标题
.pay-statistics {
&>div{
position: relative;
&>b, &>.date{
position: absolute;
top: 30px;
z-index: 9
}
&>b {
font-size: 14px;
font-weight: 600;
margin-right: 10px;
top: 36px;
}
&>.date {
width: 215px;
right: 30px;
}
}
}
.tooltip {
&:hover {
cursor: pointer;
}
}
// 缺省图的样式
/deep/ .ant-empty-normal {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.h_opt_p_r {
padding: 20px;
margin-bottom: 15px;
background-color: #fff;
border-radius: 6px;
}
.h_title_box {
display: flex;
align-items: center;
height: 40px;
}
.h_title_box{
display: flex;
align-items: center;
height: 40px;
}
.h_title_box .h_tit_name {
font-size: 20px;
font-weight: 500;
color: #1f2d3d;
}
.h_title_box .h_tit_timer {
padding-top: 6px;
margin-left: 10px;
font-size: 12px;
color: #999;
}
.h_opt_p_r .h_opt_p_r_l {
padding: 10px;
margin: 5px 0 10px;
color: #fff;
border-radius: 6px;
}
.h_opt_p_r_l_2 {
overflow: hidden;
color: #fff;
background: linear-gradient(90deg, #734bff, #b190f6);
}
.h_opt_p_r_l_3 {
margin-bottom: 15px;
overflow: hidden;
color: #fff;
background: linear-gradient(90deg, #ff9b00, #face67);
}
.ant-btn-primary {
color: #fff;
border-color: #165dff;
background: #165dff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
box-shadow: 0 2px #0000000b;
}
.ant-btn-lg {
height: 40px;
padding: 6.4px 15px;
font-size: 16px;
border-radius: 4px;
}
.h_opt_p_r_l_1 {
overflow: hidden;
color: #fff;
background: linear-gradient(90deg, #165dff, #5f8cf6);
}
</style>

495
jeepay-ui-merchant/src/views/dashboard/OrderZnFzLargeScreen.vue Normal file
View File

@@ -0,0 +1,495 @@
<template>
<!-- 交易路由概况-->
<div id="chart-card">
<div class="amount">
<div style="background-color: rgb(85, 85, 85);">
<a-skeleton :loading="skeletonIsShow" active :paragraph="{ rows: 6 }" />
<div v-show="!skeletonIsShow" v-if="$access('ENT_C_MAIN_PAY_DAY_COUNT')" class="amount-top">
<div class="amount-date">
<div :class="{'amount-date-active': amountDate === 'today'}" @click="amountDateHandle('today')">今日交易</div>
<div :class="{'amount-date-active': amountDate === 'yesterday'}" @click="amountDateHandle('yesterday')">昨日交易</div>
</div>
<p>成交金额(元)</p>
<a-tooltip placement="top" color="#fff">
<template #title>
<p style="font-size: 20px; margin-bottom: 0;color:#000">{{ payAmountDataAll.payAmount }}</p>
</template>
<p style="font-size: 40px;margin-bottom: 35px;color:#fff;width: max-content;">
{{ amountHandle(payAmountDataAll.payAmount) }}<span v-if="payAmountDataAll.payAmount >=100000000" style="font-size: 20px;font-weight: 600;margin-left: 5px;vertical-align: middle;">亿</span><span v-else-if="payAmountDataAll.payAmount >=10000000" style="font-size: 20px;font-weight: 600;margin-left: 5px;vertical-align: middle;">万</span>
</p>
</a-tooltip>
<div class="amount-list">
<div><p>成交笔数</p><span>{{ payAmountDataAll.payCount }}</span></div>
<div><p>手续费金额(元)</p><span>{{ payAmountDataAll.refundAmount }}</span></div>
<!-- <div><p>退款笔数</p><span>{{ payAmountDataAll.refundCount }}</span></div>-->
</div>
</div>
<div class="amount-line" />
<a-skeleton v-show="skeletonIsShow" active :paragraph="{ rows: 6 }" />
<div v-show="!skeletonIsShow" v-if="$access('ENT_C_MAIN_PAY_TREND_COUNT')" class="amount-bottom" style="width: 100%">
<div class="echart-title">
<div style="display: flex;">
<b style="color: #fff">趋势</b>
<a-tooltip class="tooltip">
<template #title>近期成交金额</template>
<i class="bi bi-info-circle" style="color:rgba(255, 255, 255, 0.6)" />
</a-tooltip>
</div>
<!-- -->
<a-select id="selet-date" v-model:value="amountSelectDate" class="date amount-date" placeholder="近30天" @change="amountSelectHandle">
<a-select-option value="30">近30天</a-select-option>
<a-select-option value="7">近7天</a-select-option>
</a-select>
</div>
<div v-show="!payAmountEmpty" id="pay-amount" style="width: 100%;" />
<a-empty v-show="payAmountEmpty" :image="emptyImg" />
</div>
</div>
</div>
<div class="personal">
<div class="h_opt_p_r">
<div class="h_title_box" style="cursor: pointer;"><span class="h_tit_name">账户概况</span></div>
<div class="h_opt_p_r_l h_opt_p_r_l_1">
<div>总交易金额(元)</div>
<div class="ant-statistic">
<div class="ant-statistic-content" style="color: rgb(255, 255, 255); font-size: 20px;"><span
class="ant-statistic-content-value"><span
class="ant-statistic-content-value-int">6,261</span><span
class="ant-statistic-content-value-decimal">.67</span></span></div>
</div>
</div>
<div class="h_opt_p_r_l h_opt_p_r_l_2">
<div>手续费余额(元)</div>
<div class="ant-statistic">
<div class="ant-statistic-content" style="color: rgb(255, 255, 255); font-size: 20px;"><span
class="ant-statistic-content-value"><span
class="ant-statistic-content-value-int">6,261</span><span
class="ant-statistic-content-value-decimal">.67</span></span></div>
</div>
</div>
<div class="h_opt_p_r_l h_opt_p_r_l_3">
<div>支付宝费率(%)：0.2</div>
<div>银行卡费率(%)：0.3</div>
<!-- <div class="ant-statistic">-->
<!-- <div class="ant-statistic-content" style="color: rgb(255, 255, 255); font-size: 20px;"><span-->
<!-- class="ant-statistic-content-value"><span class="ant-statistic-content-value-int">0</span><span-->
<!-- class="ant-statistic-content-value-decimal">.00</span></span></div>-->
<!-- </div>-->
</div>
<div>
<button type="button" class="ant-btn ant-btn-primary ant-btn-lg" style="margin-right: 3%;">
<span>充 值</span></button>
<button type="button" class="ant-btn ant-btn-default ant-btn-lg" style="margin-right: 3%;">
<span>结 算</span></button>
<!-- <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><span>计算器</span></button>-->
</div>
</div>
</div>
<div class="method">
<a-skeleton :loading="skeletonIsShow" active :paragraph="{ rows: 6 }" />
<div v-show="!skeletonIsShow" v-if="$access('ENT_C_MAIN_PAY_TYPE_COUNT')">
<div class="echart-title">
<b>支付方式</b>
<JeepayDateRangePicker v-model:value="payMethodDate" class="date" customDateRangeType="date" :allTimeIsShow="false" @update:value="payMethodDateHandle" />
</div>
<div v-show="!payMethodEmpty" id="pay-method" style="width: 100%;height: 100%" />
<a-empty v-show="payMethodEmpty" :image="emptyImg" />
</div>
</div>
<div class="pay-statistics">
<a-skeleton :loading="skeletonIsShow" active :paragraph="{ rows: 6 }" />
<div v-show="!skeletonIsShow" v-if="$access('ENT_C_MAIN_PAY_COUNT')">
<b>交易统计</b>
<!-- <JeepayDateRangePicker v-model:value="payStatisticsDate" class="date" customDateRangeType="date" :statisticalTimeIsShow="true" @update:value="statisticsHandle" />-->
<div v-show="!payStatisticsEmpty" id="pay-statistics" style="width: 100%;height: 100%" />
<a-empty v-show="payStatisticsEmpty" :image="emptyImg" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { nextTick, ref, computed, onMounted,getCurrentInstance } from 'vue'
import * as echarts from 'echarts' // 引入图标组件
import { useRouter, useRoute } from 'vue-router'
import { $getPayTrendCount, $getIsvAndMchCount, $getNumCount, $getPayCount, $getPayType,$getUserInfo } from '@/api/manage'
import {pieEcharts, statisticsEcharts, amountEcharts} from './echartsConfig.js' // 图标配置项组件
import { Empty } from 'ant-design-vue' // 缺省图
import { useUserStore } from '@/store/modules/user'
const { $infoBox, $access, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties
const userStore = useUserStore()
// 获取到路由对象
const router = useRouter() //这是全部路由
// 特约商户 普通商户文字显示与隐藏
let normalMchIsShow = ref(false) // 普通商户
let subMchIsShow = ref(false) // 特约商户
const safeWord = ref('')
onMounted(() =>{
$getUserInfo().then(res =>{
safeWord.value = res.safeWord
})
})
// 切换今日昨日金额数据
let amountDate = ref('today') // 默认为今日
const amountDateHandle = (param) => {
amountDate.value = param
numCountHandle() // 切换后调用请求
}
let payAmountDataAll: any = ref({}) // 成交金额总数据（今天和昨天）
const payAmountGetDateData = ( res ) => { //数据赋值
// 分转元显示
Object.keys(res.dayCount).forEach(item => {
if ((item == 'payCount') || (item == 'refundCount')) {
return
} else {
res.dayCount[item] = (res.dayCount[item] / 100).toFixed(2)
}
})
payAmountDataAll.value = res.dayCount
}
// 成交金额请求数据
const numCountHandle = () => {
$getNumCount({queryDateRange: amountDate.value}).then(res => {
payAmountGetDateData(res)
}).catch(err => {
console.log(err)
})
}
//设置信息
const setSafeWord = () =>{
router.push({
path:'/currentUserinfo',
query:{type:'msg'}
})
}
// 商户数量
let isvAndMchCount: any = ref({})
const isvAndMchGetData = (res) => {
isvAndMchCount.value = res
}
let payMethod // 支付方式饼图
let payMethodEmpty = ref(false) // 支付方式饼图缺省图
let payMethodDate = ref('near2now_30') // 饼图日期查询
// 当支付方式自定义日期格式中不包含N ，则代表选择了正确的日期格式
const payMethodDateHandle = () => {
let flag = payMethodDate.value.indexOf('N') === -1
if (payMethodDate.value && flag) {
payMethodHandle(payMethodDate.value)
}
}
// 饼图数据赋值
const payMethodGetData = (res) => {
let payTypeData = []
res[0].length === 0 ? payMethodEmpty.value = true : payMethodEmpty.value = false
res[0].forEach(item => {
payTypeData.push({
value: (item.typeAmount / 100).toFixed(2), // 分转元
name: item.typeName,
} as never)
})
pieEcharts.series[0].data = payTypeData // 饼图数据赋值
nextTick(() => {
payMethod = echarts.init(document.getElementById('pay-method') as HTMLElement)
payMethod.setOption(pieEcharts) // 数据填充
})
}
// 饼图请求数据
const payMethodHandle = (data) => {
$getPayType(data).then(res => {
payMethodGetData(res)
}).catch(err => {
console.log(err)
})
}
let payStatistics // 交易统计折线图
let payStatisticsDate = ref('near2now_30') // 交易统计折线图日期查询
let payStatisticsEmpty = ref(false) // 交易统计折线图缺省图
const statisticsHandle = () => {
let flag = payStatisticsDate.value.indexOf('N') === -1
if (payStatisticsDate.value && flag) {
payStatisticsHandle(payStatisticsDate.value)
}
}
// 交易统计折线图数据赋值
const payStatisticsGetData = (res) => {
Object.keys(res).length === 0 ? payStatisticsEmpty.value = true : payStatisticsEmpty.value = false
statisticsEcharts.xAxis.data = res.resDateArr // x轴日期
let payAmountArr = []
res.resPayAmountArr.forEach(item => payAmountArr.push((item / 100).toFixed(2) as never)) // 成交金额分转元
statisticsEcharts.series[0].data = payAmountArr // 成交金额
statisticsEcharts.series[1].data = res.resPayCountArr // 订单笔数
let refAmountArr = []
res.resRefAmountArr.forEach(item => refAmountArr.push((item / 100).toFixed(2) as never)) // 退款金额分转元
statisticsEcharts.series[2].data = refAmountArr // 退款金额
nextTick(() => {
payStatistics = echarts.init(document.getElementById('pay-statistics') as HTMLElement)
payStatistics.setOption(statisticsEcharts) // 数据填充
})
}
// 交易统计折线图请求数据
const payStatisticsHandle = (data) => {
$getPayCount(data).then(res => {
payStatisticsGetData(res)
}).catch(err => {
console.log(err)
})
}
// 今日金额折线图日期选择
const amountSelectHandle = (value: string) => {
payAmountHandle(value)
}
let payAmount // 金额板块折线图
let payAmountEmpty = ref(false) // 金额折线图缺省图是否展示
let amountSelectDate = ref('近30天') // 交易统计折线图日期查询
// 成交金额 数据赋值
const payAmountGetData = (res) => {
amountEcharts.xAxis.data = res.dateList
res.dateList.length === 0 ? payAmountEmpty.value = true : payAmountEmpty.value = false
let payAmountList = []
res.payAmountList.forEach(item => {payAmountList.push((item / 100).toFixed(2) as never)})
amountEcharts.series[0].data = payAmountList // 数据赋值
nextTick(() => {
payAmount = echarts.init(document.getElementById('pay-amount') as HTMLElement)
payAmount.setOption(amountEcharts)
})
}
// 金额板块折线图请求数据
const payAmountHandle = (date) => {
$getPayTrendCount(date).then(res => {
payAmountGetData(res)
}).catch(err => {
console.log(err)
})
}
// 缺省图片的样式
const emptyImg = Empty.PRESENTED_IMAGE_SIMPLE
// 骨架屏是否展示
let skeletonIsShow = ref(true)
// 首页骨架屏隐藏采用 promise all,只有本页面5个请求全部获得数据才会隐藏， 请求顺序依次为：成交金额， 趋势折线图， 商户数量， 支付方式， 交易统计
Promise.all([$getNumCount({queryDateRange: amountDate.value}), $getPayTrendCount(30), $getIsvAndMchCount(), $getPayType(payMethodDate.value), $getPayCount(payStatisticsDate.value)]).then((res) => {
skeletonIsShow.value = false // 骨架屏取消
payAmountGetDateData(res[0]) // 成交金额
payAmountGetData(res[1]) // 趋势折线图
isvAndMchGetData(res[2]) // 商户数量
payMethodGetData(res[3]) // 饼图
payStatisticsGetData(res[4]) // 交易统计
}).catch((error) => {
skeletonIsShow.value = false // 骨架屏取消
console.log(error)
})
// 所有图表根据屏幕大小 图表自适应
window.addEventListener('resize', () => {
payMethod.resize()
payStatistics.resize()
payAmount.resize()
})
// 问候语句
const nextAge = computed(() => {
const time = new Date()
const hour = time.getHours()
return hour < 9 ? '早上好' : hour <= 11 ? '上午好' : hour <= 13 ? '中午好' : hour < 20 ? '下午好' : '晚上好'
})
// 快速菜单集合
const quickMenuList: any = computed(() => {
const result = []
const putResult = function (item) {
for (let i = 0; i < item.length; i++) {
if (item[i].menuUri && item[i].quickJump === 1) {
result.push(item[i] as never)
}
if (item[i].children) {
putResult(item[i].children)
}
}
}
putResult(userStore.userInfo['allMenuRouteTree'])
return result
})
// 金额处理 超过1000万时拼接万 超过亿时 拼接亿
const amountHandle = (amount) => {
if (amount >= 100000000) {
return parseFloat( (amount / 100000000).toFixed(2) )
} else if (amount >= 10000000) {
return parseFloat( (amount / 10000).toFixed(2) )
} else {
return amount
}
}
</script>
<style lang="less" scoped>
@import './index.less'; // 响应式布局
// 个人信息页标题
.personal-title {
display: flex;
img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
}
&>div {
height: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
p {
font-size: 15px;
font-weight: 600;
margin:0;
}
}
}
// 个人信息 快速开始
.quick-start {
p {
margin: 0;
font-weight: bold;
font-size: 14px;
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 20px;
margin-top: 20px;
}
}
// 通用图表标题
.echart-title {
display: flex;
justify-content: space-between;
align-items: center;
b {
font-size: 14px;
font-weight: 600;
margin-right: 10px;
}
.date {
width: 215px
}
}
// 成交金额折线图 日期选择器样式
// #selet-date .ant-select {
// background: rgba(255, 255, 255, 0.05) !important;
// color: rgba(255, 255, 255, 0.7) !important;
// }
// /deep/ #selet-date .ant-select-arrow {
// color: rgba(255, 255, 255, 0.7) !important;
// }
// 交易统计图表标题
.pay-statistics {
&>div{
position: relative;
&>b, &>.date{
position: absolute;
top: 30px;
z-index: 9
}
&>b {
font-size: 14px;
font-weight: 600;
margin-right: 10px;
top: 36px;
}
&>.date {
width: 215px;
right: 30px;
}
}
}
.tooltip {
&:hover {
cursor: pointer;
}
}
// 缺省图的样式
/deep/ .ant-empty-normal {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.h_opt_p_r {
padding: 20px;
margin-bottom: 15px;
background-color: #fff;
border-radius: 6px;
}
.h_title_box {
display: flex;
align-items: center;
height: 40px;
}
.h_title_box{
display: flex;
align-items: center;
height: 40px;
}
.h_title_box .h_tit_name {
font-size: 20px;
font-weight: 500;
color: #1f2d3d;
}
.h_title_box .h_tit_timer {
padding-top: 6px;
margin-left: 10px;
font-size: 12px;
color: #999;
}
.h_opt_p_r .h_opt_p_r_l {
padding: 10px;
margin: 5px 0 10px;
color: #fff;
border-radius: 6px;
}
.h_opt_p_r_l_2 {
overflow: hidden;
color: #fff;
background: linear-gradient(90deg, #734bff, #b190f6);
}
.h_opt_p_r_l_3 {
margin-bottom: 15px;
overflow: hidden;
color: #fff;
background: linear-gradient(90deg, #ff9b00, #face67);
}
.ant-btn-primary {
color: #fff;
border-color: #165dff;
background: #165dff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
box-shadow: 0 2px #0000000b;
}
.ant-btn-lg {
height: 40px;
padding: 6.4px 15px;
font-size: 16px;
border-radius: 4px;
}
.h_opt_p_r_l_1 {
overflow: hidden;
color: #fff;
background: linear-gradient(90deg, #165dff, #5f8cf6);
}
</style>

206
jeepay-ui-merchant/src/views/dashboard/echartsConfig.js Normal file
View File

@@ -0,0 +1,206 @@
export const pieEcharts = {
tooltip: {
trigger: 'item'
},
legend: {
itemHeight: 12,
itemWidth: 12,
top: '85%',
left: 'center',
textStyle: {
fontSize: 11
},
},
width: 'auto',
height: 'auto',
color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'],
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '65%'],
center: ['50%', '40%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: '支付宝支付' },
{ value: 735, name: '微信支付' },
{ value: 580, name: '微信扫码' },
{ value: 484, name: '云闪付支付' },
{ value: 300, name: '支付宝二维码' }
]
}
],
}
export const statisticsEcharts = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '13%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100
}
],
legend: {
icon: 'rect',
itemHeight: 12,
itemWidth: 12,
top: '2%',
data: ['成交金额', '支付(成功)笔数','退款金额'],
selected: { // 默认把后两项置灰
'成交金额': true,
'支付(成功)笔数': false,
'退款金额': false
}
},
series: [
{
name: '成交金额',
type: 'line',
areaStyle: {},
symbol: 'none',
smooth: true,
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '支付(成功)笔数',
type: 'line',
areaStyle: {},
symbol: 'none',
smooth: true,
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '退款金额',
type: 'line',
areaStyle: {},
symbol: 'none',
smooth: true,
data: []
}
],
media: [ // 这里定义了 media query 的逐条规则。
{
query: { maxWidth: 700 }, // 这里写规则。
option: { // 这里写此规则满足下的option。
legend: {
top: '12%',
},
grid: {
top: '20%',
},
}
},
{
query: {minWidth:701, maxWidth: 1024 }, // 这里写规则。
option: { // 这里写此规则满足下的option。
legend: {
top: '2%',
left: '15%'
},
}
},
{
query: {minWidth:1025 }, // 这里写规则。
option: { // 这里写此规则满足下的option。
legend: {
left: '25%'
},
}
}
]
}
export const amountEcharts = {
xAxis: {
type: 'category',
axisLine: true,
onZero: true,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
textStyle: {
color: 'rgba(255, 255, 255, 0.5)',
},
},
offset: 15
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '2%',
bottom: '15%',
right: '2%',
containLabel: false
},
yAxis: {
show: false
},
series: [
{
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#FFCC74' // 0% 处的颜色
}, {
offset: 1, color: '#FFFFFF' // 100% 处的颜色
}],
global: false // 缺省为 false
},
width: 7
},
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
symbol: 'none',
}
],
}

194
jeepay-ui-merchant/src/views/dashboard/index.css Normal file
View File

@@ -0,0 +1,194 @@
/*
1. amount 金额
2.
3. personal 个人信息
4. payMethod 支付方式
5. pay-statistics 交易统计
*/
#chart-card {
width: 100%;
display: flex;
flex-wrap: wrap;
}
#chart-card > div {
padding: 0 15px 30px;
width: 100%;
}
#chart-card > div > div {
width: 100%;
height: 100%;
padding: 30px;
border-radius: 5px;
box-sizing: border-box;
}
#chart-card .amount {
order: 1;
}
#chart-card .amount > div {
background: linear-gradient(103.57deg, #0c2640 0%, #12375e 100%);
display: flex;
flex-direction: column;
}
#chart-card .amount > div .amount-top {
color: rgba(255, 255, 255, 0.6);
min-width: 250px;
}
#chart-card .amount > div .amount-top .amount-date {
width: auto;
border-radius: 3px;
overflow: hidden;
display: inline-block;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 50px;
}
#chart-card .amount > div .amount-top .amount-date div {
display: inline-block;
background: #000;
padding: 9px 20px;
}
#chart-card .amount > div .amount-top .amount-date div:hover {
cursor: pointer;
}
#chart-card .amount > div .amount-top .amount-date .amount-date-active {
background: #2691FF;
color: #fff;
}
#chart-card .amount > div .amount-top .amount-list {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#chart-card .amount > div .amount-top .amount-list p {
margin-bottom: 10px;
}
#chart-card .amount > div .amount-top .amount-list span {
font-size: 20px;
color: #fff;
}
#chart-card .amount > div .amount-line {
width: 100%;
height: 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
margin: 30px 0;
}
#chart-card .amount > div #pay-amount {
height: 200px;
}
#chart-card .personal {
order: 3;
}
#chart-card .personal > div {
display: flex;
flex-direction: column;
background-color: #fff;
}
#chart-card .personal > div .personal-line {
width: 100%;
border-top: 1px solid #ebeff2;
margin: 25px 0;
}
#chart-card .method {
order: 4;
height: 530px;
}
#chart-card .method > div {
background-color: #fff;
display: flex;
flex-direction: column;
}
#chart-card .pay-statistics {
order: 5;
height: 530px;
}
#chart-card .pay-statistics > div {
position: relative;
background-color: #fff;
}
#chart-card .personal {
order: 0;
}
@media screen and (min-width: 1024px) {
#chart-card .personal {
order: 0;
width: 100%;
}
#chart-card .personal > div {
display: flex;
flex-direction: row;
}
#chart-card .personal > div .personal-line {
width: 0;
height: 100%;
border-left: 1px solid #ebeff2;
margin: 0 25px;
}
#chart-card .amount {
width: 100%;
}
#chart-card .amount > div {
flex-direction: row;
}
#chart-card .amount > div .amount-line {
width: 0;
height: 100%;
border-left: 1px solid rgba(255, 255, 255, 0.15);
margin: 0 30px;
}
#chart-card .amount > div #pay-amount {
height: 100%;
}
#chart-card .method {
width: calc(100% - 285px);
flex-grow: 1;
}
#chart-card .pay-statistics {
width: 100% ;
height: 530px;
}
}
@media screen and (min-width: 1366px) {
#chart-card .personal {
order: 0;
width: 100%;
}
#chart-card .amount {
width: calc(100% - 265px);
flex-grow: 1;
}
#chart-card .method {
width: 460px;
}
#chart-card .pay-statistics {
width: calc(100% - 460px);
flex-grow: 1;
height: 530px;
}
}
@media screen and (min-width: 1600px) {
#chart-card .amount {
order: 1;
width: calc(100% - 270px - 330px);
flex-grow: 1;
}
#chart-card .personal {
order: 3;
width: 330px;
}
#chart-card .personal > div {
display: flex;
flex-direction: column;
}
#chart-card .personal > div .personal-line {
width: 100%;
height: 0;
border-top: 1px solid #ebeff2;
margin: 25px 0;
}
#chart-card .method {
width: 544px;
}
#chart-card .pay-statistics {
width: calc(100% - 544px);
flex-grow: 1;
}
}

261
jeepay-ui-merchant/src/views/dashboard/index.less Normal file
View File

@@ -0,0 +1,261 @@
/*
1. amount 金额
2.
3. personal 个人信息
4. payMethod 支付方式
5. pay-statistics 交易统计
*/
@import '../node_modules/ant-design-vue/es/style/themes/default.less';
#chart-card {
width: 100%;
display: flex;
flex-wrap: wrap;
& > div {
padding: 0 15px 30px;
// flex-grow: 1;
width: 100%;
}
& > div > div {
width: 100%;
height: 100%;
padding: 30px;
border-radius: 5px;
box-sizing: border-box;
}
// order 排列顺序 越小越靠前
.amount {
order: 1;
& > div {
background: linear-gradient(103.57deg, #0c2640 0%, #12375e 100%);
display: flex;
flex-direction: column;
.amount-top {
color: rgba(255, 255, 255, 0.6);
min-width: 450px;
.amount-date {
width: auto;
border-radius: 3px;
overflow: hidden;
display: inline-block;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 30px;
div {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
padding: 9px 20px;
&:hover {
cursor: pointer;
}
}
.amount-date-active {
background: var(--ant-primary-color);
color: #fff;
}
}
.amount-list {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
div{
margin-top: 30px;
width: 150px;
}
p {
margin-bottom: 0;
}
span {
font-size: 20px;
color: #fff;
}
}
}
.amount-line {
width: 100%;
height: 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
margin: 30px 0;
}
#pay-amount {
height: 200px;
}
}
}
.personal {
order: 3;
& > div {
display: flex;
flex-direction: column;
background-color: #fff;
.before-msg {
font-weight: 400;
font-size: 14px;
text-align: left;
color: #8f8f8f;
p {
margin-bottom: 15px;
}
}
.personal-line {
width: 100%;
border-top: 1px solid #ebeff2;
margin: 20px 0;
}
.latest-post {
min-width: 250px;
.title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
span {
&:nth-child(1) {
font-weight: bold;
font-size: 14px;
color: #000;
}
&:nth-child(2) {
font-weight: 400;
font-size: 13px;
}
}
}
.post-list {
width: 100%;
padding-top: 10px;
// background-color: rgb(204, 191, 191);
.post-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 15px;
cursor: pointer;
.title {
display: block;
width: 60%;
overflow: hidden;
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap;
font-weight: 400;
font-size: 13px;
color: #575757;
}
}
}
}
}
}
.method {
order: 4;
height: 530px;
& > div {
background-color: #fff;
display: flex;
flex-direction: column;
}
}
.pay-statistics {
order: 5;
height: 530px;
& > div {
position: relative;
background-color: #fff;
}
}
.personal {
order: 0;
}
}
@media screen and (min-width: 1024px) {
#chart-card {
.personal {
order: 0;
width: 100%;
& > div {
display: flex;
flex-direction: row;
.personal-line {
width: 0;
height: 100%;
border-left: 1px solid #ebeff2;
margin: 0 20px;
}
}
}
.amount {
width: 100%;
& > div {
flex-direction: row;
.amount-line {
width: 0;
height: 100%;
border-left: 1px solid rgba(255, 255, 255, 0.15);
margin: 0 10px 0 20px;
}
#pay-amount {
height: 100%;
}
}
}
.method {
width: calc(100% - 285px);
flex-grow: 1;
}
.pay-statistics {
width: 100%;
height: 530px;
}
}
}
@media screen and (min-width: 1366px) {
#chart-card {
.personal {
order: 0;
width: 100%;
}
.amount {
width: calc(100% - 265px);
flex-grow: 1;
}
.method {
width: 460px;
}
.pay-statistics {
width: calc(100% - 460px);
flex-grow: 1;
height: 530px;
}
}
}
@media screen and (min-width: 1600px) {
#chart-card {
.amount {
order: 1;
width: calc(100% - 270px - 330px);
flex-grow: 1;
} // order 排列顺序 越小越靠前
.personal {
order: 3;
width: 330px;
& > div {
display: flex;
flex-direction: column;
.personal-line {
width: 100%;
height: 0;
border-top: 1px solid #ebeff2;
margin: 20px 0;
}
}
}
.method {
width: 544px;
}
.pay-statistics {
width: calc(100% - 544px);
flex-grow: 1;
}
}
}