+
支付渠道监控
@@ -32,6 +32,23 @@
+
+
交易成功率
+
+
{{transactionSuccessRates.totalSuccessRate}}%
+
+
+
+
+ 周同比{{transactionSuccessRates.changeAmount}}
+
+
+
+
@@ -62,10 +79,11 @@
tabTitle: '',
jiaosucc:78,
pageindex:{
- startTime:"2024-09-11",
+ startTime:"2020-09-11",
endTime:"2024-11-09"
},
- Time:[]
+ Time:[],
+ transactionSuccessRates:{}
}
},
computed: {},
@@ -73,11 +91,19 @@
},
mounted() {
+ const now = new Date();
+ const year = now.getFullYear();
+ const month = String(now.getMonth() + 1).padStart(2, '0')
+ const day = String(now.getDate()).padStart(2, '0')
+ this.pageindex.endTime= `${year}-${month}-${day}`
this.getAll()
+
+
},
methods: {
getAll(){
chartAnalysis(this.pageindex).then(res=>{
+ this.transactionSuccessRates = res.data.transactionSuccessRates
if(res.data.userTraffics &&res.data.paymentChannels ){
this.kong(res.data.userTraffics)
this.shopB(res.data.paymentChannels)
@@ -93,6 +119,7 @@
shopB(datas){
let Dom = this.$refs.shopBing
let myChart = echarts.init(Dom)
+ let totalRevenue = datas.reduce((sum, item) => sum + item.price, 0);
let processedData = datas.map(item => {
let paymentModeName;
if (item.paymentMode === 1) {
@@ -107,9 +134,11 @@
})
let option = {
- tooltip: {
- trigger: 'item'
- },
+ tooltip: {
+ trigger: 'item',
+ // 设置提示框显示在右侧
+ position: 'right' ,
+ },
legend: {
top: '38%',
left: 'right',
@@ -119,21 +148,22 @@
{
name: '营业额',
type: 'pie',
- radius: ['40%', '70%'],
+ radius: ['50%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
- borderWidth: 2
+ borderWidth: 1,
+ color: function(params) {
+ return 'green';
+ }
},
label: {
show: false,
- position: 'center',
- fontSize:'16px'
},
emphasis: {
label: {
- show: true,
+ show: false,
fontSize: 40,
}
},
@@ -142,7 +172,20 @@
},
data:processedData
}
- ]
+ ],
+ // 在中间添加营业额文本
+ graphic: [
+ {
+ type: 'text',
+ left: 'center',
+ top: 'center',
+ style: {
+ text: `营业额${totalRevenue}`,
+ fontSize: 20,
+ fill: '#333'
+ }
+ }
+ ]
}
option && myChart.setOption(option)
},
@@ -154,18 +197,36 @@
value: item.tradingVolume
}))
const option = {
- grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
- top: '5%',
- left: '3%',
- right: '10%',
- bottom: '5%',
- containLabel: true
+ tooltip: {
+ trigger: 'axis', // 触发类型，折线图常用 axis
+ formatter: function (params) {
+ // params[0] 取第一个系列的数据（这里只有一个系列）
+ return `商家名称：${params[0].name}
销售额：${params[0].value}`;
+ }
+ },
+ grid: {
+ top: '5%',
+ left: '10%', // 增大左侧间距，给 X 轴更多显示空间
+ right: '10%',
+ bottom: '5%',
+ containLabel: true
},
xAxis: {
name: '商家名称',
type: 'category',
data:processedData.map(item => item.name),
+ axisLabel: { interval: 0 }, // 0=显示所有刻度
+ axisTick: { interval: 0 }, // 同步显示所有刻度线
+ label: {
+ // 自定义文本显示规则
+ formatter: function (name) {
+ if (name.length > 3) { // 超过4字时截断
+ return `${name.slice(0, 3)}...`;
+ }
+ return name;
+ }
+ }
},
yAxis: {
@@ -370,6 +431,11 @@
}
+ .card_body {
+ font-size: 24px;
+ margin-top: 10px;
+ font-weight: 600;
+ }
.card_tree {
padding: 20px 20px 10px 20px;
margin-right: 20px;
@@ -377,13 +443,9 @@
.card_title {
color: #B0B0B0;
+ font-size: 16px;
}
- .card_body {
- font-size: 24px;
- margin-top: 10px;
- font-weight: 600;
- }
.card_tu {
height: 80px;
diff --git a/admin-web-master/src/views/online/detailQuery/index.vue b/admin-web-master/src/views/online/detailQuery/index.vue
index a3b5dbc..8df3de2 100644
--- a/admin-web-master/src/views/online/detailQuery/index.vue
+++ b/admin-web-master/src/views/online/detailQuery/index.vue
@@ -21,7 +21,7 @@
placeholder="请输入订单号"
style="width: 168px"
- v-model="pageindex.orderNo">
+ v-model="pageindex.orderFormId">
@@ -31,46 +31,47 @@
placeholder="请输入"
style="width: 168px"
- v-model="pageindex.minOrderPrice">
+ v-model="pageindex.minPrice">
至
+ v-model="pageindex.maxPrice">