update
This commit is contained in:
ylj20011123
parent
77aa9d2251
commit
8d08edf247
@ -37,6 +37,8 @@ const tabList = [
|
||||
// 选择的tab
|
||||
let selectTab = ref<number>(1)
|
||||
// 应收账款预警
|
||||
let AccountsReceivableWarning2 = ref<any>()
|
||||
// 合同到期预警
|
||||
let AccountsReceivableWarning = ref<any>()
|
||||
// 图例列表
|
||||
let legendList = ref<any>([])
|
||||
@ -50,7 +52,7 @@ onMounted(async () => {
|
||||
// 获取数据
|
||||
const handleGetData = async () => {
|
||||
let category: string[] = []
|
||||
let seriesData: number[] = []
|
||||
let seriesData: any = []
|
||||
let realData: string[] = []
|
||||
|
||||
const req: any = {
|
||||
@ -63,14 +65,15 @@ const handleGetData = async () => {
|
||||
|
||||
// 应收账款预警
|
||||
let ArrearageList = data.ArrearageList
|
||||
|
||||
AccountsReceivableWarning.value = data
|
||||
data.Arrearage_Amount = Number(data.Arrearage_Amount.toFixed(2)).toLocaleString()
|
||||
AccountsReceivableWarning2.value = data
|
||||
|
||||
|
||||
if (ArrearageList && ArrearageList.length > 0) {
|
||||
ArrearageList.forEach((item: any) => {
|
||||
category.push(item.Overdue_Situation)
|
||||
seriesData.push(item.Arrearage_Amount)
|
||||
// seriesData.push(item.ArrearageContract_Count)
|
||||
seriesData.push({ name: item.Overdue_Situation, value: item.ArrearageContract_Count })
|
||||
})
|
||||
}
|
||||
|
||||
@ -111,7 +114,7 @@ const handleHaveFirstPie = async () => {
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
return `
|
||||
<div style="font-weight:bold">${params.name} ${params.value}%</div>
|
||||
<div style="font-weight:bold">${params.name} ${params.value}份</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
@ -259,16 +262,18 @@ const handleHaveSecond = async () => {
|
||||
|
||||
myChart2.setOption(option);
|
||||
myChart2.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
window.addEventListener('resize', resizeChart2);
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
const resizeChart2 = () => {
|
||||
myChart2?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
window.removeEventListener('resize', resizeChart2);
|
||||
myChart?.dispose();
|
||||
myChart2?.dispose();
|
||||
});
|
||||
@ -298,7 +303,7 @@ onBeforeUnmount(() => {
|
||||
<div class="progressPieTopItemLabel">应收欠款(全部)</div>
|
||||
<div class="progressPieTopItemValueBox">
|
||||
<span class="progressPieTopItemValue">{{
|
||||
AccountsReceivableWarning?.Arrearage_Amount || '-' }}</span>
|
||||
AccountsReceivableWarning2?.Arrearage_Amount || '-' }}</span>
|
||||
<span class="progressPieTopItemUnit">万元</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -306,7 +311,7 @@ onBeforeUnmount(() => {
|
||||
<div class="progressPieTopItemLabel">欠款合同</div>
|
||||
<div class="progressPieTopItemValueBox">
|
||||
<span class="progressPieTopItemValue">{{
|
||||
AccountsReceivableWarning?.ArrearageContract_Count || '-' }}</span>
|
||||
AccountsReceivableWarning2?.ArrearageContract_Count || '-' }}</span>
|
||||
<span class="progressPieTopItemUnit">份</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,7 @@ import { handleGetExamineResultList } from '../../service';
|
||||
|
||||
|
||||
// 考核数据
|
||||
let rankList: any = ref<any>([{}, {}, {}, {}, {}])
|
||||
let rankList: any = ref<any>([])
|
||||
|
||||
onMounted(async () => {
|
||||
await handleGetData()
|
||||
@ -19,7 +19,7 @@ const handleGetData = async () => {
|
||||
DataType: 1,
|
||||
StartMonth: "202501",
|
||||
EndMonth: "202501",
|
||||
provinceCode: "340000",
|
||||
provinceCode: "530000",
|
||||
}
|
||||
|
||||
const data = await handleGetExamineResultList(req)
|
||||
|
||||
@ -36,10 +36,10 @@ onMounted(async () => {
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
selectedMode: false,
|
||||
// selectedMode: false,
|
||||
right: 0,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 5]
|
||||
},
|
||||
|
||||
@ -72,11 +72,10 @@ const handleGoMounted = async () => {
|
||||
itemWidth: 12, // 图例标记宽度
|
||||
itemHeight: 12, // 图例标记高度
|
||||
textStyle: {
|
||||
color: '#666', // 文字颜色
|
||||
color: '#fff', // 文字颜色
|
||||
rich: {
|
||||
// 可以在这里添加富文本样式
|
||||
value: {
|
||||
color: '#333',
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 0, 5] // 文字间距
|
||||
}
|
||||
|
||||
@ -67,11 +67,13 @@
|
||||
|
||||
.BusinessCaseRightItem {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
|
||||
.rightItemLeft {
|
||||
.BusinessCaseRightItemTop {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.rightItemTitle {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
@ -82,10 +84,26 @@
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.rightItemBottom {
|
||||
margin-top: 8px;
|
||||
.rightItemUpdate {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #78828E;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.BusinessCaseRightItemBottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
|
||||
.BusinessCaseItemBottomLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
|
||||
.compareTitle {
|
||||
font-family: Inter, Inter;
|
||||
@ -98,50 +116,142 @@
|
||||
|
||||
.changeBox {
|
||||
margin-left: 5px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.changeIcon {
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-right: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.changeText {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
font-size: 12px;
|
||||
color: #00FF00;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.BusinessCaseItemBottomRight {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.rightItemRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.BusinessCaseRevenueValue {
|
||||
font-family: Impact, Impact;
|
||||
font-weight: 400;
|
||||
font-size: 25px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.BusinessCaseRevenueValue {
|
||||
font-family: Impact, Impact;
|
||||
font-weight: 400;
|
||||
font-size: 25px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.BusinessCaseRevenueUnit {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #788390;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
margin-left: 10px;
|
||||
.BusinessCaseRevenueUnit {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #788390;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// .rightItemLeft {
|
||||
// .rightItemTitleBox {
|
||||
// width: 100%;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
|
||||
// .rightItemTitle {
|
||||
// font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
// font-weight: 400;
|
||||
// font-size: 14px;
|
||||
// color: #FFFFFF;
|
||||
// text-align: left;
|
||||
// font-style: normal;
|
||||
// margin-top: 5px;
|
||||
// }
|
||||
|
||||
// .rightItemUpdate {
|
||||
// font-family: Inter, Inter;
|
||||
// font-weight: 400;
|
||||
// font-size: 12px;
|
||||
// color: #FFFFFF;
|
||||
// text-align: left;
|
||||
// font-style: normal;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// .rightItemBottom {
|
||||
// margin-top: 8px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
|
||||
// .compareTitle {
|
||||
// font-family: Inter, Inter;
|
||||
// font-weight: 400;
|
||||
// font-size: 12px;
|
||||
// color: #78828E;
|
||||
// text-align: left;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
// .changeBox {
|
||||
// margin-left: 5px;
|
||||
|
||||
// .changeIcon {
|
||||
// width: 6px;
|
||||
// height: 8px;
|
||||
// margin-right: 2px;
|
||||
// }
|
||||
|
||||
// .changeText {
|
||||
// font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
// font-weight: 400;
|
||||
// font-size: 10px;
|
||||
// color: #00FF00;
|
||||
// text-align: left;
|
||||
// font-style: normal;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// .rightItemRight {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
|
||||
// .BusinessCaseRevenueValue {
|
||||
// font-family: Impact, Impact;
|
||||
// font-weight: 400;
|
||||
// font-size: 25px;
|
||||
// color: #FFFFFF;
|
||||
// letter-spacing: 2px;
|
||||
// text-align: right;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
// .BusinessCaseRevenueUnit {
|
||||
// font-family: Inter, Inter;
|
||||
// font-weight: 400;
|
||||
// font-size: 12px;
|
||||
// color: #788390;
|
||||
// text-align: right;
|
||||
// font-style: normal;
|
||||
// margin-left: 10px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -16,6 +16,8 @@ import {
|
||||
TransformComponent // 如果使用 dataset.source 需要此组件
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import addIcon from '../../../../assets/image/addIcon.png'
|
||||
import reduce from '../../../../assets/image/reduce.png'
|
||||
|
||||
|
||||
|
||||
@ -47,6 +49,8 @@ let selectTab = ref<number>(1)
|
||||
|
||||
// 当前请求来的实际数据
|
||||
let realData = ref<any>()
|
||||
// 请求到的整个数据
|
||||
let getAllData = ref<any>()
|
||||
|
||||
// 传入的数据
|
||||
const props = defineProps<{
|
||||
@ -78,7 +82,6 @@ const handleChangeTab = async (value: number) => {
|
||||
|
||||
// 拿到数据的方法
|
||||
const handleGetData = async () => {
|
||||
|
||||
const req: any = {
|
||||
ProvinceCode: "340000",
|
||||
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
|
||||
@ -88,6 +91,8 @@ const handleGetData = async () => {
|
||||
const data = await handleCodeGetRevenueCompare(req)
|
||||
console.log('djsakjdaskldjasoifioad', data);
|
||||
|
||||
getAllData.value = data
|
||||
|
||||
// 营收金额
|
||||
let category: any = ['product']
|
||||
let monthList: number[] = []
|
||||
@ -110,7 +115,7 @@ const handleGetData = async () => {
|
||||
let list: any = [`${item}月`]
|
||||
data.RevenueAmountList.forEach((subItem: any) => {
|
||||
let newData: any = subItem.data
|
||||
list.push(newData[item - 1][1])
|
||||
list.push(Number(((newData[item - 1][1]) / 10000).toFixed(2)))
|
||||
})
|
||||
res.push(list)
|
||||
})
|
||||
@ -123,7 +128,7 @@ const handleGetData = async () => {
|
||||
let list: any = [`${item}月`]
|
||||
data.TicketCountList.forEach((subItem: any) => {
|
||||
let newData: any = subItem.data
|
||||
list.push(newData[item - 1][1])
|
||||
list.push(Number(((newData[item - 1][1]) / 10000).toFixed(2)))
|
||||
})
|
||||
res2.push(list)
|
||||
})
|
||||
@ -180,13 +185,13 @@ const handleGetBottomData = async () => {
|
||||
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
currentYear.push(item.value)
|
||||
currentYear.push(Number((Number(item.value) / 10000).toFixed(2)))
|
||||
})
|
||||
}
|
||||
|
||||
if (yesData && yesData.length > 0) {
|
||||
yesData.forEach((item: any) => {
|
||||
lastYear.push(item.value)
|
||||
lastYear.push(Number((Number(item.value) / 10000).toFixed(2)))
|
||||
})
|
||||
}
|
||||
|
||||
@ -202,6 +207,9 @@ const handleGetBottomData = async () => {
|
||||
const handleShowData = async (value: number) => {
|
||||
let data = realData.value[value]
|
||||
|
||||
console.log('fjidufasdhfsdjfsdn', data);
|
||||
|
||||
|
||||
const chartDom = document.getElementById('featureAnalysis');
|
||||
if (!chartDom) return;
|
||||
|
||||
@ -221,16 +229,36 @@ const handleShowData = async (value: number) => {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: '#fff',
|
||||
formatter: '{value}' // 刻度值保持纯数字
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 隐藏刻度小线条
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: { show: false },
|
||||
name: `${selectTab.value === 1 ? '营收金额(万元)' : selectTab.value === 2 ? '客单量(万笔)' : selectTab.value === 3 ? '客单均价(元)' : ''}`,
|
||||
splitLine: { show: false }, // 隐藏网格线
|
||||
axisLine: {
|
||||
show: true, // 显示Y轴线
|
||||
lineStyle: {
|
||||
color: '#fff' // 轴线颜色
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 隐藏刻度线（短横线）
|
||||
},
|
||||
axisLabel: {
|
||||
width: 40,
|
||||
overflow: 'truncate',
|
||||
color: '#fff'
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#fff', // 名称颜色
|
||||
padding: [0, 0, 0, 20] // 名称位置调整
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
@ -288,26 +316,42 @@ const handleShowBottomData = async (res: any) => {
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 隐藏刻度小线条
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: `${selectTab.value === 1 ? '营收金额(万元)' : selectTab.value === 2 ? '客单量(万笔)' : selectTab.value === 3 ? '客单均价(元)' : ''}`,
|
||||
type: 'value',
|
||||
name: '万元',
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#fff', // 名称颜色
|
||||
padding: [0, 0, 0, 20] // 名称位置调整
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10', // 增加左侧空间
|
||||
right: '10', // 增加右侧空间
|
||||
bottom: '0',
|
||||
top: '10',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
@ -342,10 +386,9 @@ const handleShowBottomData = async (res: any) => {
|
||||
type: 'line' // 改为线条指示器
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
console.log('paramsparamsparams', params);
|
||||
return `${params.map((item: any) => {
|
||||
return `<div>
|
||||
${item.seriesName}：${item.value}元
|
||||
${item.seriesName}：${item.value}万元
|
||||
</div>`
|
||||
}).join("")}`
|
||||
}
|
||||
@ -398,22 +441,60 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
|
||||
<div class="BusinessCaseRightItem">
|
||||
<div class="rightItemLeft">
|
||||
<div class="BusinessCaseRightItemTop">
|
||||
<div class="rightItemTitle">营收同比</div>
|
||||
<div class="rightItemUpdate">{{ moment().subtract(1, 'd').format('YYYY-MM-DD') }}</div>
|
||||
</div>
|
||||
<div class="BusinessCaseRightItemBottom">
|
||||
<div class="BusinessCaseItemBottomLeft">
|
||||
<div class="compareTitle">相比去年同日</div>
|
||||
<div class="changeBox">
|
||||
<img class="changeIcon" :src="selectTab === 1 ? getAllData?.RevenueAmountYOYRate > 0 ? addIcon : reduce :
|
||||
selectTab === 2 ? getAllData?.TicketCountYOYRate > 0 ? addIcon : reduce :
|
||||
selectTab === 3 ? getAllData?.AvgTicketAmountRate > 0 ? addIcon : reduce : ''
|
||||
" />
|
||||
<div class="changeText" :style="{
|
||||
color: selectTab === 1 ? getAllData?.RevenueAmountYOYRate > 0 ? '#00FF00' : '#D24343' :
|
||||
selectTab === 2 ? getAllData?.TicketCountYOYRate > 0 ? '#00FF00' : '#D24343' :
|
||||
selectTab === 3 ? getAllData?.AvgTicketAmountRate > 0 ? '#00FF00' : '#D24343' : ''
|
||||
}">{{
|
||||
selectTab === 1 ? getAllData?.RevenueAmountYOYRate :
|
||||
selectTab === 2 ? getAllData?.TicketCountYOYRate :
|
||||
selectTab === 3 ? getAllData?.AvgTicketAmountRate : ''
|
||||
}}%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="BusinessCaseItemBottomRight">
|
||||
<div class="BusinessCaseRevenueValue">{{ selectTab === 1 ?
|
||||
getAllData?.RevenueAmount.toLocaleString() :
|
||||
selectTab
|
||||
=== 2 ?
|
||||
getAllData?.TicketCount.toLocaleString() : selectTab === 3 ?
|
||||
getAllData?.AvgTicketAmount.toLocaleString() : ''
|
||||
}}</div>
|
||||
<div class="BusinessCaseRevenueUnit">{{ selectTab===2?'笔':'元' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="rightItemLeft">
|
||||
<div class="rightItemTitleBox">
|
||||
<div class="rightItemTitle">营收同比</div>
|
||||
<div class="rightItemUpdate">{{ moment().subtract(1, 'd').format('YYYY-MM-DD') }}</div>
|
||||
</div>
|
||||
<div class="rightItemBottom">
|
||||
<div class="compareTitle">相比去年同日</div>
|
||||
<div class="changeBox">
|
||||
<img class="changeIcon" />
|
||||
<!-- >0 #00FF00 <0 #FF0000 -->
|
||||
<div class="changeText"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="rightItemRight">
|
||||
<div class="BusinessCaseRevenueValue">3,329,828.91</div>
|
||||
<!-- <div class="rightItemRight">
|
||||
<div class="BusinessCaseRevenueValue"></div>
|
||||
<div class="BusinessCaseRevenueUnit">元</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -61,9 +61,10 @@ onMounted(async () => {
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '车流量',
|
||||
name: '车流量(辆)',
|
||||
nameTextStyle: {
|
||||
color: '#ffffff' // Y轴名称颜色
|
||||
color: '#ffffff', // Y轴名称颜色
|
||||
padding: [0, 0, 0, 20]
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
@ -73,15 +74,18 @@ onMounted(async () => {
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#00F6FF',
|
||||
color: '#fff',
|
||||
formatter: '{value}' // 添加单位
|
||||
}
|
||||
},
|
||||
offset: 0, // 确保Y轴紧贴图表
|
||||
splitNumber: 4,
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '客单量',
|
||||
name: '客单量(笔)',
|
||||
nameTextStyle: {
|
||||
color: '#ffffff' // Y轴名称颜色
|
||||
color: '#ffffff', // Y轴名称颜色
|
||||
padding: [0, 0, 0, 0]
|
||||
},
|
||||
splitLine: { show: false },
|
||||
position: 'right',
|
||||
@ -94,7 +98,8 @@ onMounted(async () => {
|
||||
axisLabel: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
offset: 0 // 确保Y轴紧贴图表
|
||||
offset: 0, // 确保Y轴紧贴图表
|
||||
splitNumber: 4,
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
@ -148,25 +153,31 @@ onMounted(async () => {
|
||||
type: 'line' // 改为线条指示器
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
console.log('paramsparamsparams', params);
|
||||
console.log('resresresres', res);
|
||||
let toolStr: string[] = []
|
||||
if (params && params.length > 0) {
|
||||
params.forEach((item: any) => {
|
||||
toolStr.push(
|
||||
`${item.seriesName}：${item.value}元`
|
||||
)
|
||||
})
|
||||
}
|
||||
console.log('paramsparamsparamsparams', params);
|
||||
|
||||
return `
|
||||
<div>
|
||||
<div>${res.category[params[0].dataIndex]}时</div>
|
||||
${toolStr.map((item: string) => {
|
||||
return `<div>${item}</div>`
|
||||
})}
|
||||
</div>
|
||||
`
|
||||
return `<div>
|
||||
<div>${params[0].name}时：</div>
|
||||
<div>车流量：${params[0]?.value}辆</div>
|
||||
<div>客单量：${params[1]?.value}笔</div>
|
||||
</div>`
|
||||
|
||||
// let toolStr: string[] = []
|
||||
// if (params && params.length > 0) {
|
||||
// params.forEach((item: any) => {
|
||||
// toolStr.push(
|
||||
// `${item.seriesName}：${item.value}元`
|
||||
// )
|
||||
// })
|
||||
// }
|
||||
|
||||
// return `
|
||||
// <div>
|
||||
// <div>${res.category[params[0].dataIndex]}时</div>
|
||||
// ${toolStr.map((item: string) => {
|
||||
// return `<div>${item}</div>`
|
||||
// })}
|
||||
// </div>
|
||||
// `
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -187,10 +198,13 @@ const handleGetData = async () => {
|
||||
|
||||
const req: any = {
|
||||
Province_Code: '530000',
|
||||
// Province_Code: '340000',
|
||||
Statistics_Date: moment().subtract(1, 'd').format('YYYY-MM-DD'),
|
||||
Serverpart_ID: ''
|
||||
}
|
||||
const data = await handleGetTransactionConvert(req)
|
||||
console.log('jfidsafuidsopfjsdflksjdfds', data);
|
||||
|
||||
|
||||
let carList = data.BayonetList.data
|
||||
|
||||
@ -198,7 +212,7 @@ const handleGetData = async () => {
|
||||
|
||||
if (carList && carList.length > 0) {
|
||||
carList.forEach((item: any) => {
|
||||
carResList.push((item[1]).toLocaleString())
|
||||
carResList.push((item[1]))
|
||||
carRealResList.push(item[1])
|
||||
})
|
||||
}
|
||||
@ -206,7 +220,7 @@ const handleGetData = async () => {
|
||||
if (orderList && orderList.length > 0) {
|
||||
orderList.forEach((item: any) => {
|
||||
category.push(item[0])
|
||||
orderResList.push((item[1]).toLocaleString())
|
||||
orderResList.push((item[1]))
|
||||
orderRealResList.push(item[1])
|
||||
})
|
||||
}
|
||||
@ -220,6 +234,9 @@ const handleGetData = async () => {
|
||||
orderResList: orderResList,
|
||||
orderRealResList: orderRealResList
|
||||
}
|
||||
console.log('resresresresres', res);
|
||||
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
|
||||
@ -37,10 +37,9 @@ onMounted(async () => {
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
selectedMode: false,
|
||||
right: 0,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
padding: [0, 0, 0, 5]
|
||||
},
|
||||
@ -55,14 +54,36 @@ onMounted(async () => {
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: "%",
|
||||
splitLine: { show: false } // 隐藏刻度线
|
||||
show: true, // 显式启用 Y 轴（即使默认也建议写上）
|
||||
nameTextStyle: {
|
||||
color: '#fff', // 确保名称颜色可见
|
||||
padding: [0, 0, 0, 0] // 调整名称位置
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
interval: 0,
|
||||
show: true // 显式启用刻度标签
|
||||
},
|
||||
axisLine: {
|
||||
show: true, // 显式启用轴线
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
interval: 0 // 强制显示所有标签
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
},
|
||||
series: res.seriesData,
|
||||
tooltip: {
|
||||
|
||||
@ -58,7 +58,8 @@ onMounted(async () => {
|
||||
type: 'value',
|
||||
name: '客单占比(%)',
|
||||
nameTextStyle: {
|
||||
color: '#fff' // Y轴名称颜色
|
||||
color: '#fff', // Y轴名称颜色
|
||||
padding: [0, 0, 0, 20]
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
|
||||
@ -48,8 +48,6 @@ onMounted(async () => {
|
||||
// type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
// },
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
console.log('params', params);
|
||||
|
||||
return `<div>
|
||||
<div>男性：${res.seriesDataMan[params.dataIndex]}%</div>
|
||||
<div>女性：${res.seriesDataWoman[params.dataIndex]}%</div>
|
||||
@ -65,6 +63,13 @@ onMounted(async () => {
|
||||
axisLabel: {
|
||||
interval: 0, // 强制显示所有标签
|
||||
hideOverlap: false, // 禁止自动隐藏重叠标签
|
||||
color: '#fff',
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true // 保证刻度线与标签对齐
|
||||
@ -76,6 +81,12 @@ onMounted(async () => {
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
},
|
||||
splitNumber: 4
|
||||
},
|
||||
|
||||
@ -62,7 +62,7 @@ const handleShowCharts = async () => {
|
||||
left: '0',
|
||||
right: '10',
|
||||
bottom: '0',
|
||||
top: '10',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
@ -89,6 +89,7 @@ const handleShowCharts = async () => {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '交易额(元)',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '{value}'
|
||||
|
||||
@ -44,6 +44,15 @@ watch(
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
|
||||
// 监听传入的节日
|
||||
watch(
|
||||
() => props.FestivalValue,
|
||||
(newVal, oldVal) => {
|
||||
handleGoMounted()
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
// 初始运行的方法
|
||||
const handleGoMounted = async () => {
|
||||
const res: any = await handleGetData()
|
||||
@ -52,7 +61,6 @@ const handleGoMounted = async () => {
|
||||
if (!chartDom) return;
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
data: ['今年', '去年'], // 对应 series 中的 name
|
||||
@ -68,14 +76,31 @@ const handleGoMounted = async () => {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '{value}' // 刻度值保持纯数字
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '万元',
|
||||
splitLine: { show: false },
|
||||
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '{value}' // 刻度值保持纯数字
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
}
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '10', // 增加左侧空间
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 64px 18px;
|
||||
padding: 20px 54px 18px;
|
||||
|
||||
.GenderCustomerGroupUnit {
|
||||
font-family: "Microsoft YaHei";
|
||||
@ -29,8 +29,8 @@
|
||||
height: 145px;
|
||||
|
||||
.GenderCustomerGroup {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
width: 106px;
|
||||
height: 145px;
|
||||
}
|
||||
|
||||
.legendBox {
|
||||
|
||||
@ -62,7 +62,7 @@ onMounted(async () => {
|
||||
height: 43
|
||||
},
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
top: '21',
|
||||
z: 10
|
||||
}
|
||||
]
|
||||
@ -71,10 +71,9 @@ onMounted(async () => {
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['80%', '100%'],
|
||||
center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
||||
radius: ['60%', '80%'],
|
||||
center: ['50%', '30%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
||||
avoidLabelOverlap: false,
|
||||
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
// 自定义颜色列表
|
||||
@ -91,7 +90,19 @@ onMounted(async () => {
|
||||
},
|
||||
data: res.seriesData
|
||||
}
|
||||
]
|
||||
],
|
||||
legend: {
|
||||
data: ['男性', '女性'],
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
orient: 'horizontal', // 水平排列（默认值，可省略）
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
itemGap: 10, // 调整图例项之间的间距
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -153,7 +164,7 @@ onBeforeUnmount(() => {
|
||||
<div class="GenderCustomerGroup" id="GenderCustomerGroup"></div>
|
||||
|
||||
|
||||
<div class="legendBox">
|
||||
<!-- <div class="legendBox">
|
||||
<div class="legendBoxContent">
|
||||
<div class="legendItem">
|
||||
<div class="legendIcon" style="background-color: #0094FF;"></div>
|
||||
@ -164,7 +175,7 @@ onBeforeUnmount(() => {
|
||||
<div class="legendName">女性</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@ import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import SmallTitle from '../smallTitle/smallTitle.vue'
|
||||
import './MallOrderStatistics.less'
|
||||
import * as echarts from 'echarts/core';
|
||||
import { BarChart } from 'echarts/charts';
|
||||
import { LineChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
@ -12,13 +12,14 @@ import {
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import moment from 'moment';
|
||||
import { handleGetMallOrderSummary } from '../../service';
|
||||
|
||||
// 季月年的选中
|
||||
let selectType = ref<number>(1)
|
||||
|
||||
// 注册组件
|
||||
echarts.use([
|
||||
BarChart,
|
||||
LineChart,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
@ -39,55 +40,98 @@ onMounted(async () => {
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00"],
|
||||
boundaryGap: true,
|
||||
data: res.category,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // X轴线颜色
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 3, // 每隔 2 个显示一个（0,3,6...），因为索引从 0 开始
|
||||
showMinLabel: true, // 显示第一个标签
|
||||
showMaxLabel: true // 显示最后一个标签
|
||||
color: '#fff', // X轴标签颜色
|
||||
interval: 0,
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '交易笔数(笔)',
|
||||
position: 'left',
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff' // 左侧Y轴线颜色（与第一条折线颜色一致）
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff' // 左侧Y轴标签颜色
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#fff', // 左侧Y轴名称颜色
|
||||
padding: [0, 0, 0, 20]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '交易金额(元)',
|
||||
position: 'right',
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff' // 右侧Y轴线颜色（与第二条折线颜色一致）
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff' // 右侧Y轴标签颜色
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#fff', // 右侧Y轴名称颜色
|
||||
padding: [0, 0, 0, 0]
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { show: false } // 隐藏刻度线
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
left: '10', // 左侧间距
|
||||
right: '10', // 右侧间距
|
||||
bottom: '0', // 底部间距
|
||||
top: '10', // 顶部间距
|
||||
containLabel: true // 确保坐标轴标签在grid内
|
||||
left: '0', // 增加左侧空间给Y轴标签
|
||||
right: '10', // 增加右侧空间给Y轴标签
|
||||
bottom: '0',
|
||||
top: '50',
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 180, 200, 210, 300, 200, 180, 160, 30, 80, 90, 70, 45, 35, 67, 12].map((value: any, index: any) => {
|
||||
return {
|
||||
value: value,
|
||||
// 只在显示标签的位置显示symbol
|
||||
symbol: index % 3 === 0 ? 'circle' : 'none',
|
||||
symbolSize: 6
|
||||
}
|
||||
}),
|
||||
realData: res.realData,
|
||||
name: '交易笔数',
|
||||
type: 'line',
|
||||
color: '#FF9500'
|
||||
yAxisIndex: 0, // 关联左侧Y轴
|
||||
data: res.TicketCountData,
|
||||
},
|
||||
{
|
||||
name: '交易金额',
|
||||
type: 'line',
|
||||
yAxisIndex: 1, // 关联右侧Y轴
|
||||
data: res.SellAmountData,
|
||||
}
|
||||
],
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'axis', // 触发类型：坐标轴触发
|
||||
axisPointer: { // 坐标轴指示器配置
|
||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
},
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
// params 是数组，包含当前 hover 的所有系列数据
|
||||
const data = params[0];
|
||||
let realData = res.realData[params[0].dataIndex]
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params: any) {
|
||||
return `
|
||||
<div style="font-weight:bold">${data.name}</div>
|
||||
<div>车流量：${realData + '单'} </div>
|
||||
<div style="font-weight:bold">${params[0].name}</div>
|
||||
<div >${params[0].seriesName}: ${params[0].value}笔</div>
|
||||
<div >${params[1].seriesName}: ${params[1].value}元</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['交易笔数', '交易金额'],
|
||||
top: 0,
|
||||
right: 0,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
color: ['#FF5E5E', '#FF9500']
|
||||
};
|
||||
|
||||
|
||||
@ -105,14 +149,35 @@ const handleChangeType = async (value: number) => {
|
||||
const handleGetData = async () => {
|
||||
|
||||
let category: string[] = []
|
||||
let seriesData: number[] = []
|
||||
let realData: string[] = []
|
||||
let TicketCountData: number[] = [] // 订单笔数
|
||||
let SellAmountData: string[] = [] // 交易金额
|
||||
|
||||
const req: any = {
|
||||
DataType: 2,// 1 日度 2 月度
|
||||
ProvinceCode: '530000',
|
||||
StartMonth: moment().startOf('y').format('YYYYMM'),
|
||||
EndMonth: moment().subtract(1, 'M').format('YYYYMM'),
|
||||
}
|
||||
|
||||
console.log('dkosajdaihfysudafhs', req);
|
||||
|
||||
const data = await handleGetMallOrderSummary(req)
|
||||
|
||||
console.log('gjisayudshfsdafdfdasfasd', data);
|
||||
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
category.push(item.StatisticsMonth)
|
||||
TicketCountData.push(item.TicketCount)
|
||||
SellAmountData.push(item.SellAmount)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
seriesData: seriesData,// y轴的数据
|
||||
realData: realData// 真实数据
|
||||
TicketCountData: TicketCountData,// 订单笔数
|
||||
SellAmountData: SellAmountData// 交易金额
|
||||
}
|
||||
return res
|
||||
}
|
||||
@ -132,16 +197,14 @@ onBeforeUnmount(() => {
|
||||
<template>
|
||||
<div class="MallOrderStatisticsBox">
|
||||
<SmallTitle :title="'商城订单统计'">
|
||||
<template #extra>
|
||||
<!-- <template #extra>
|
||||
<div class="changeTypeBox">
|
||||
<div :class="selectType === 1 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
|
||||
@click="handleChangeType(1)">月</div>
|
||||
<div :class="selectType === 2 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
|
||||
@click="handleChangeType(2)">季</div>
|
||||
<div :class="selectType === 3 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
|
||||
@click="handleChangeType(3)">年</div>
|
||||
@click="handleChangeType(2)">年</div>
|
||||
</div>
|
||||
</template>
|
||||
</template> -->
|
||||
</SmallTitle>
|
||||
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.MerchantRatingRankingItemTopLeftIndex {
|
||||
.MerchantRatingRankingItemIndex {
|
||||
font-family: Impact, Impact;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
@ -35,9 +35,16 @@
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 1px 8px 2px 4px;
|
||||
margin-right: 5px;
|
||||
background-image: url('../../../../assets/image/threeStBg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.MerchantRatingRankingItemIndexAfter {
|
||||
background-image: url('../../../../assets/image/otherStBg.png');
|
||||
}
|
||||
|
||||
.MerchantRatingRankingItemTopLeftName {
|
||||
|
||||
@ -12,7 +12,7 @@ import {
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import './MerchantRatingRanking.less'
|
||||
import moment from 'moment';
|
||||
import { handleGetProvinceMonthAnalysis, handleGetSalesRank } from '../../service';
|
||||
import { handleGetEvaluateResList, handleGetProvinceMonthAnalysis, handleGetSalesRank } from '../../service';
|
||||
|
||||
// 注册组件
|
||||
echarts.use([
|
||||
@ -126,22 +126,32 @@ onMounted(async () => {
|
||||
|
||||
// 拿到热门商品榜单
|
||||
const handleGetData = async () => {
|
||||
|
||||
let category: string[] = ["商品1", "商品2", "商品3", "商品4", "商品5"];
|
||||
let seriesData: number[] = [8.8, 7.5, 6.3, 5.2, 4.1];
|
||||
let realData: string[] = []
|
||||
|
||||
|
||||
|
||||
|
||||
let res = {
|
||||
category: category,// x轴的内容
|
||||
seriesData: seriesData,// y轴的数据
|
||||
realData: realData
|
||||
const req: any = {
|
||||
ProvinceCode: '530000',
|
||||
RoleType: 1,
|
||||
StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM')
|
||||
}
|
||||
|
||||
const data = await handleGetEvaluateResList(req)
|
||||
console.log('djsauhdusahcjksdahvasjkdf', data);
|
||||
|
||||
return res
|
||||
rankList.value = data
|
||||
|
||||
// let category: string[] = ["商品1", "商品2", "商品3", "商品4", "商品5"];
|
||||
// let seriesData: number[] = [8.8, 7.5, 6.3, 5.2, 4.1];
|
||||
// let realData: string[] = []
|
||||
|
||||
|
||||
|
||||
|
||||
// let res = {
|
||||
// category: category,// x轴的内容
|
||||
// seriesData: seriesData,// y轴的数据
|
||||
// realData: realData
|
||||
// }
|
||||
|
||||
|
||||
// return res
|
||||
}
|
||||
|
||||
// const resizeChart = () => {
|
||||
@ -161,21 +171,24 @@ const handleGetData = async () => {
|
||||
<!-- <div class="MerchantRatingRankingCharts" id="MerchantRatingRanking">
|
||||
</div> -->
|
||||
|
||||
<div class="MerchantRatingRankingList">
|
||||
<div class="MerchantRatingRankingList" style="margin-top: 15px;">
|
||||
<div class="MerchantRatingRankingItem" v-for="(item, index) in rankList" :key="index">
|
||||
<div class="MerchantRatingRankingItemTop">
|
||||
<div class="MerchantRatingRankingItemTopLeft">
|
||||
<div class="MerchantRatingRankingItemTopLeftIndex"></div>
|
||||
<div class="MerchantRatingRankingItemTopLeftName"></div>
|
||||
<div
|
||||
:class="index + 1 > 3 ? 'MerchantRatingRankingItemIndex MerchantRatingRankingItemIndexAfter' : 'MerchantRatingRankingItemIndex '">
|
||||
{{ index + 1 }}</div>
|
||||
<div class="MerchantRatingRankingItemTopLeftName">{{ item.UnitName }}</div>
|
||||
</div>
|
||||
<div class="MerchantRatingRankingItemTopRight">
|
||||
|
||||
{{ item.EvaluateScore }}分
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="MerchantRatingRankingItemBottom">
|
||||
<div class="MerchantRatingRankingItemBottomAllProgress">
|
||||
<div class="MerchantRatingRankingItemBottomHaveProgress"></div>
|
||||
<div class="MerchantRatingRankingItemBottomHaveProgress"
|
||||
:style="{ width: item.EvaluateScore + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.ThisMonthBenefitsBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
// padding: 20px 11px 0;
|
||||
padding: 10px 11px 0;
|
||||
|
||||
.ThisMonthBenefitsContent {
|
||||
width: 100%;
|
||||
@ -56,4 +56,19 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.CoreCategoryBox {
|
||||
width: 100%;
|
||||
margin-top: 13px;
|
||||
|
||||
.CoreCategoryCharts {
|
||||
width: 100%;
|
||||
margin-top: 26px;
|
||||
|
||||
.CoreCategory {
|
||||
width: 100%;
|
||||
height: 132px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,171 @@
|
||||
<script setup lang="ts">
|
||||
import './ThisMonthBenefits.less'
|
||||
import bussinessIcon from '../../../../assets/image/bussinessIcon.png'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import { handleGetWelFareSummary } from '../../service';
|
||||
import SmallTitle from '../smallTitle/smallTitle.vue';
|
||||
import moment from 'moment';
|
||||
import * as echarts from 'echarts/core';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GraphicComponent
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import businessFormatCenterIcon from '../../../../assets/image/businessFormatCenterIcon.png'
|
||||
|
||||
|
||||
// 注册组件
|
||||
echarts.use([
|
||||
PieChart,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GraphicComponent,
|
||||
CanvasRenderer
|
||||
]);
|
||||
|
||||
let myChart: echarts.ECharts;
|
||||
|
||||
// 自定义颜色列表
|
||||
const colorList = ['#FF9500', '#00FFB7', '#0094FF', '#7D4CD2', '#69BCFF'];
|
||||
|
||||
// 拿到的实际数据
|
||||
let allRealData = ref<any>()
|
||||
|
||||
onMounted(async () => {
|
||||
const res: any = await handleGetData()
|
||||
|
||||
const chartDom = document.getElementById('CoreCategory');
|
||||
if (!chartDom) return;
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'item', // 触发类型：坐标轴触发
|
||||
axisPointer: { // 坐标轴指示器配置
|
||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
},
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
return `
|
||||
<div style="font-weight:bold">${params.data.name} ${params?.percent}% ${res.realData[params.dataIndex]}</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
legend: { // 新增图例配置
|
||||
show: true, // 显示图例
|
||||
orient: 'vertical', // 垂直排列
|
||||
left: '40%', // 距离左侧的距离
|
||||
top: 0, // 顶部对齐
|
||||
// type: 'scroll',
|
||||
textStyle: { // 图例文字样式
|
||||
color: '#fff', // 文字颜色设为白色
|
||||
fontSize: 12 // 可自定义字体大小
|
||||
},
|
||||
formatter: function (name: string) { // 自定义图例文本
|
||||
// 从 res.seriesData 中找到对应的数据项
|
||||
const dataItem = res.seriesData.find((item: any) => item.name === name);
|
||||
// 返回自定义格式的文本，例如："名称 (值)"
|
||||
return `${name} (${dataItem?.percent || 0}%)`;
|
||||
// 或者使用其他自定义格式，比如：
|
||||
// return `${name}: ${res.realData[res.seriesData.findIndex(item => item.name === name)]}`;
|
||||
}
|
||||
},
|
||||
graphic: { // 关键配置：在图表中心添加图片
|
||||
elements: [
|
||||
{
|
||||
type: 'image',
|
||||
style: {
|
||||
image: businessFormatCenterIcon,
|
||||
width: 83,
|
||||
height: 83
|
||||
},
|
||||
left: '25',
|
||||
top: '25',
|
||||
z: 10
|
||||
}
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['85%', '100%'],
|
||||
center: ['20%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
// itemStyle: {
|
||||
// color: function (params: any) {
|
||||
// return colorList[params.dataIndex];
|
||||
// }
|
||||
// },
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.seriesData
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
const handleGetData = async () => {
|
||||
const req: any = {
|
||||
ProvinceCode: '530000',
|
||||
StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM')
|
||||
}
|
||||
const data = await handleGetWelFareSummary(req)
|
||||
|
||||
console.log('fjidsfhasjfasdfdsf', data);
|
||||
|
||||
|
||||
let seriesData: any = []
|
||||
let realData: any = []
|
||||
let category: any = []
|
||||
|
||||
allRealData.value = data
|
||||
|
||||
let list: any = data.WelFareGoodsTypeList.slice(0, 5)
|
||||
if (list && list.length > 0) {
|
||||
let sum: number = 0
|
||||
list.forEach((item: any) => {
|
||||
sum += item.GoodsCount
|
||||
})
|
||||
|
||||
|
||||
list.forEach((item: any) => {
|
||||
category.push(item.GoodsTypeName)
|
||||
seriesData.push({ name: item.GoodsTypeName, value: item.GoodsCount, percent: ((item.GoodsCount / sum) * 100).toFixed(2) })
|
||||
})
|
||||
}
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
seriesData: seriesData,// y轴的数据
|
||||
realData: realData// 真实数据
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -16,9 +179,18 @@ import bussinessIcon from '../../../../assets/image/bussinessIcon.png'
|
||||
</div>
|
||||
|
||||
<div class="ThisMonthBenefitsContentRight">
|
||||
<span class="thisMonthValue">8888</span>
|
||||
<span class="thisMonthValue">{{ allRealData?.value.distributeAmount || '0' }}</span>
|
||||
<span class="thisMonthUnit">元</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="CoreCategoryBox">
|
||||
<SmallTitle title="核心品类占比" />
|
||||
|
||||
<div class="CoreCategoryCharts">
|
||||
<div class="CoreCategory" id="CoreCategory"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -4,6 +4,54 @@
|
||||
// padding: 0 20px;
|
||||
// margin-top: 20px;
|
||||
|
||||
.TradingAlertBox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.TradingAlertItem {
|
||||
width: calc((100% - 10px)/2);
|
||||
box-sizing: border-box;
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.TradingAlertItemLeft {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin-right: 10px;
|
||||
|
||||
.TradingAlertItemLeftIcon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.TradingAlertItemRight {
|
||||
flex: 1;
|
||||
.TradingAlertItemRightLabel {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.TradingAlertItemRightValue {
|
||||
font-family: Impact, Impact;
|
||||
font-weight: 400;
|
||||
font-size: 25px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.TradingAlertListBox {
|
||||
width: 100%;
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import './TradingAlert.less'
|
||||
import SmallTitle from '../smallTitle/smallTitle.vue'
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { handleGetCurrentEarlyWarning, handleGetEarlyWarning } from '../../service';
|
||||
|
||||
// 交易预警数据
|
||||
let TradingAlertList = reactive<any>([])
|
||||
// 交易预警的其他信息内容
|
||||
let TradingOtherData = ref<any>()
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
// 请求数据
|
||||
await handleGetData()
|
||||
|
||||
@ -28,10 +29,12 @@ const handleGetData = async () => {
|
||||
}
|
||||
const data = await handleGetCurrentEarlyWarning(req)
|
||||
|
||||
console.log('skodpijasidjaslfddfas', data);
|
||||
|
||||
if (data && data.length > 0) {
|
||||
let list = data.slice(0, 5)
|
||||
TradingOtherData.value = data.OtherData
|
||||
|
||||
if (data.List && data.List.length > 0) {
|
||||
let list = data.List.slice(0, 10)
|
||||
TradingAlertList.length = 0;
|
||||
list && list.forEach((item: any) => TradingAlertList.push(item));
|
||||
} else {
|
||||
@ -46,6 +49,29 @@ const handleGetData = async () => {
|
||||
<div class="TradingAlertBox">
|
||||
<SmallTitle :title="'交易预警'"></SmallTitle>
|
||||
|
||||
<div class="TradingAlertBox">
|
||||
<div class="TradingAlertItem">
|
||||
<div class="TradingAlertItemLeft">
|
||||
<div class="TradingAlertItemLeftIcon"></div>
|
||||
</div>
|
||||
<div class="TradingAlertItemRight">
|
||||
<div class="TradingAlertItemRightLabel">必查项</div>
|
||||
<div class="TradingAlertItemRightValue">{{ TradingOtherData?.value || '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="TradingAlertItem">
|
||||
<div class="TradingAlertItemLeft">
|
||||
<div class=""></div>
|
||||
</div>
|
||||
<div class="TradingAlertItemRight">
|
||||
<div class="TradingAlertItemRightLabel">抽查项</div>
|
||||
<div class="TradingAlertItemRightValue">{{ TradingOtherData?.data || '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="TradingAlertListBox">
|
||||
<div class="TradingAlertItem" v-for="(item, index) in TradingAlertList" :key="index"
|
||||
:style="{ backgroundColor: index % 2 === 0 ? 'rgba(22, 28, 47, 1)' : 'rgba(0, 0, 0, 0.2)' }">
|
||||
|
||||
@ -12,7 +12,7 @@ import {
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import './TrendOfTrafficFlow.less'
|
||||
import moment from 'moment';
|
||||
import { handleGetProvinceMonthAnalysis } from '../../service';
|
||||
import { handleGetMonthAnalysis, handleGetProvinceMonthAnalysis } from '../../service';
|
||||
|
||||
// 注册组件
|
||||
echarts.use([
|
||||
@ -60,23 +60,35 @@ const handleGoMounted = async () => {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
overflow: 'truncate', // 超出部分显示为省略号
|
||||
ellipsis: '...', // 自定义省略符号（可选）
|
||||
interval: 0 // 强制显示所有标签
|
||||
// rotate: 30, // 标签旋转30度（防止重叠）
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 x 轴线颜色为白色（可选）
|
||||
}
|
||||
}
|
||||
// data: res.category
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '万辆', // 仅在此处显示单位
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
color: '#fff',
|
||||
padding: [0, 30, 0, 0] // 调整单位位置
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '{value}' // 刻度值保持纯数字
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
splitLine: { show: false }
|
||||
},
|
||||
series: [
|
||||
@ -97,27 +109,13 @@ const handleGoMounted = async () => {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
// 动态返回渐变颜色
|
||||
color: function (params: any) {
|
||||
const index = params.dataIndex; // 当前数据的索引
|
||||
// 前3条（Mon, Tue, Wed）使用渐变1
|
||||
if (index < 3) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1, // 渐变方向（垂直）
|
||||
[
|
||||
{ offset: 0, color: '#FF4F00' }, // 渐变起始色
|
||||
{ offset: 1, color: '#D3B70E' } // 渐变结束色
|
||||
]
|
||||
);
|
||||
}
|
||||
// 后3条（Thu, Fri, Sat）使用渐变2
|
||||
else {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: '#018FFF' }, // 渐变起始色
|
||||
{ offset: 1, color: '#00F4FF' } // 渐变结束色
|
||||
]
|
||||
);
|
||||
}
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: '#018FFF' }, // 渐变起始色
|
||||
{ offset: 1, color: '#00F4FF' } // 渐变结束色
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -154,25 +152,43 @@ const handleGoMounted = async () => {
|
||||
|
||||
// 拿到断面流量数据
|
||||
const handleGetSectionFlowCount = async () => {
|
||||
const req: any = {
|
||||
// StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
|
||||
StatisticsMonth: "202504",
|
||||
Serverpart_ID: props.currentService?.SERVERPART_ID || "",
|
||||
SortStr: "SectionFlow_Count desc",
|
||||
ProvinceCode: "530000"
|
||||
}
|
||||
let data = await handleGetProvinceMonthAnalysis(req)
|
||||
// const req: any = {
|
||||
// // StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
|
||||
// StatisticsMonth: "202504",
|
||||
// Serverpart_ID: props.currentService?.SERVERPART_ID || "",
|
||||
// SortStr: "SectionFlow_Count desc",
|
||||
// ProvinceCode: "530000"
|
||||
// }
|
||||
// let data = await handleGetProvinceMonthAnalysis(req)
|
||||
|
||||
let list = data.slice(0, 5)
|
||||
const req: any = {
|
||||
ProvinceCode: '530000',
|
||||
StatisticsDate: moment().format('YYYY-MM-DD'),
|
||||
StartDate: moment().startOf('y').format('YYYY-MM-DD'),
|
||||
EndDate: moment().endOf('M').format('YYYY-MM-DD'),
|
||||
}
|
||||
let data = await handleGetMonthAnalysis(req)
|
||||
console.log('fdjisfhhusahfdskf', data);
|
||||
|
||||
|
||||
// let list = data.slice(0, 5)
|
||||
let category: string[] = []
|
||||
let seriesData: number[] = []
|
||||
let realData: string[] = []
|
||||
|
||||
list.forEach((item: any) => {
|
||||
category.push(item.Serverpart_Name.split('服务区')[0])
|
||||
seriesData.push(Number((item.SectionFlow_Count / 10000).toFixed(2)))
|
||||
realData.push(item.SectionFlow_Count.toLocaleString())
|
||||
})
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
category.push(`${item.Statistics_Month}月`)
|
||||
seriesData.push(Number((item.SectionFlow_Count / 10000).toFixed(2)))
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// list.forEach((item: any) => {
|
||||
// category.push(item.Serverpart_Name.split('服务区')[0])
|
||||
// seriesData.push(Number((item.SectionFlow_Count / 10000).toFixed(2)))
|
||||
// realData.push(item.SectionFlow_Count.toLocaleString())
|
||||
// })
|
||||
|
||||
let res = {
|
||||
category: category,// x轴的内容
|
||||
@ -181,7 +197,6 @@ const handleGetSectionFlowCount = async () => {
|
||||
}
|
||||
|
||||
return res
|
||||
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
@ -196,7 +211,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
<template>
|
||||
<div class="TrendOfTrafficFlowBox">
|
||||
<SmallTitle :title="`车流断面趋势(04月)`" />
|
||||
<SmallTitle :title="`断面流量趋势`" />
|
||||
|
||||
<div class="TrendOfTrafficFlowCharts">
|
||||
<div class="TrendOfTrafficFlow" id="TrendOfTrafficFlow"></div>
|
||||
|
||||
@ -3,7 +3,7 @@ import SmallTitle from '../smallTitle/smallTitle.vue'
|
||||
import './VehicleModelStay.less'
|
||||
import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
|
||||
import * as echarts from 'echarts/core';
|
||||
import { LineChart } from 'echarts/charts';
|
||||
import { BarChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
@ -12,11 +12,11 @@ import {
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import moment from 'moment';
|
||||
import { handleGetBayonetSTAnalysis, handleGetTransactionConvert, handleGetTransactionTimeAnalysis } from '../../service';
|
||||
import { handleGetBayonetSTAnalysis, handleGetRevenueTrend, handleGetTransactionConvert, handleGetTransactionTimeAnalysis } from '../../service';
|
||||
|
||||
// 注册组件
|
||||
echarts.use([
|
||||
LineChart,
|
||||
BarChart,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
@ -63,20 +63,40 @@ const handleGoMounted = async () => {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
axisLabel: {
|
||||
interval: 1, // 改为隔1个显示1个（原为3）
|
||||
interval: 0, // 改为0表示显示所有刻度
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true
|
||||
showMaxLabel: true,
|
||||
color: '#fff', // x轴标签颜色
|
||||
fontSize: 12 // 可调整字体大小防止重叠
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // x轴线颜色
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true // 保证刻度线和标签对齐
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '停留时长',
|
||||
splitLine: { show: false },
|
||||
name: '营收金额(万元)',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
padding: [0, 30, 0, 0] // 调整单位位置
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff' // y轴线颜色
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff', // y轴标签颜色
|
||||
formatter: '{value}' // 添加单位
|
||||
}
|
||||
}
|
||||
@ -90,74 +110,50 @@ const handleGoMounted = async () => {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '小型车',
|
||||
data: res?.smallCarData && res?.smallCarData.map((value: any, index: any) => ({
|
||||
value: value,
|
||||
symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: '#0094FF', // 纯色填充
|
||||
borderWidth: 0 // 无边框
|
||||
}
|
||||
})),
|
||||
type: 'line',
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#0094FF'
|
||||
},
|
||||
name: `${res.currentYear}年营收`,
|
||||
data: res?.seriesData || [],
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
color: '#008CFF' // 直接指定颜色
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '中型车',
|
||||
data: res?.middleCarData && res?.middleCarData.map((value: any, index: any) => ({
|
||||
value: value,
|
||||
symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: '#7D4CD2', // 纯色填充
|
||||
borderWidth: 0 // 无边框
|
||||
}
|
||||
})),
|
||||
type: 'line',
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#7D4CD2'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '大型车',
|
||||
data: res?.bigCarData && res?.bigCarData.map((value: any, index: any) => ({
|
||||
value: value,
|
||||
symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: '#00FFB7', // 纯色填充
|
||||
borderWidth: 0 // 无边框
|
||||
}
|
||||
})),
|
||||
type: 'line',
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#00FFB7'
|
||||
},
|
||||
name: `${res.lastYear}年营收`,
|
||||
data: res?.seriesDataLastYear || [],
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
color: '#69BCFF' // 直接指定颜色
|
||||
}
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line' // 改为线条指示器
|
||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
let result = params[0].axisValue + '<br/>';
|
||||
params.forEach((item: any, index: number) => {
|
||||
result += `${item.marker} ${item.seriesName}: ${index === 0 ? res?.realData[item.dataIndex] : res?.realDataLastYear[item.dataIndex]}元<br/>`;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['小型车', '中型车', '大型车'], // 确保图例显示
|
||||
textStyle: { color: '#fff' }, // 图例文字颜色
|
||||
right: '0', // 距离右侧4%的位置
|
||||
top: '0',
|
||||
}
|
||||
|
||||
data: [`${res.currentYear}年营收`, `${res.lastYear}年营收`], // 使用动态名称
|
||||
textStyle: {
|
||||
color: '#fff', // 图例文字颜色
|
||||
fontSize: 12
|
||||
},
|
||||
right: '0', // 距离右侧10px
|
||||
top: '0', // 距离顶部10px
|
||||
},
|
||||
color: ['#008CFF', '#69BCFF'] // 只需要两个颜色对应两个系列
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
@ -168,57 +164,54 @@ const handleGoMounted = async () => {
|
||||
|
||||
// 拿到数据的方法
|
||||
const handleGetData = async () => {
|
||||
let category: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
|
||||
// let seriesData: number[] = []
|
||||
// let realData: string[] = []
|
||||
let smallCarData: number[] = []
|
||||
let middleCarData: number[] = []
|
||||
let bigCarData: number[] = []
|
||||
let category: number[] = []
|
||||
let seriesData: number[] = []
|
||||
let realData: string[] = []
|
||||
let seriesDataLastYear: number[] = []
|
||||
let realDataLastYear: string[] = []
|
||||
|
||||
|
||||
const req: any = {
|
||||
StartMonth: moment().subtract(1, 'd').format('YYYYMM'),
|
||||
EndMonth: moment().subtract(1, 'd').format('YYYYMM'),
|
||||
Province_Code: '340000',
|
||||
TimeSpan: 1,
|
||||
StatisticsDate: moment().format('YYYY'),
|
||||
ProvinceCode: '340000',
|
||||
StatisticsType: 4,
|
||||
}
|
||||
console.log('reqreqreqreqreq', req);
|
||||
|
||||
searchTime.value = moment(req.StartMonth).format('MM')
|
||||
const data = await handleGetBayonetSTAnalysis(req)
|
||||
|
||||
console.log('fdsjifjasifjdsnafsdvbhcav', data);
|
||||
const data = await handleGetRevenueTrend(req)
|
||||
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
if (item.name === '小型车') {
|
||||
if (item.data && item.data.length > 0) {
|
||||
item.data.forEach((subItem: any) => {
|
||||
smallCarData.push(subItem[1])
|
||||
})
|
||||
}
|
||||
} else if (item.name === '中型车') {
|
||||
if (item.data && item.data.length > 0) {
|
||||
item.data.forEach((subItem: any) => {
|
||||
middleCarData.push(subItem[1])
|
||||
})
|
||||
}
|
||||
} else if (item.name === '大型车') {
|
||||
if (item.data && item.data.length > 0) {
|
||||
item.data.forEach((subItem: any) => {
|
||||
bigCarData.push(subItem[1])
|
||||
})
|
||||
}
|
||||
}
|
||||
category.push(item.name)
|
||||
seriesData.push(Number((Number(item.value) / 10000).toFixed(2)))
|
||||
realData.push(Number(item.value).toLocaleString())
|
||||
})
|
||||
}
|
||||
|
||||
const lastYearReq: any = {
|
||||
StatisticsDate: moment().subtract(1, 'y').format('YYYY'),
|
||||
ProvinceCode: '340000',
|
||||
StatisticsType: 4,
|
||||
}
|
||||
const lastYearData = await handleGetRevenueTrend(lastYearReq)
|
||||
|
||||
if (lastYearData && lastYearData.length > 0) {
|
||||
lastYearData.forEach((item: any) => {
|
||||
seriesDataLastYear.push(Number((Number(item.value) / 10000).toFixed(2)))
|
||||
realDataLastYear.push(Number(item.value).toLocaleString())
|
||||
})
|
||||
}
|
||||
|
||||
console.log('datadatadatadatadatadatadata', data);
|
||||
console.log('lastYearDatalastYearDatalastYearDatalastYearDatalastYearData', lastYearData);
|
||||
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
// seriesData: seriesData,// y轴的数据
|
||||
// realData: realData// 真实数据
|
||||
smallCarData: smallCarData,
|
||||
middleCarData: middleCarData,
|
||||
bigCarData: bigCarData,
|
||||
seriesData: seriesData,// 今年的数据
|
||||
realData: realData,// 今年的实际数据
|
||||
seriesDataLastYear: seriesDataLastYear,// 去年的数据
|
||||
realDataLastYear: realDataLastYear,// 去年的实际数据
|
||||
currentYear: moment().format('YYYY'),
|
||||
lastYear: moment().subtract(1, 'y').format('YYYY')
|
||||
}
|
||||
return res
|
||||
}
|
||||
@ -238,7 +231,8 @@ onBeforeUnmount(() => {
|
||||
|
||||
<template>
|
||||
<div class="VehicleModelStayBox">
|
||||
<SmallTitle :title="`车型停留分析/日均${searchTime ? `(${searchTime}月)` : ''}`"></SmallTitle>
|
||||
<!-- <SmallTitle :title="`车型停留分析/日均${searchTime ? `(${searchTime}月)` : ''}`"></SmallTitle> -->
|
||||
<SmallTitle :title="`经营效益趋势`"></SmallTitle>
|
||||
|
||||
<div class="VehicleModelStayCharts" style="margin-top:15px">
|
||||
<div class="VehicleModelStay" id="VehicleModelStay"></div>
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
font-style: normal;
|
||||
padding-left: 8px;
|
||||
position: absolute;
|
||||
top: -10px;right: 0;
|
||||
top: -10px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.VehiclesEntering {
|
||||
@ -24,4 +25,16 @@
|
||||
height: 190px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.TrendCustomerRevenueCharts {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
|
||||
.TrendCustomerRevenue {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -26,6 +26,7 @@ echarts.use([
|
||||
]);
|
||||
|
||||
let myChart: echarts.ECharts;
|
||||
let myChart2: echarts.ECharts;
|
||||
|
||||
onMounted(async () => {
|
||||
await handleGoMounted()
|
||||
@ -52,15 +53,25 @@ const handleGoMounted = async () => {
|
||||
if (!chartDom) return;
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const chartDom2 = document.getElementById('TrendCustomerRevenue');
|
||||
if (!chartDom2) return;
|
||||
myChart2 = echarts.init(chartDom2);
|
||||
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
trigger: 'axis', // 触发类型：坐标轴触发
|
||||
axisPointer: { // 坐标轴指示器配置
|
||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
},
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
return `<div>
|
||||
<div>${params[0].seriesName}：${res?.realDataCar[params[0]?.dataIndex].toLocaleString()}辆</div>
|
||||
<div>${params[1].seriesName}：${res?.yesRealDataCar[params[1]?.dataIndex].toLocaleString()}辆</div>
|
||||
</div>`
|
||||
// return `
|
||||
// <div>车流量：${realData ? realData + '辆' : data.value + '万辆'} </div>
|
||||
// `;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
@ -87,29 +98,46 @@ const handleGoMounted = async () => {
|
||||
data: res.category,
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '{value}' // 刻度值保持纯数字
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '车流量(万辆)',
|
||||
splitLine: { show: false },
|
||||
name: '万辆', // 仅在此处显示单位
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
color: '#fff',
|
||||
padding: [0, 30, 0, 0] // 调整单位位置
|
||||
},
|
||||
splitNumber: 4,
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '交易金额(万元)',
|
||||
splitLine: { show: false },
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
padding: [0, 0, 0, 30] // 调整单位位置
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '{value}' // 刻度值保持纯数字
|
||||
},
|
||||
splitNumber: 4,
|
||||
}
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
splitLine: { show: false }
|
||||
},
|
||||
// {
|
||||
// type: 'value',
|
||||
// name: '交易金额(万元)',
|
||||
// splitLine: { show: false },
|
||||
// nameTextStyle: {
|
||||
// color: '#666',
|
||||
// padding: [0, 0, 0, 30] // 调整单位位置
|
||||
// },
|
||||
// splitNumber: 4,
|
||||
// }
|
||||
],
|
||||
series: [
|
||||
{
|
||||
@ -133,11 +161,107 @@ const handleGoMounted = async () => {
|
||||
borderRadius: [3, 3, 0, 0]
|
||||
}
|
||||
},
|
||||
// {
|
||||
// name: `${res.currentYear}年交易额`,
|
||||
// type: 'line',
|
||||
// data: res.seriesDataRevenue,
|
||||
// yAxisIndex: 1,
|
||||
// symbol: 'circle',
|
||||
// symbolSize: 6,
|
||||
// lineStyle: {
|
||||
// width: 2
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// name: `${res.yesYear}年交易额`,
|
||||
// type: 'line',
|
||||
// data: res.yesSeriesDataRevenue,
|
||||
// yAxisIndex: 1,
|
||||
// symbol: 'circle',
|
||||
// symbolSize: 6,
|
||||
// lineStyle: {
|
||||
// width: 2
|
||||
// }
|
||||
// }
|
||||
],
|
||||
color: ['#008CFF', '#69BCFF', '#FF5E5E', '#FF9500'] // Custom colors for each series
|
||||
};
|
||||
|
||||
|
||||
const option2 = {
|
||||
tooltip: {
|
||||
trigger: 'axis', // 触发类型：坐标轴触发
|
||||
axisPointer: { // 坐标轴指示器配置
|
||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
},
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
return `<div>
|
||||
<div>${params[0].seriesName}：${res?.realDataRevenue[params[0]?.dataIndex].toLocaleString()}元</div>
|
||||
<div>${params[1].seriesName}：${res?.yesRealDataRevenue[params[1]?.dataIndex].toLocaleString()}元</div>
|
||||
</div>`
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [`${res.currentYear}年交易额`, `${res.yesYear}年交易额`],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12 // 设置图例文字大小为12px
|
||||
},
|
||||
right: '4%',
|
||||
top: '0%',
|
||||
orient: 'horizontal',
|
||||
type: 'scroll' // 如果图例过长，启用滚动
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '0',
|
||||
bottom: '0',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: res.category,
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '{value}' // 刻度值保持纯数字
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '交易金额(万元)',
|
||||
splitLine: { show: false },
|
||||
splitNumber: 4,
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
padding: [0, 0, 0, 10] // 调整单位位置
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '{value}' // 刻度值保持纯数字
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||
}
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: `${res.currentYear}年交易额`,
|
||||
type: 'line',
|
||||
data: res.seriesDataRevenue,
|
||||
yAxisIndex: 1,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
@ -148,7 +272,6 @@ const handleGoMounted = async () => {
|
||||
name: `${res.yesYear}年交易额`,
|
||||
type: 'line',
|
||||
data: res.yesSeriesDataRevenue,
|
||||
yAxisIndex: 1,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
@ -156,11 +279,17 @@ const handleGoMounted = async () => {
|
||||
}
|
||||
}
|
||||
],
|
||||
color: ['#008CFF', '#69BCFF', '#FF5E5E', '#FF9500'] // Custom colors for each series
|
||||
};
|
||||
color: ['#FF5E5E', '#FF9500']
|
||||
}
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart2.setOption(option2);
|
||||
|
||||
myChart.resize();
|
||||
myChart2.resize();
|
||||
|
||||
window.addEventListener('resize', resizeChart);
|
||||
window.addEventListener('resize', resizeChart2);
|
||||
}
|
||||
|
||||
// 拿到入区车辆的趋势
|
||||
@ -197,7 +326,7 @@ const handleGetSectionFlowCount = async () => {
|
||||
console.log('dnasfhuaidhsdaghsakjlhsldk', data);
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
category.push(`${item.Statistics_Month < 10 ? '0' + item.Statistics_Month : item.Statistics_Month}`)
|
||||
category.push(`${item.Statistics_Month < 10 ? '0' + item.Statistics_Month : item.Statistics_Month}月`)
|
||||
seriesDataCar.push(Number((item.Vehicle_Count / 10000).toFixed(2)))
|
||||
realDataCar.push(item.Vehicle_Count)
|
||||
seriesDataRevenue.push(Number((item.RevenueAmount / 10000).toFixed(2)))
|
||||
@ -246,10 +375,13 @@ const handleGetSectionFlowCount = async () => {
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
const resizeChart2 = () => {
|
||||
myChart2?.resize();
|
||||
};
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
myChart2?.dispose();
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -259,7 +391,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
<template>
|
||||
<div class="VehiclesEnteringBox">
|
||||
<SmallTitle :title="'月度车流累计'">
|
||||
<SmallTitle :title="'入区车流趋势'">
|
||||
<!-- <template #extra>
|
||||
<div class="legendBox" style="display: flex;align-items: center;">
|
||||
<div class="legendItem" style="display: flex;align-items: center;margin-right: 20px;">
|
||||
@ -288,5 +420,13 @@ onBeforeUnmount(() => {
|
||||
<!-- <div class="VehiclesEnteringUnit">辆</div> -->
|
||||
<div class="VehiclesEntering" id="VehiclesEntering"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<SmallTitle :title="'对客营收趋势'" style="margin-top: 23px;" />
|
||||
|
||||
<div class="TrendCustomerRevenueCharts">
|
||||
<div class="TrendCustomerRevenue" id="TrendCustomerRevenue"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -206,7 +206,8 @@ onBeforeUnmount(() => {
|
||||
<div class="leftTabBox">
|
||||
<div :class="selectPageTab === 3 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
|
||||
@click="handleChangePageTab(3)">财务中枢</div>
|
||||
<div :class="selectPageTab === 4 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'">彩云驿出行</div>
|
||||
<div :class="selectPageTab === 4 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
|
||||
@click="handleChangePageTab(4)">彩云驿出行</div>
|
||||
<!-- @click="handleChangePageTab(4)" -->
|
||||
</div>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { onMounted, ref } from 'vue';
|
||||
import './supplierListBox.less'
|
||||
import shopIcon from '../../../../assets/image/shopIcon.png'
|
||||
import { handleGetSupplierList } from '../../service';
|
||||
import { handleGetSupplierList, handleGetSupplierListChain } from '../../service';
|
||||
|
||||
|
||||
// 供应商列表
|
||||
@ -20,7 +20,9 @@ const handleGetData = async () => {
|
||||
ProvinceCode: "530000",
|
||||
StatisticsMonth: "202505"
|
||||
}
|
||||
const data = await handleGetSupplierList(req)
|
||||
const data = await handleGetSupplierListChain(req)
|
||||
console.log('handleGetSupplierListChainhandleGetSupplierListChain', data);
|
||||
|
||||
supplierList.value = data.slice(0, 9)
|
||||
}
|
||||
|
||||
|
||||
@ -57,6 +57,7 @@ import AnnualAccountsReceivable from './components/AnnualAccountsReceivable/Annu
|
||||
import DetailedPayment from './components/DetailedPayment/DetailedPayment.vue';
|
||||
import DailyInspection from './components/DailyInspection/DailyInspection.vue';
|
||||
import AssessmentScoringRanking from './components/AssessmentScoringRanking/AssessmentScoringRanking.vue';
|
||||
import SmallTitle from './components/smallTitle/smallTitle.vue';
|
||||
|
||||
|
||||
// 页面样式
|
||||
@ -113,52 +114,27 @@ const handleChangePageTab = (value: number) => {
|
||||
</div>
|
||||
|
||||
<!-- 分区一 -->
|
||||
<div class="content169" v-if="selectPageTab === 1 || selectPageTab === 3">
|
||||
<div class="content169" v-show="selectPageTab === 1">
|
||||
<div class="content169Left">
|
||||
<!-- 消息轮播框 -->
|
||||
<NoticeListBox :currentService="currentService" />
|
||||
|
||||
<template v-if="selectPageTab === 1">
|
||||
<!-- <modalTitle :title="'流量趋势'" style="margin-top: 20px;" /> -->
|
||||
<div class="content169LeftContent">
|
||||
<!-- 服务区概况 -->
|
||||
<OverviewOfServiceArea />
|
||||
|
||||
<NewBigTitleBox :title="'管理运营监控'" style="margin-top: 15px;" />
|
||||
|
||||
<!-- 今日走势图 -->
|
||||
<TodayTrend />
|
||||
|
||||
<!-- 服务区繁忙排行 交易排行 -->
|
||||
<BusyTradingRanking style="margin-top: 11px;" />
|
||||
|
||||
<!-- 交易预警 -->
|
||||
<!-- <TradingAlert style="margin-top: 11px;" /> -->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<template v-if="selectPageTab === 3">
|
||||
<NewBigTitleBox title="应收账款" style="margin-top: 20px;" />
|
||||
|
||||
<div style="width: 100%;box-sizing: border-box;padding: 20px 11px;">
|
||||
|
||||
<!-- 合同信息 -->
|
||||
<ContractInformation />
|
||||
|
||||
<!-- 收款完成进度 -->
|
||||
<PaymentProgress style="margin-top: 24px;" />
|
||||
|
||||
<!-- 收款预警 -->
|
||||
<AccountsReceivableWarning style="margin-top: 24px;" />
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
<!-- <modalTitle :title="'流量趋势'" style="margin-top: 20px;" /> -->
|
||||
<div class="content169LeftContent">
|
||||
<!-- 服务区概况 -->
|
||||
<OverviewOfServiceArea />
|
||||
|
||||
<NewBigTitleBox :title="'特情事件'" style="margin-top: 15px;" />
|
||||
|
||||
<!-- 今日走势图 -->
|
||||
<!-- <TodayTrend /> -->
|
||||
|
||||
<!-- 服务区繁忙排行 交易排行 -->
|
||||
<!-- <BusyTradingRanking style="margin-top: 11px;" /> -->
|
||||
|
||||
<!-- 交易预警 -->
|
||||
<TradingAlert style="margin-top: 11px;" />
|
||||
</div>
|
||||
|
||||
<!-- <modalTitle :title="'节假日营收分析'" style="margin-top: 20px;">
|
||||
<template #extra>
|
||||
@ -186,61 +162,38 @@ const handleChangePageTab = (value: number) => {
|
||||
<!-- <AnnouncementTopic style="position: relative;z-index: 9;" /> -->
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content169Right">
|
||||
<!-- 时间天气等内容 -->
|
||||
<BasicMessageBox :currentService="currentService" />
|
||||
|
||||
<template v-if="selectPageTab === 1">
|
||||
<NewBigTitleBox title="流量趋势" style="margin-top: 24px;" />
|
||||
<NewBigTitleBox title="流量趋势" style="margin-top: 24px;" />
|
||||
|
||||
<div class="content169LeftContent" style="margin-top: 21px;">
|
||||
<div class="leftContentBoxItem">
|
||||
<!-- 车流断面趋势 -->
|
||||
<TrendOfTrafficFlow :currentService="currentService" />
|
||||
</div>
|
||||
|
||||
<div class="leftContentBoxItem" style="margin-top: 23px;">
|
||||
<!-- 入区车辆趋势 -->
|
||||
<VehiclesEntering :currentService="currentService" />
|
||||
</div>
|
||||
|
||||
<div class="leftContentBoxItem" style="margin-top: 30px;">
|
||||
<!-- 客流变化 -->
|
||||
<PassengerFlowChanges :currentService="currentService" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="leftContentBoxItem" style="margin-top: 33px;">
|
||||
<!-- 车型停留分析 / 日均 -->
|
||||
<VehicleModelStay />
|
||||
</div>
|
||||
<div class="content169LeftContent" style="margin-top: 21px;">
|
||||
<div class="leftContentBoxItem">
|
||||
<!-- 断面流量趋势 -->
|
||||
<TrendOfTrafficFlow :currentService="currentService" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="selectPageTab === 3">
|
||||
<NewBigTitleBox :title="'应收账款'" style="margin-top: 20px;" />
|
||||
<div style="width: 100%;box-sizing: border-box;padding: 16px 11px 0;">
|
||||
<!-- 签约客户 -->
|
||||
<SignedClients />
|
||||
|
||||
<!-- 应收总额完成度 -->
|
||||
<TotalAccountsReceivable style="margin-top: 35px;" />
|
||||
|
||||
<!-- 年度应收总额完成度 -->
|
||||
<AnnualAccountsReceivable style="margin-top: 35px;" />
|
||||
|
||||
<!-- 详细款项完成进度 -->
|
||||
<DetailedPayment style="margin-top: 35px;" />
|
||||
<div class="leftContentBoxItem" style="margin-top: 23px;">
|
||||
<!-- 入区车流趋势 -->
|
||||
<VehiclesEntering :currentService="currentService" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <div class="leftContentBoxItem" style="margin-top: 30px;"> -->
|
||||
<!-- 客流变化 -->
|
||||
<!-- <PassengerFlowChanges :currentService="currentService" /> -->
|
||||
<!-- </div> -->
|
||||
|
||||
|
||||
<div class="leftContentBoxItem" style="margin-top: 33px;">
|
||||
<!-- 经营效益趋势 -->
|
||||
<VehicleModelStay />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pageBottom" v-if="selectPageTab === 1 || selectPageTab === 3">
|
||||
<div class="pageBottom" v-if="selectPageTab === 1">
|
||||
|
||||
</div>
|
||||
|
||||
@ -270,26 +223,7 @@ const handleChangePageTab = (value: number) => {
|
||||
<PreferenceType style="margin-left: 20px;margin-top: 20px;" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottom">
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 消费转化率对比图 -->
|
||||
<ConsumptionConversion />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 消费水平 -->
|
||||
<ConsumptionLevel />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 消费时段分析 -->
|
||||
<ConsumptionPeriod style="margin-top: 11px;" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 品牌消费水平 -->
|
||||
<BrandConsumptionLevel style="margin-top: 11px;" />
|
||||
</div>
|
||||
<div class="left3stBottom" style="margin-top: 0;">
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 客群特征分析 -->
|
||||
@ -300,8 +234,34 @@ const handleChangePageTab = (value: number) => {
|
||||
<!-- 客群消费偏好 -->
|
||||
<CustomerConsumptionPreferences style="margin-top: 15px;" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 交易画像分析 -->
|
||||
<NewBigTitleBox title="交易画像分析" :type="2" style="margin-top: 15px;" />
|
||||
|
||||
<div class="left3stBottom" style="margin-top: 0;">
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 消费转化率对比图 -->
|
||||
<ConsumptionConversion style="margin-top: 15px;" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 消费水平 -->
|
||||
<ConsumptionLevel style="margin-top: 15px;" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 消费时段分析 -->
|
||||
<ConsumptionPeriod style="margin-top: 15px;" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 品牌消费水平 -->
|
||||
<BrandConsumptionLevel style="margin-top: 15px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="content1692stCenter">
|
||||
<NewBigTitleBox :title="'月度经营情况'" />
|
||||
@ -323,10 +283,13 @@ const handleChangePageTab = (value: number) => {
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="content1692stRight">
|
||||
<!-- 时间天气等内容 -->
|
||||
<BasicMessageBox :currentService="currentService" style="margin-top: 20px;" />
|
||||
|
||||
<NewBigTitleBox :title="'经营业态月度情况'" style="margin-top: 20px;" />
|
||||
<div class="rightContentBox">
|
||||
<!-- 区域营收占比 -->
|
||||
<RegionalRevenue :currentService="currentService" style="margin-top: 20px;" />
|
||||
<RegionalRevenue :currentService="currentService" style="margin-top: 10px;" />
|
||||
|
||||
<!-- 多业态收入 -->
|
||||
<!-- <MultiIndustryIncome style="margin-top: 34px;" :currentService="currentService" /> -->
|
||||
@ -373,55 +336,81 @@ const handleChangePageTab = (value: number) => {
|
||||
</div>
|
||||
|
||||
<!-- 分区三 -->
|
||||
<div class="content1693st" v-if="selectPageTab === 99">
|
||||
<div class="content1693st" v-if="selectPageTab === 3">
|
||||
<div class="content1693stItem">
|
||||
<!-- 消息轮播框 -->
|
||||
<NoticeListBox />
|
||||
<modalTitle :title="'供应商'" style="margin-top: 20px;" />
|
||||
<SupplierListBox />
|
||||
<NoticeListBox :currentService="currentService" />
|
||||
|
||||
<!-- 品牌 -->
|
||||
<modalTitle :title="'品牌'" style="margin-top: 20px;" />
|
||||
<!-- 品牌列表 -->
|
||||
<BrandListtBox />
|
||||
</div>
|
||||
<NewBigTitleBox title="应收账款" style="margin-top: 20px;" />
|
||||
<div style="width: 100%;box-sizing: border-box;padding: 20px 11px;">
|
||||
<!-- 合同信息 -->
|
||||
<ContractInformation />
|
||||
|
||||
<div class="content1693stItem" style="padding-top: 46px;">
|
||||
<!-- 商户生态结构图谱 -->
|
||||
<modalTitle :title="'商户生态结构图谱'" />
|
||||
<!-- 收款完成进度 -->
|
||||
<PaymentProgress style="margin-top: 24px;" />
|
||||
|
||||
<div class="content1693stItem2stContent">
|
||||
<!-- 商户类别 -->
|
||||
<MerchantCategory />
|
||||
|
||||
<!-- 扣分类型趋势 -->
|
||||
<DeductionType style="margin-top: 30px;" />
|
||||
|
||||
<!-- 商户评分排行榜 -->
|
||||
<MerchantRatingRanking style="margin-top: 16px;" />
|
||||
|
||||
<!-- 优质商户 -->
|
||||
<HighQualityMerchants style="margin-top: 20px;" />
|
||||
<!-- 收款预警 -->
|
||||
<AccountsReceivableWarning style="margin-top: 24px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content1693stItem" style="padding-top: 46px;">
|
||||
<!-- 员工福利与商城数据 -->
|
||||
<modalTitle :title="'员工福利与商城数据'" />
|
||||
<div class="content1693stItem2stContent">
|
||||
<!-- 本月福利金发送额度 -->
|
||||
<ThisMonthBenefits />
|
||||
<template>
|
||||
<!-- 商户生态结构图谱 -->
|
||||
<modalTitle :title="'商户生态结构图谱'" />
|
||||
|
||||
<!-- 核心品类占比 -->
|
||||
<CoreCategory style="margin-top: 20px;" />
|
||||
<div class="content1693stItem2stContent">
|
||||
<!-- 商户类别 -->
|
||||
<MerchantCategory />
|
||||
|
||||
<!-- 热门商品榜单 -->
|
||||
<HotProductList style="margin-top: 30px;" :pageType="'left'" />
|
||||
</div>
|
||||
<!-- 扣分类型趋势 -->
|
||||
<DeductionType style="margin-top: 30px;" />
|
||||
|
||||
<!-- 商户评分排行榜 -->
|
||||
<MerchantRatingRanking style="margin-top: 16px;" />
|
||||
|
||||
<!-- 优质商户 -->
|
||||
<HighQualityMerchants style="margin-top: 20px;" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content1693stItem" style="padding-top: 46px;">
|
||||
<template>
|
||||
<!-- 员工福利与商城数据 -->
|
||||
<modalTitle :title="'员工福利与商城数据'" />
|
||||
<div class="content1693stItem2stContent">
|
||||
<!-- 本月福利金发送额度 -->
|
||||
<ThisMonthBenefits />
|
||||
|
||||
<!-- 核心品类占比 -->
|
||||
<CoreCategory style="margin-top: 20px;" />
|
||||
|
||||
<!-- 热门商品榜单 -->
|
||||
<HotProductList style="margin-top: 30px;" :pageType="'left'" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="content1693stItem">
|
||||
<!-- 时间天气等内容 -->
|
||||
<BasicMessageBox :currentService="currentService" />
|
||||
|
||||
<NewBigTitleBox :title="'应收账款'" style="margin-top: 20px;" />
|
||||
<div style="width: 100%;box-sizing: border-box;padding: 16px 11px 0;">
|
||||
<!-- 签约客户 -->
|
||||
<SignedClients />
|
||||
|
||||
<!-- 应收总额完成度 -->
|
||||
<TotalAccountsReceivable style="margin-top: 35px;" />
|
||||
|
||||
<!-- 年度应收总额完成度 -->
|
||||
<AnnualAccountsReceivable style="margin-top: 35px;" />
|
||||
|
||||
<!-- 详细款项完成进度 -->
|
||||
<DetailedPayment style="margin-top: 35px;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -429,7 +418,7 @@ const handleChangePageTab = (value: number) => {
|
||||
<div class="content1694st" v-if="selectPageTab === 4">
|
||||
<div class="content1694stItem">
|
||||
<!-- 消息轮播框 -->
|
||||
<NoticeListBox style="margin-top: 20px;" />
|
||||
<NoticeListBox />
|
||||
|
||||
<NewBigTitleBox :title="'管理运营监控'" style="margin-top: 29px;" />
|
||||
|
||||
@ -456,14 +445,14 @@ const handleChangePageTab = (value: number) => {
|
||||
|
||||
|
||||
<div class="content1694stItem">
|
||||
<NewBigTitleBox :title="'品牌'" style="margin-top: 74px;" />
|
||||
<NewBigTitleBox :title="'品牌'" style="margin-top: 54px;" />
|
||||
|
||||
<!-- 商户类别比例图 和 下面的列表 -->
|
||||
<BrandDetail />
|
||||
</div>
|
||||
|
||||
<div class="content1694stItem">
|
||||
<NewBigTitleBox :title="'供应商'" style="margin-top: 74px;" />
|
||||
<NewBigTitleBox :title="'供应商'" style="margin-top: 54px;" />
|
||||
<SupplierListBox />
|
||||
<!-- 在线服务区和在线收银机 -->
|
||||
<!-- <TodayTrend /> -->
|
||||
@ -476,7 +465,7 @@ const handleChangePageTab = (value: number) => {
|
||||
</div>
|
||||
<div class="content1694stItem">
|
||||
<!-- 时间天气等内容 -->
|
||||
<BasicMessageBox style="margin-top: 19px;" />
|
||||
<BasicMessageBox :currentService="currentService" />
|
||||
|
||||
<NewBigTitleBox :title="'电商模块'" style="margin-top: 28px;" />
|
||||
|
||||
@ -489,7 +478,7 @@ const handleChangePageTab = (value: number) => {
|
||||
<ThisMonthBenefits style="margin-top: 10px;" />
|
||||
|
||||
<!-- 核心品类占比 -->
|
||||
<CoreCategory style="margin-top: 10px;" />
|
||||
<!-- <CoreCategory style="margin-top: 10px;" /> -->
|
||||
|
||||
<NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />
|
||||
|
||||
|
||||
@ -114,7 +114,7 @@ export async function handleGetCurrentEarlyWarning(params: any) {
|
||||
if (data.Result_Code !== 100) {
|
||||
return data
|
||||
}
|
||||
return data.Result_Data.List
|
||||
return data.Result_Data
|
||||
}
|
||||
|
||||
|
||||
@ -426,6 +426,15 @@ export async function handleGetExamineResultList(params: any) {
|
||||
return data.Result_Data.List
|
||||
}
|
||||
|
||||
// 考核考评的数据 - 新的
|
||||
export async function handleGetEvaluateResList(params: any) {
|
||||
const data: any = await requestPos.post('/Examine/GetEvaluateResList', params)
|
||||
if (data.Result_Code !== 100) {
|
||||
return data
|
||||
}
|
||||
return data.Result_Data.List
|
||||
}
|
||||
|
||||
|
||||
// 获取服务区基础设施汇总数据
|
||||
export async function handleGetServerpartServiceSummary(params: any) {
|
||||
@ -454,3 +463,34 @@ export async function handleGetSupplierList(params: any) {
|
||||
}
|
||||
return data.Result_Data.List
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取供应商的列表数据
|
||||
export async function handleGetSupplierListChain(params: any) {
|
||||
const data: any = await requestPos.post('/SupplyChain/GetSupplierList', params)
|
||||
if (data.Result_Code !== 100) {
|
||||
return data
|
||||
}
|
||||
return data.Result_Data.List
|
||||
}
|
||||
|
||||
|
||||
// 获取供应商的列表数据
|
||||
export async function handleGetMallOrderSummary(params: any) {
|
||||
const data: any = await requestPos.post('/SupplyChain/GetMallOrderSummary', params)
|
||||
if (data.Result_Code !== 100) {
|
||||
return data
|
||||
}
|
||||
return data.Result_Data.List
|
||||
}
|
||||
|
||||
|
||||
// 获取员工福利汇总数据
|
||||
export async function handleGetWelFareSummary(params: any) {
|
||||
const data: any = await requestPos.post('/SupplyChain/GetWelFareSummary', params)
|
||||
if (data.Result_Code !== 100) {
|
||||
return data
|
||||
}
|
||||
return data.Result_Data
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user