ylj/YNMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
ylj20011123 2025-07-14 16:14:21 +08:00
parent f8c04a8e6a
commit a922a57525
26 changed files with 1897 additions and 1194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/page/index/components/BrandConsumptionLevel/BrandConsumptionLevel.vue
View File

@ -34,60 +34,7 @@ onMounted(async () => {
myChart = echarts.init(chartDom);
const option = {
legend: {
// selectedMode: false,
right: 0,
textStyle: {
color: '#fff',
fontSize: 12,
padding: [0, 0, 0, 5]
},
},
grid: {
left: '0',
right: '0',
bottom: '0',
top: '30',
containLabel: true
},
yAxis: {
name: '%',
type: 'value',
splitLine: { show: false }, // 隐藏刻度线
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff',
}
},
xAxis: {
type: 'category',
data: res.category,
axisLabel: {
interval: 0 // 强制显示所有标签
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
},
series: res.seriesData,
tooltip: {
trigger: 'item',
formatter: function (params: any) {
return `
<div style="font-weight:bold">${params.seriesName} ${params.value}%</div>
`;
}
},
};
const option = handleSetConfig(res)
myChart.setOption(option);
myChart.resize();
@ -162,6 +109,64 @@ const handleGetData = async () => {
return res
}
const handleSetConfig = (res: any) => {
const option = {
legend: {
// selectedMode: false,
right: 0,
textStyle: {
color: '#fff',
fontSize: 12,
padding: [0, 0, 0, 5]
},
},
grid: {
left: '0',
right: '0',
bottom: '0',
top: '30',
containLabel: true
},
yAxis: {
name: '%',
type: 'value',
splitLine: { show: false }, // 隐藏刻度线
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
color: '#fff',
}
},
xAxis: {
type: 'category',
data: res.category,
axisLabel: {
interval: 0 // 强制显示所有标签
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
},
series: res.seriesData,
tooltip: {
trigger: 'item',
formatter: function (params: any) {
return `
<div style="font-weight:bold">${params.seriesName} ${params.value}%</div>
`;
}
},
};
return option
}
const resizeChart = () => {
myChart?.resize();
@ -172,7 +177,18 @@ onBeforeUnmount(() => {
myChart?.dispose();
});
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
</script>

142
src/page/index/components/BrandDetail/BrandDetail.vue
View File

@ -66,67 +66,7 @@ const handleGoMounted = async () => {
myChart = echarts.init(chartDom);
const option = {
legend: {
orient: 'vertical', // 图例纵向排列
left: 200, // 距离右侧5%
top: 'center', // 垂直居中
itemWidth: 12, // 图例标记宽度
itemHeight: 12, // 图例标记高度
textStyle: {
color: '#fff', // 文字颜色
rich: {
// 可以在这里添加富文本样式
value: {
fontWeight: 'bold',
padding: [0, 0, 0, 5] // 文字间距
}
}
},
// 自定义图例内容
formatter: function (name: string) {
// 找到对应的数据项
const dataItem = res.pieData.find((item: any) => item.name === name);
// 返回自定义格式
return `${name} ${dataItem?.value}%`;
}
},
tooltip: { // 新增 tooltip 配置
trigger: 'item', // 触发类型：坐标轴触发
axisPointer: { // 坐标轴指示器配置
type: 'shadow' // 阴影指示器（适合柱状图）
},
formatter: function (params: any) { // 自定义提示框内容
return `
<div style="font-weight:bold">${params.name} ${params?.percent}% </div>
`;
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['0%', '70%'],
center: ['25%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
color: function (params: any) {
return colorList[params.dataIndex];
}
},
label: {
show: false
},
emphasis: false,
labelLine: {
show: false
},
data: res.pieData
}
]
};
const option = handleSetConfig(res)
myChart.setOption(option);
@ -285,6 +225,86 @@ onBeforeUnmount(() => {
myChart?.dispose();
});
const handleSetConfig = (res: any) => {
const option = {
legend: {
orient: 'vertical', // 图例纵向排列
left: 200, // 距离右侧5%
top: 'center', // 垂直居中
itemWidth: 12, // 图例标记宽度
itemHeight: 12, // 图例标记高度
textStyle: {
color: '#fff', // 文字颜色
rich: {
// 可以在这里添加富文本样式
value: {
fontWeight: 'bold',
padding: [0, 0, 0, 5] // 文字间距
}
}
},
// 自定义图例内容
formatter: function (name: string) {
// 找到对应的数据项
const dataItem = res.pieData.find((item: any) => item.name === name);
// 返回自定义格式
return `${name} ${dataItem?.value}%`;
}
},
tooltip: { // 新增 tooltip 配置
trigger: 'item', // 触发类型：坐标轴触发
axisPointer: { // 坐标轴指示器配置
type: 'shadow' // 阴影指示器（适合柱状图）
},
formatter: function (params: any) { // 自定义提示框内容
return `
<div style="font-weight:bold">${params.name} ${params?.percent}% </div>
`;
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['0%', '70%'],
center: ['25%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
color: function (params: any) {
return colorList[params.dataIndex];
}
},
label: {
show: false
},
emphasis: false,
labelLine: {
show: false
},
data: res.pieData
}
]
};
return option
}
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
handleBrandTabList()
}
defineExpose({
handleUpdatePie
});
</script>

5
src/page/index/components/BusinessCase/BusinessCase.vue
View File

@ -447,6 +447,11 @@ onBeforeUnmount(() => {
myChartBottom?.dispose();
});
defineExpose({
handleGetData
});
</script>

190
src/page/index/components/BusinessStructure/BusinessStructure.vue
View File

@ -55,86 +55,7 @@ const handleGoMounted = async () => {
const centerX = width * 0.2;
const centerY = height * 0.5;
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>
`;
}
},
graphic: { // 关键配置：在图表中心添加图片
elements: [
{
type: 'image',
style: {
image: businessFormatCenterIcon,
width: 83,
height: 83
},
left: centerX - 41.5,
top: centerY - 41.5,
z: 10
}
]
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['55%', '70%'],
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
}
],
legend: {
orient: 'vertical',
left: 200,
top: 'center',
align: 'left',
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
color: '#fff',
rich: {
name: {
width: 90, // 固定名称宽度
align: 'left',
padding: [0, 10, 0, 0]
},
percent: {
width: 50, // 固定百分比宽度
align: 'right',
padding: [0, 10, 0, 0]
}
}
},
formatter: function (name: any) {
let percentData: any = res.lengedData.filter((item: any) => item.name === name)
return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
}
}
};
const option = handleSetConfig(res)
myChart.setOption(option);
myChart.resize();
@ -232,6 +153,115 @@ onBeforeUnmount(() => {
myChart?.dispose();
});
const handleSetConfig = (res: any) => {
const chartDom = document.getElementById('BusinessStructure');
if (!chartDom) return;
myChart = echarts.init(chartDom);
const rect = chartDom.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
// 计算center位置（20%，50%）对应的实际像素
const centerX = width * 0.2;
const centerY = height * 0.5;
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>
`;
}
},
graphic: { // 关键配置：在图表中心添加图片
elements: [
{
type: 'image',
style: {
image: businessFormatCenterIcon,
width: 83,
height: 83
},
left: centerX - 41.5,
top: centerY - 41.5,
z: 10
}
]
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['55%', '70%'],
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
}
],
legend: {
orient: 'vertical',
left: 200,
top: 'center',
align: 'left',
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
color: '#fff',
rich: {
name: {
width: 90, // 固定名称宽度
align: 'left',
padding: [0, 10, 0, 0]
},
percent: {
width: 50, // 固定百分比宽度
align: 'right',
padding: [0, 10, 0, 0]
}
}
},
formatter: function (name: any) {
let percentData: any = res.lengedData.filter((item: any) => item.name === name)
return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
}
}
};
return option
}
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
</script>

181
src/page/index/components/ConsumptionConversion/ConsumptionConversion.vue
View File

@ -34,6 +34,92 @@ onMounted(async () => {
myChart = echarts.init(chartDom);
const option = handleSetConfig(res)
myChart.setOption(option);
myChart.resize();
window.addEventListener('resize', resizeChart);
})
// 拿到数据
const handleGetData = async () => {
let category: any = []
let carResList: any = []
let carRealResList: any = []
let orderResList: any = []
let orderRealResList: any = []
const req: any = {
Province_Code: '530000',
// Province_Code: '340000',
Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
Serverpart_ID: ''
}
let ConsumptionConversion = sessionStorage.getItem('ConsumptionConversion')
let data: any = []
if (ConsumptionConversion) {
data = JSON.parse(ConsumptionConversion)
} else {
data = await handleGetTransactionConvert(req)
sessionStorage.setItem("ConsumptionConversion", JSON.stringify(data))
}
// const data = await handleGetTransactionConvert(req)
let carList = data.BayonetList.data
let orderList = data.TransactionList.data
let aiObjCar: any = {}
let aiOrder: any = {}
if (carList && carList.length > 0) {
carList.forEach((item: any) => {
carResList.push((item[1]))
carRealResList.push(item[1])
aiObjCar[`${item[0]}时`] = item[1] + '辆'
})
}
if (orderList && orderList.length > 0) {
orderList.forEach((item: any) => {
category.push(item[0])
orderResList.push((item[1]))
orderRealResList.push(item[1])
aiOrder[`${item[0]}时`] = item[1] + '笔'
})
}
let res: any = {
category: category,// x轴的内容
carResList: carResList,
carRealResList: carRealResList,
orderResList: orderResList,
orderRealResList: orderRealResList
}
let ConsumptionConversionAI = sessionStorage.getItem('ConsumptionConversionAI')
if (ConsumptionConversionAI) { } else {
let aiObj: any = {
"时段车流": aiObjCar,
"时段客单": aiOrder
}
sessionStorage.setItem("ConsumptionConversionAI", JSON.stringify(aiObj))
}
return res
}
const handleSetConfig = (res: any) => {
const option = {
legend: {
top: 0, // 距离容器底部距离
@ -185,91 +271,9 @@ onMounted(async () => {
}
}
};
myChart.setOption(option);
myChart.resize();
window.addEventListener('resize', resizeChart);
})
// 拿到数据
const handleGetData = async () => {
let category: any = []
let carResList: any = []
let carRealResList: any = []
let orderResList: any = []
let orderRealResList: any = []
const req: any = {
Province_Code: '530000',
// Province_Code: '340000',
Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
Serverpart_ID: ''
return option
}
let ConsumptionConversion = sessionStorage.getItem('ConsumptionConversion')
let data: any = []
if (ConsumptionConversion) {
data = JSON.parse(ConsumptionConversion)
} else {
data = await handleGetTransactionConvert(req)
sessionStorage.setItem("ConsumptionConversion", JSON.stringify(data))
}
// const data = await handleGetTransactionConvert(req)
let carList = data.BayonetList.data
let orderList = data.TransactionList.data
let aiObjCar: any = {}
let aiOrder: any = {}
if (carList && carList.length > 0) {
carList.forEach((item: any) => {
carResList.push((item[1]))
carRealResList.push(item[1])
aiObjCar[`${item[0]}时`] = item[1] + '辆'
})
}
if (orderList && orderList.length > 0) {
orderList.forEach((item: any) => {
category.push(item[0])
orderResList.push((item[1]))
orderRealResList.push(item[1])
aiOrder[`${item[0]}时`] = item[1] + '笔'
})
}
let res: any = {
category: category,// x轴的内容
carResList: carResList,
carRealResList: carRealResList,
orderResList: orderResList,
orderRealResList: orderRealResList
}
let ConsumptionConversionAI = sessionStorage.getItem('ConsumptionConversionAI')
if (ConsumptionConversionAI) { } else {
let aiObj: any = {
"时段车流": aiObjCar,
"时段客单": aiOrder
}
sessionStorage.setItem("ConsumptionConversionAI", JSON.stringify(aiObj))
}
return res
}
const resizeChart = () => {
myChart?.resize();
};
@ -279,7 +283,18 @@ onBeforeUnmount(() => {
myChart?.dispose();
});
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
</script>

136
src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue
View File

@ -35,66 +35,7 @@ onMounted(async () => {
myChart = echarts.init(chartDom);
const option = {
legend: {
right: 0,
textStyle: {
color: '#fff',
fontSize: 12,
padding: [0, 0, 0, 5]
},
},
grid: {
left: '0',
right: '0',
bottom: '0',
top: '30',
containLabel: true
},
yAxis: {
type: 'value',
name: "%",
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: {
trigger: 'item',
formatter: function (params: any) {
return `
<div style="font-weight:bold">${params.seriesName} ${params.value}%</div>
`;
}
},
};
const option = handleSetConfig(res)
myChart.setOption(option);
myChart.resize();
@ -179,7 +120,82 @@ onBeforeUnmount(() => {
myChart?.dispose();
});
const handleSetConfig = (res: any) => {
const option = {
legend: {
right: 0,
textStyle: {
color: '#fff',
fontSize: 12,
padding: [0, 0, 0, 5]
},
},
grid: {
left: '0',
right: '0',
bottom: '0',
top: '30',
containLabel: true
},
yAxis: {
type: 'value',
name: "%",
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: {
trigger: 'item',
formatter: function (params: any) {
return `
<div style="font-weight:bold">${params.seriesName} ${params.value}%</div>
`;
}
},
};
return option
}
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
</script>

145
src/page/index/components/ConsumptionPeriod/ConsumptionPeriod.vue
View File

@ -34,6 +34,73 @@ onMounted(async () => {
myChart = echarts.init(chartDom);
const option = handleSetConfig(res)
myChart.setOption(option);
myChart.resize();
window.addEventListener('resize', resizeChart);
})
// 拿到数据
const handleGetData = async () => {
let category: any = []
let seriesData: any = []
const req: any = {
Province_Code: '530000',
Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
Serverpart_ID: '',
TimeSpan: 1
}
let ConsumptionPeriod = sessionStorage.getItem('ConsumptionPeriod')
let data: any = []
if (ConsumptionPeriod) {
data = JSON.parse(ConsumptionPeriod)
} else {
data = await handleGetTransactionTimeAnalysis(req)
sessionStorage.setItem("ConsumptionPeriod", JSON.stringify(data))
}
// const data = await handleGetTransactionTimeAnalysis(req)
let aiObj: any = {}
if (data && data.length > 0) {
// 拿到笔数的合计
let orderSum: number = 0
data.forEach((item: any) => {
orderSum += Number(item.data)
})
// data 是笔数 key 是金额
data.forEach((item: any, index: number) => {
if (index < 10) {
category.push(`0${index}:00`)
} else {
category.push(`${index}:00`)
}
seriesData.push(Number(((item.data / orderSum) * 100).toFixed(2)))
aiObj[`${item.name}时`] = item.data + '单'
})
}
let res: any = {
category: category,// x轴的内容
seriesData: seriesData,
}
let ConsumptionPeriodAI = sessionStorage.getItem('ConsumptionPeriodAI')
if (ConsumptionPeriodAI) { } else {
sessionStorage.setItem("ConsumptionPeriodAI", JSON.stringify(aiObj))
}
return res
}
const handleSetConfig = (res: any) => {
const option = {
xAxis: {
type: 'category',
@ -119,72 +186,9 @@ onMounted(async () => {
}
}
};
myChart.setOption(option);
myChart.resize();
window.addEventListener('resize', resizeChart);
})
// 拿到数据
const handleGetData = async () => {
let category: any = []
let seriesData: any = []
const req: any = {
Province_Code: '530000',
Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
Serverpart_ID: '',
TimeSpan: 1
return option
}
let ConsumptionPeriod = sessionStorage.getItem('ConsumptionPeriod')
let data: any = []
if (ConsumptionPeriod) {
data = JSON.parse(ConsumptionPeriod)
} else {
data = await handleGetTransactionTimeAnalysis(req)
sessionStorage.setItem("ConsumptionPeriod", JSON.stringify(data))
}
// const data = await handleGetTransactionTimeAnalysis(req)
let aiObj: any = {}
if (data && data.length > 0) {
// 拿到笔数的合计
let orderSum: number = 0
data.forEach((item: any) => {
orderSum += Number(item.data)
})
// data 是笔数 key 是金额
data.forEach((item: any, index: number) => {
if (index < 10) {
category.push(`0${index}:00`)
} else {
category.push(`${index}:00`)
}
seriesData.push(Number(((item.data / orderSum) * 100).toFixed(2)))
aiObj[`${item.name}时`] = item.data + '单'
})
}
let res: any = {
category: category,// x轴的内容
seriesData: seriesData,
}
let ConsumptionPeriodAI = sessionStorage.getItem('ConsumptionPeriodAI')
if (ConsumptionPeriodAI) { } else {
sessionStorage.setItem("ConsumptionPeriodAI", JSON.stringify(aiObj))
}
return res
}
const resizeChart = () => {
myChart?.resize();
};
@ -194,6 +198,19 @@ onBeforeUnmount(() => {
myChart?.dispose();
});
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
</script>

5
src/page/index/components/CoreBusinessData/CoreBusinessData.vue
View File

@ -59,7 +59,6 @@ const handleGetMapRealData = async () => {
serverPartId: props.currentService?.SERVERPART_ID || ""
}
let CoreBusinessData = sessionStorage.getItem('CoreBusinessData')
let data: any = []
if (CoreBusinessData) {
@ -228,6 +227,10 @@ const handleGetPonitFixed = (str: string) => {
const num = parseFloat(str); // 先转为number类型
return isNaN(num) ? "0.00" : num.toFixed(2);
}
defineExpose({
handleGetMapRealData
});
</script>

53
src/page/index/components/CoreCategory/CoreCategory.vue
View File

@ -42,6 +42,14 @@ onMounted(async () => {
myChart = echarts.init(chartDom);
const rect = chartDom.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
// 计算center位置（20%，50%）对应的实际像素
const centerX = width * 0.2;
const centerY = height * 0.5;
const option = {
tooltip: { // 新增 tooltip 配置
trigger: 'item', // 触发类型：坐标轴触发
@ -63,8 +71,8 @@ onMounted(async () => {
width: 83,
height: 83
},
left: 'center',
top: 'center',
left: centerX - 41.5,
top: centerY - 41.5,
z: 10
}
]
@ -73,8 +81,8 @@ onMounted(async () => {
{
name: 'Access From',
type: 'pie',
radius: ['85%', '100%'],
center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置]
radius: ['55%', '70%'],
center: ['20%', '50%'], // 图形向左偏移
avoidLabelOverlap: false,
itemStyle: {
@ -91,7 +99,36 @@ onMounted(async () => {
},
data: res.seriesData
}
]
],
legend: {
orient: 'vertical',
left: 200,
top: 'center',
align: 'left',
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
color: '#fff',
rich: {
name: {
width: 90, // 固定名称宽度
align: 'left',
padding: [0, 10, 0, 0]
},
percent: {
width: 50, // 固定百分比宽度
align: 'right',
padding: [0, 10, 0, 0]
}
}
},
formatter: function (name: any) {
let percentData: any = res.lengedData.filter((item: any) => item.name === name)
return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
}
}
};
myChart.setOption(option);
@ -165,19 +202,17 @@ onBeforeUnmount(() => {
<div style="display: flex;margin-top: 30px;align-items: center;">
<div class="CoreCategory" id="CoreCategory"></div>
<div class="CoreCategoryDataList">
<!-- <div class="CoreCategoryDataList">
<div class="CoreCategoryDataBox" v-for="(item, index) in lengedList" :key="index">
<div class="CoreCategoryDataLeftBox">
<div class="CoreCategoryItem">
<div class="CoreCategoryItemLeged" :style="{ background: colorList[index] }"></div>
<div class="CoreCategoryItemLabel">{{ item.name }}</div>
<div class="CoreCategoryItemLabel" style="margin-left: 8px;">{{ item.percent }}%</div>
<!-- <div class="CoreCategoryItemLabel" style="margin-left: 8px;">{{ item.value }}</div> -->
</div>
</div>
</div>
</div>
</div> -->
</div>
</div>

214
src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue
View File

@ -40,6 +40,112 @@ onMounted(async () => {
myChart = echarts.init(chartDom);
const option = handleSetConfig(res)
myChart.setOption(option);
myChart.resize();
window.addEventListener('resize', resizeChart);
})
// 拿到年龄数据
const handleGetData = async () => {
let category: any = []
let seriesData: any = []
let percentData: any = []
const req: any = {
provinceCode: '530000',
statisticsMonth: moment(moment().subtract(1, 'M')).format('YYYYMM'),
}
let CustomerAgeGroup = sessionStorage.getItem('CustomerAgeGroup')
let data: any = []
if (CustomerAgeGroup) {
data = JSON.parse(CustomerAgeGroup)
} else {
data = await handleGetCustomerAgeRatio(req)
sessionStorage.setItem("CustomerAgeGroup", JSON.stringify(data))
}
// const data = await handleGetCustomerAgeRatio(req)
console.log('fdisfsauifhdsaj', data);
// for (let i = 0; i < 4; i++) {
// let sum: number = (data[0].data[i] + data[1].data[i])
// seriesData.push(sum.toFixed(2))
// percentData.push((sum / 200 * 100).toFixed(2))
// }
// 男生
let seriesDataMan: number[] = []
// 女生
let seriesDataWoman: number[] = []
if (data && data.length > 0) {
data.forEach((item: any) => {
if (item.name === '男性') {
seriesDataMan = item.data
} else if (item.name === '女性') {
seriesDataWoman = item.data
}
})
}
let res: any = {
// category: ["25以下", "25-35", "35-45", "45以上"],// x轴的内容
category: ["20岁", "30岁", "40岁", "50以上"],// x轴的内容
seriesDataMan: seriesDataMan,// 男生
seriesDataWoman: seriesDataWoman// 女生
}
let CustomerAgeGroupAI = sessionStorage.getItem('CustomerAgeGroupAI')
if (CustomerAgeGroupAI) { } else {
let aiRes: any = {}
for (let i = 0; i < res.category.length; i++) {
aiRes[res.category[i]] = {
"男性": seriesDataMan[i] + '%',
"女性": seriesDataWoman[i] + '%',
}
}
sessionStorage.setItem("CustomerAgeGroupAI", JSON.stringify(aiRes))
}
return res
}
// 重绘所有图表的方法
const resizeAllCharts = () => {
// 获取当前显示的tab下的所有echarts实例
const charts = document.querySelectorAll(`#CustomerAgeGroup`)
charts.forEach(chart => {
const instance = echarts.getInstanceByDom(chart as HTMLElement)
if (instance) {
instance.resize()
}
})
}
const resizeChart = () => {
myChart?.resize();
};
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeChart);
myChart?.dispose();
});
onUnmounted(() => {
window.removeEventListener('resize', resizeAllCharts)
})
const handleSetConfig = (res: any) => {
const option = {
tooltip: { // 新增 tooltip 配置
trigger: 'axis', // 触发类型：坐标轴触发
@ -170,111 +276,23 @@ onMounted(async () => {
}
},
};
myChart.setOption(option);
myChart.resize();
window.addEventListener('resize', resizeChart);
})
// 拿到年龄数据
const handleGetData = async () => {
let category: any = []
let seriesData: any = []
let percentData: any = []
const req: any = {
provinceCode: '530000',
statisticsMonth: moment(moment().subtract(1, 'M')).format('YYYYMM'),
return option
}
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
let CustomerAgeGroup = sessionStorage.getItem('CustomerAgeGroup')
let data: any = []
if (CustomerAgeGroup) {
data = JSON.parse(CustomerAgeGroup)
} else {
data = await handleGetCustomerAgeRatio(req)
sessionStorage.setItem("CustomerAgeGroup", JSON.stringify(data))
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
// const data = await handleGetCustomerAgeRatio(req)
console.log('fdisfsauifhdsaj', data);
// for (let i = 0; i < 4; i++) {
// let sum: number = (data[0].data[i] + data[1].data[i])
// seriesData.push(sum.toFixed(2))
// percentData.push((sum / 200 * 100).toFixed(2))
// }
// 男生
let seriesDataMan: number[] = []
// 女生
let seriesDataWoman: number[] = []
if (data && data.length > 0) {
data.forEach((item: any) => {
if (item.name === '男性') {
seriesDataMan = item.data
} else if (item.name === '女性') {
seriesDataWoman = item.data
}
})
}
let res: any = {
// category: ["25以下", "25-35", "35-45", "45以上"],// x轴的内容
category: ["20岁", "30岁", "40岁", "50以上"],// x轴的内容
seriesDataMan: seriesDataMan,// 男生
seriesDataWoman: seriesDataWoman// 女生
}
let CustomerAgeGroupAI = sessionStorage.getItem('CustomerAgeGroupAI')
if (CustomerAgeGroupAI) { } else {
let aiRes: any = {}
for (let i = 0; i < res.category.length; i++) {
aiRes[res.category[i]] = {
"男性": seriesDataMan[i] + '%',
"女性": seriesDataWoman[i] + '%',
}
}
sessionStorage.setItem("CustomerAgeGroupAI", JSON.stringify(aiRes))
}
return res
}
// 重绘所有图表的方法
const resizeAllCharts = () => {
// 获取当前显示的tab下的所有echarts实例
const charts = document.querySelectorAll(`#CustomerAgeGroup`)
charts.forEach(chart => {
const instance = echarts.getInstanceByDom(chart as HTMLElement)
if (instance) {
instance.resize()
}
})
}
const resizeChart = () => {
myChart?.resize();
};
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeChart);
myChart?.dispose();
defineExpose({
handleUpdatePie
});
onUnmounted(() => {
window.removeEventListener('resize', resizeAllCharts)
})
</script>
<template>

159
src/page/index/components/CustomerConsumptionPreferences/CustomerConsumptionPreferences.vue
View File

@ -54,6 +54,80 @@ const handleGoMounted = async () => {
myChart = echarts.init(chartDom);
const option = handleSetConfig(res)
myChart.setOption(option);
window.addEventListener('resize', resizeChart);
}
const handleGetData = async () => {
// const req: any = {
// statisticsType: 1,
// startMonth: moment().subtract(1, 'd').startOf('y').format('YYYYMM'),
// endMonth: moment().subtract(1, 'm').format('YYYYMM'),
// provinceCode: '530000',
// serverpartId: props.currentService?.SERVERPART_ID || "",
// sortStr: 'TOTAL_COUNT desc'
// }
const req: any = {
ProvinceCode: '530000',
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
// StatisticsDate: '2025-04-30',
// BusinessTradeIds: -1,
ServerpartId: props.currentService?.SERVERPART_ID || ""
}
let CustomerConsumptionPreferences = sessionStorage.getItem('CustomerConsumptionPreferences')
let data: any = []
if (CustomerConsumptionPreferences) {
data = JSON.parse(CustomerConsumptionPreferences)
} else {
// data = await handleGetCustomerSaleRatio(req)
data = await handleGetBusinessTradeRevenue(req)
sessionStorage.setItem("CustomerConsumptionPreferences", JSON.stringify(data))
}
// const data = await handleGetCustomerSaleRatio(req)
let category: string[] = []
let seriesData: number[] = []
let realData: string[] = []
let aiObj: any = {}
// CustomerSaleList
if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
let list = data.BusinessTradeRank.slice(0, 10)
list.forEach((item: any) => {
category.push(item.name)
seriesData.push(item.value)
realData.push(item.value)
aiObj[item.name] = `占比${item.value}%`
})
}
let CustomerConsumptionPreferencesAI = sessionStorage.getItem('CustomerConsumptionPreferencesAI')
if (CustomerConsumptionPreferencesAI) { } else {
sessionStorage.setItem("CustomerConsumptionPreferencesAI", JSON.stringify(aiObj))
}
return {
category: category,
seriesData: seriesData,
realData: realData,
}
}
const resizeChart = () => {
myChart?.resize();
};
const handleSetConfig = (res: any) => {
const option = {
xAxis: {
type: 'category',
@ -153,84 +227,27 @@ const handleGoMounted = async () => {
}
},
};
myChart.setOption(option);
window.addEventListener('resize', resizeChart);
return option
}
const handleGetData = async () => {
// const req: any = {
// statisticsType: 1,
// startMonth: moment().subtract(1, 'd').startOf('y').format('YYYYMM'),
// endMonth: moment().subtract(1, 'm').format('YYYYMM'),
// provinceCode: '530000',
// serverpartId: props.currentService?.SERVERPART_ID || "",
// sortStr: 'TOTAL_COUNT desc'
// }
const req: any = {
ProvinceCode: '530000',
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
// StatisticsDate: '2025-04-30',
// BusinessTradeIds: -1,
ServerpartId: props.currentService?.SERVERPART_ID || ""
}
let CustomerConsumptionPreferences = sessionStorage.getItem('CustomerConsumptionPreferences')
let data: any = []
if (CustomerConsumptionPreferences) {
data = JSON.parse(CustomerConsumptionPreferences)
} else {
// data = await handleGetCustomerSaleRatio(req)
data = await handleGetBusinessTradeRevenue(req)
sessionStorage.setItem("CustomerConsumptionPreferences", JSON.stringify(data))
}
// const data = await handleGetCustomerSaleRatio(req)
let category: string[] = []
let seriesData: number[] = []
let realData: string[] = []
let aiObj: any = {}
// CustomerSaleList
if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
let list = data.BusinessTradeRank.slice(0, 10)
list.forEach((item: any) => {
category.push(item.name)
seriesData.push(item.value)
realData.push(item.value)
aiObj[item.name] = `占比${item.value}%`
})
}
let CustomerConsumptionPreferencesAI = sessionStorage.getItem('CustomerConsumptionPreferencesAI')
if (CustomerConsumptionPreferencesAI) { } else {
sessionStorage.setItem("CustomerConsumptionPreferencesAI", JSON.stringify(aiObj))
}
return {
category: category,
seriesData: seriesData,
realData: realData,
}
}
const resizeChart = () => {
myChart?.resize();
};
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeChart);
myChart?.dispose();
});
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
</script>
<template>

154
src/page/index/components/CustomerGroup/CustomerGroup.vue
View File

@ -57,7 +57,78 @@ const handleShowCharts = async () => {
myChart = echarts.init(chartDom);
const option = handleSetConfig(res)
myChart.setOption(option);
window.addEventListener('resize', resizeChart);
}
const handleGetData = async () => {
const req: any = {
provinceCode: "530000",
statisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
serverpartId: props.currentService?.SERVERPART_ID || "",
}
let CustomerGroup = sessionStorage.getItem('CustomerGroup')
let data: any = []
if (CustomerGroup) {
data = JSON.parse(CustomerGroup)
} else {
data = await handleGetCustomerGroupRatio(req)
sessionStorage.setItem("CustomerGroup", JSON.stringify(data))
}
// const data = await handleGetCustomerGroupRatio(req)
let res: any = []
let aiObj: any = {}
if (data && data.length > 0) {
data.forEach((item: any) => {
// let list: any = []
let obj: any = {}
if (item.data && item.data.length > 0) {
item.data.forEach((subItem: any) => {
subItem.push(item.name)
res.push(subItem)
obj[`${subItem[0]}岁`] = `交易金额${subItem[1]}元，占比${subItem[2]}%`
})
}
aiObj[item.name] = obj
// res.push(list)
})
}
let CustomerGroupAI = sessionStorage.getItem('CustomerGroupAI')
if (CustomerGroupAI) { } else {
sessionStorage.setItem("CustomerGroupAI", JSON.stringify(aiObj))
}
return res
}
const resizeChart = () => {
myChart?.resize();
};
// 重绘所有图表的方法
const resizeAllCharts = () => {
// 获取当前显示的tab下的所有echarts实例
const charts = document.querySelectorAll(`#CustomerGroupBoxContent`)
charts.forEach(chart => {
const instance = echarts.getInstanceByDom(chart as HTMLElement)
if (instance) {
instance.resize()
}
})
}
const handleSetConfig = (res: any) => {
const option = {
grid: {
left: '0',
@ -157,81 +228,26 @@ const handleShowCharts = async () => {
}
}
};
myChart.setOption(option);
window.addEventListener('resize', resizeChart);
return option
}
const handleGetData = async () => {
const req: any = {
provinceCode: "530000",
statisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
serverpartId: props.currentService?.SERVERPART_ID || "",
}
let CustomerGroup = sessionStorage.getItem('CustomerGroup')
let data: any = []
if (CustomerGroup) {
data = JSON.parse(CustomerGroup)
} else {
data = await handleGetCustomerGroupRatio(req)
sessionStorage.setItem("CustomerGroup", JSON.stringify(data))
}
// const data = await handleGetCustomerGroupRatio(req)
let res: any = []
let aiObj: any = {}
if (data && data.length > 0) {
data.forEach((item: any) => {
// let list: any = []
let obj: any = {}
if (item.data && item.data.length > 0) {
item.data.forEach((subItem: any) => {
subItem.push(item.name)
res.push(subItem)
obj[`${subItem[0]}岁`] = `交易金额${subItem[1]}元，占比${subItem[2]}%`
})
}
aiObj[item.name] = obj
// res.push(list)
})
}
let CustomerGroupAI = sessionStorage.getItem('CustomerGroupAI')
if (CustomerGroupAI) { } else {
sessionStorage.setItem("CustomerGroupAI", JSON.stringify(aiObj))
}
return res
}
const resizeChart = () => {
myChart?.resize();
};
// 重绘所有图表的方法
const resizeAllCharts = () => {
// 获取当前显示的tab下的所有echarts实例
const charts = document.querySelectorAll(`#CustomerGroupBoxContent`)
charts.forEach(chart => {
const instance = echarts.getInstanceByDom(chart as HTMLElement)
if (instance) {
instance.resize()
}
})
}
onBeforeUnmount(() => {
myChart?.dispose();
});
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
</script>

155
src/page/index/components/FestivalRevenueSumInfo/FestivalRevenueSumInfo.vue
View File

@ -67,76 +67,7 @@ const handleGoMounted = async () => {
myChart = echarts.init(chartDom);
const option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
legend: [ // 使用两个legend对象分别控制
// 第一行：外圈圆环图例
{
data: res.bigType.map((name: string) => ({
name,
icon: 'circle'
})),
orient: 'horizontal',
top: 'bottom',
left: 'center',
padding: [0, 0, 60, 0], // 下边距为内圈图例留空间
textStyle: { color: '#fff' }
},
// 第二行：内圈饼图图例
{
data: res.smallType.map((name: string) => ({
name,
icon: 'rect'
})),
orient: 'horizontal',
top: 'bottom',
left: 'center',
textStyle: { color: '#fff' },
padding: [0, 0, 0, 0], // 下边距为内圈图例留空间
}
],
series: [
// 外圈环形图
{
name: '外圈数据',
type: 'pie',
radius: ['55%', '65%'],
center: ['50%', '35%'], // 稍微上移给图例留空间
data: res.bigData.map((item: any, index: any) => ({
...item,
itemStyle: { color: bigDataColor[index] } // 自定义颜色
})),
// data: [
// { value: 335, name: 'A类' },
// { value: 310, name: 'B类' },
// { value: 234, name: 'C类' },
// { value: 135, name: 'D类' }
// ],
label: { show: false }
},
// 内圈饼图
{
name: '内圈数据',
type: 'pie',
radius: ['0%', '40%'],
center: ['50%', '35%'], // 与外圈同中心
data: res.smallData.map((item: any, index: any) => ({
...item,
itemStyle: { color: smallDataColor[index] } // 自定义颜色
})),
// data: [
// { value: 100, name: '子类1' },
// { value: 200, name: '子类2' },
// { value: 300, name: '子类3' }
// ],
label: { show: false }
}
]
};
const option = handleSetConfig(res)
myChart.setOption(option);
myChart.resize();
@ -218,6 +149,90 @@ onBeforeUnmount(() => {
window.removeEventListener('resize', resizeChart);
myChart?.dispose();
});
const handleSetConfig = (res: any) => {
const option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
legend: [ // 使用两个legend对象分别控制
// 第一行：外圈圆环图例
{
data: res.bigType.map((name: string) => ({
name,
icon: 'circle'
})),
orient: 'horizontal',
top: 'bottom',
left: 'center',
padding: [0, 0, 60, 0], // 下边距为内圈图例留空间
textStyle: { color: '#fff' }
},
// 第二行：内圈饼图图例
{
data: res.smallType.map((name: string) => ({
name,
icon: 'rect'
})),
orient: 'horizontal',
top: 'bottom',
left: 'center',
textStyle: { color: '#fff' },
padding: [0, 0, 0, 0], // 下边距为内圈图例留空间
}
],
series: [
// 外圈环形图
{
name: '外圈数据',
type: 'pie',
radius: ['55%', '65%'],
center: ['50%', '35%'], // 稍微上移给图例留空间
data: res.bigData.map((item: any, index: any) => ({
...item,
itemStyle: { color: bigDataColor[index] } // 自定义颜色
})),
// data: [
// { value: 335, name: 'A类' },
// { value: 310, name: 'B类' },
// { value: 234, name: 'C类' },
// { value: 135, name: 'D类' }
// ],
label: { show: false }
},
// 内圈饼图
{
name: '内圈数据',
type: 'pie',
radius: ['0%', '40%'],
center: ['50%', '35%'], // 与外圈同中心
data: res.smallData.map((item: any, index: any) => ({
...item,
itemStyle: { color: smallDataColor[index] } // 自定义颜色
})),
// data: [
// { value: 100, name: '子类1' },
// { value: 200, name: '子类2' },
// { value: 300, name: '子类3' }
// ],
label: { show: false }
}
]
};
return option
}
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetRealData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
</script>

171
src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.vue
View File

@ -37,82 +37,7 @@ onMounted(async () => {
myChart = echarts.init(chartDom);
const rect = chartDom.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
// 计算center位置（20%，50%）对应的实际像素
const centerX = width * 0.5;
const centerY = height * 0.65;
const option = {
tooltip: {
trigger: 'item',
backgroundColor: '#fff', // 白色背景
borderColor: '#fff', // 白色边框
textStyle: {
color: '#333', // 文字颜色
fontSize: 14
},
formatter: function (params: any) {
return `
<div style="font-weight:bold">${params.name}</div>
`;
// ${params.value}%
}
},
graphic: { // 关键配置：在图表中心添加图片
elements: [
{
type: 'image',
style: {
image: GenderCenter,
width: 60,
height: 60
},
left: centerX - 30,
top: centerY - 30,
z: 10
}
]
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['60%', '70%'],
center: ['50%', '65%'], // 关键修改：强制居中 [水平位置, 垂直位置]
avoidLabelOverlap: false,
itemStyle: {
color: function (params: any) {
// 自定义颜色列表
const colorList = ['#0094FF', '#FF5E5E'];
return colorList[params.dataIndex];
}
},
label: {
show: false
},
emphasis: false,
labelLine: {
show: false
},
data: res.seriesData
}
],
legend: {
data: res.legendData,
// bottom: 0,
// left: 'center',
top: 0,
right: 0,
orient: 'horizontal', // 水平排列（默认值，可省略）
textStyle: {
color: '#fff'
},
}
};
const option = handleSetConfig(res)
myChart.setOption(option);
@ -181,6 +106,100 @@ onBeforeUnmount(() => {
myChart?.dispose();
});
const handleSetConfig = (res: any) => {
const chartDom = document.getElementById('GenderCustomerGroup');
if (!chartDom) return {};
const rect = chartDom.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
// 计算center位置（20%，50%）对应的实际像素
const centerX = width * 0.5;
const centerY = height * 0.65;
const option = {
tooltip: {
trigger: 'item',
backgroundColor: '#fff', // 白色背景
borderColor: '#fff', // 白色边框
textStyle: {
color: '#333', // 文字颜色
fontSize: 14
},
formatter: function (params: any) {
return `
<div style="font-weight:bold">${params.name}</div>
`;
// ${params.value}%
}
},
graphic: { // 关键配置：在图表中心添加图片
elements: [
{
type: 'image',
style: {
image: GenderCenter,
width: 60,
height: 60
},
left: centerX - 30,
top: centerY - 30,
z: 10
}
]
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['60%', '70%'],
center: ['50%', '65%'], // 关键修改：强制居中 [水平位置, 垂直位置]
avoidLabelOverlap: false,
itemStyle: {
color: function (params: any) {
// 自定义颜色列表
const colorList = ['#0094FF', '#FF5E5E'];
return colorList[params.dataIndex];
}
},
label: {
show: false
},
emphasis: false,
labelLine: {
show: false
},
data: res.seriesData
}
],
legend: {
data: res.legendData,
// bottom: 0,
// left: 'center',
top: 0,
right: 0,
orient: 'horizontal', // 水平排列（默认值，可省略）
textStyle: {
color: '#fff'
},
}
};
return option
}
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetSectionFlowCount()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
</script>

128
src/page/index/components/HotProductList/HotProductList.vue
View File

@ -43,6 +43,68 @@ onMounted(async () => {
myChart = echarts.init(chartDom);
const option = handleSetConfig(res)
myChart.setOption(option);
window.addEventListener('resize', resizeChart);
});
// 拿到热门商品榜单
const handleGetData = async () => {
let category: string[] = []
let seriesData: number[] = []
let realData: string[] = []
const req: any = {
action_type: "getCommoditySaleSort",
province_code: 5564,
rowNum: props?.pageType === 'left' ? 5 : 10
}
let HotProductList = sessionStorage.getItem('HotProductList')
let data: any = []
if (HotProductList) {
data = JSON.parse(HotProductList)
} else {
data = await handleGetSalesRank(req)
sessionStorage.setItem("HotProductList", JSON.stringify(data))
}
// const data = await handleGetSalesRank(req)
let list: any = data.COMMODITYSALE_DESC
list.reverse()
if (list && list.length > 0) {
list.forEach((item: any) => {
category.push(item.COMMODITY_NAME)
seriesData.push(item.SELLCOUNT)
})
}
let res = {
category: category,// x轴的内容
seriesData: seriesData,// y轴的数据
realData: realData
}
return res
}
const resizeChart = () => {
myChart?.resize();
};
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeChart);
myChart?.dispose();
});
const handleSetConfig = (res: any) => {
const option = {
yAxis: { // 改为 yAxis 显示分类数据
type: 'category',
@ -118,64 +180,20 @@ onMounted(async () => {
// + '笔'
}
};
myChart.setOption(option);
window.addEventListener('resize', resizeChart);
});
// 拿到热门商品榜单
const handleGetData = async () => {
let category: string[] = []
let seriesData: number[] = []
let realData: string[] = []
const req: any = {
action_type: "getCommoditySaleSort",
province_code: 5564,
rowNum: props?.pageType === 'left' ? 5 : 10
return option
}
let HotProductList = sessionStorage.getItem('HotProductList')
let data: any = []
if (HotProductList) {
data = JSON.parse(HotProductList)
} else {
data = await handleGetSalesRank(req)
sessionStorage.setItem("HotProductList", JSON.stringify(data))
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
// const data = await handleGetSalesRank(req)
let list: any = data.COMMODITYSALE_DESC
list.reverse()
if (list && list.length > 0) {
list.forEach((item: any) => {
category.push(item.COMMODITY_NAME)
seriesData.push(item.SELLCOUNT)
})
}
let res = {
category: category,// x轴的内容
seriesData: seriesData,// y轴的数据
realData: realData
}
return res
}
const resizeChart = () => {
myChart?.resize();
};
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeChart);
myChart?.dispose();
defineExpose({
handleUpdatePie
});
</script>

142
src/page/index/components/MallOrderStatistics/MallOrderStatistics.vue
View File

@ -37,6 +37,75 @@ onMounted(async () => {
myChart = echarts.init(chartDom);
const option = handleSetConfig(res)
myChart.setOption(option);
myChart.resize();
window.addEventListener('resize', resizeChart);
})
// 修改选择的季月年
const handleChangeType = async (value: number) => {
selectType.value = value
}
const handleGetData = async () => {
let category: 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)
let MallOrderStatistics = sessionStorage.getItem('MallOrderStatistics')
let data: any = []
if (MallOrderStatistics) {
data = JSON.parse(MallOrderStatistics)
} else {
data = await handleGetMallOrderSummary(req)
sessionStorage.setItem("MallOrderStatistics", JSON.stringify(data))
}
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轴的内容
TicketCountData: TicketCountData,// 订单笔数
SellAmountData: SellAmountData// 交易金额
}
return res
}
const resizeChart = () => {
myChart?.resize();
};
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeChart);
myChart?.dispose();
});
const handleSetConfig = (res: any) => {
const option = {
xAxis: {
type: 'category',
@ -133,73 +202,20 @@ onMounted(async () => {
},
color: ['#FF5E5E', '#FF9500']
};
myChart.setOption(option);
myChart.resize();
window.addEventListener('resize', resizeChart);
})
// 修改选择的季月年
const handleChangeType = async (value: number) => {
selectType.value = value
return option
}
const handleGetData = async () => {
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
let category: 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'),
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
console.log('dkosajdaihfysudafhs', req);
// const data = await handleGetMallOrderSummary(req)
let MallOrderStatistics = sessionStorage.getItem('MallOrderStatistics')
let data: any = []
if (MallOrderStatistics) {
data = JSON.parse(MallOrderStatistics)
} else {
data = await handleGetMallOrderSummary(req)
sessionStorage.setItem("MallOrderStatistics", JSON.stringify(data))
}
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轴的内容
TicketCountData: TicketCountData,// 订单笔数
SellAmountData: SellAmountData// 交易金额
}
return res
}
const resizeChart = () => {
myChart?.resize();
};
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeChart);
myChart?.dispose();
defineExpose({
handleUpdatePie
});
</script>

30
src/page/index/components/OverviewOfServiceArea/OverviewOfServiceArea.vue
View File

@ -21,8 +21,9 @@ const handleGetData = async () => {
ProvinceCode: "530000",
}
let OverviewOfServiceArea = sessionStorage.getItem('OverviewOfServiceArea')
console.log('OverviewOfServiceArea', OverviewOfServiceArea);
let data: any = []
if (OverviewOfServiceArea) {
data = JSON.parse(OverviewOfServiceArea)
@ -30,7 +31,6 @@ const handleGetData = async () => {
data = await handleGetServerpartServiceSummary(req)
sessionStorage.setItem("OverviewOfServiceArea", JSON.stringify(data))
}
console.log('fhdushgsu9dgvuisdvgsudvhnjldsfas', data);
// 因为之前不是这个接口 已经写了一份 为了不做过多的修改 按照老的 赋值走
@ -60,6 +60,8 @@ const handleGetData = async () => {
let WaterCount: number = data.WaterCount
// 休息区数量
let RestAreaCount: number = data.RestAreaCount
// 关停
let shutDown: number = data.ClosedCountCount
// 总数
let ServerpartTotalCount: number = data.ServerpartTotalCount
@ -75,6 +77,7 @@ const handleGetData = async () => {
"加水站": data.WaterStationCount,
"观景台": data.ViewingDeckCount,
"休息区": data.RestAreaCount,
"关停": data.shutDown,
"加油站": data.REFUELINGGUNTotal,
"充电桩": data.ChargingStationTotal,
"司机之家": data.HASPILOTLOUNGETotal,
@ -150,7 +153,8 @@ const handleGetData = async () => {
ParkingServiceCount: ParkingServiceCount,
WaterCount: WaterCount,
ServerpartTotalCount: ServerpartTotalCount,
RestAreaCount: RestAreaCount
RestAreaCount: RestAreaCount,
shutDown: shutDown
}
console.log('fdjsifjasjfs', res);
@ -214,6 +218,10 @@ const handleGetData = async () => {
}
defineExpose({
handleGetData
});
</script>
@ -241,15 +249,16 @@ const handleGetData = async () => {
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #ef5a0d;">{{
serviceInfo?.ParkingServiceCount || "0" }}</div>
</div>
</div>
<div class="OverviewOfServiceAreaContentTop">
<div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
<div class="OverviewOfServiceAreaContentTopItem">
<div class="OverviewOfServiceAreaContentTopItemLabel">加水站/座</div>
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #1aba80;">{{
serviceInfo?.WaterStationCount || "0" }}</div>
</div>
</div>
<div class="OverviewOfServiceAreaContentTop">
<div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
<div class="OverviewOfServiceAreaContentTopItemLabel">观景台/座</div>
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #f41a09;">{{
@ -260,6 +269,11 @@ const handleGetData = async () => {
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #b5ebf7;">{{
serviceInfo?.RestAreaCount || "0" }}</div>
</div>
<div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
<div class="OverviewOfServiceAreaContentTopItemLabel">关停/座</div>
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #fff;">{{
serviceInfo?.shutDown || "0" }}</div>
</div>
</div>

197
src/page/index/components/PreferenceType/PreferenceType.vue
View File

@ -36,96 +36,7 @@ onMounted(async () => {
myChart = echarts.init(chartDom);
const option = {
tooltip: { // 新增 tooltip 配置
trigger: 'item',
formatter: function (params: any) {
console.log('params', params);
let str: string = `<div>${params?.seriesName}：</div>`
for (let i = 0; i < res.category.length; i++) {
str += `<div>${res.category[i].name}：${params.value[i]}%</div>`
// list.push({ label: res.category[i], value: params.value + '%' })
}
return `<div>${str}</div>
`;
}
},
radar: {
indicator: res.category,
shape: 'circle',
splitNumber: 5,
radius: '60%', // 调整雷达图大小，留出空间给文字
center: ['50%', '65%'], // 2. 确保居中
axisName: {
color: 'rgb(255, 255, 255)',
padding: 10
},
splitLine: {
lineStyle: {
color: [
'rgba(25, 46, 76, 1)',
'rgba(25, 46, 76, 1)',
'rgba(25, 46, 76, 1)',
'rgba(25, 46, 76, 1)',
'rgba(25, 46, 76, 1)',
'rgba(25, 46, 76, 1)',
]
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(25, 46, 76, 1)',
}
}
},
series: [
{
name: "男性",
type: 'radar',
lineStyle: {
width: 1,
opacity: 0.5
},
data: res.seriesData,
symbol: 'none',
itemStyle: {
color: '#0094FF'
},
areaStyle: {
opacity: 0.1
}
},
{
name: "女性",
type: 'radar',
lineStyle: {
width: 1,
opacity: 0.5
},
data: res.seriesDataMan,
symbol: 'none',
itemStyle: {
color: '#FF5E5E'
},
areaStyle: {
opacity: 0.1
}
}
],
legend: {
data: ['男性', '女性'],
textStyle: {
color: '#fff'
},
top: 0,
right: 0
// bottom: -5,
// left: 'center',
},
};
const option = handleSetConfig(res)
myChart.setOption(option);
myChart.resize();
@ -235,6 +146,112 @@ onBeforeUnmount(() => {
myChart?.dispose();
});
const handleSetConfig = (res: any) => {
const option = {
tooltip: { // 新增 tooltip 配置
trigger: 'item',
formatter: function (params: any) {
console.log('params', params);
let str: string = `<div>${params?.seriesName}：</div>`
for (let i = 0; i < res.category.length; i++) {
str += `<div>${res.category[i].name}：${params.value[i]}%</div>`
// list.push({ label: res.category[i], value: params.value + '%' })
}
return `<div>${str}</div>
`;
}
},
radar: {
indicator: res.category,
shape: 'circle',
splitNumber: 5,
radius: '60%', // 调整雷达图大小，留出空间给文字
center: ['50%', '65%'], // 2. 确保居中
axisName: {
color: 'rgb(255, 255, 255)',
padding: 10
},
splitLine: {
lineStyle: {
color: [
'rgba(25, 46, 76, 1)',
'rgba(25, 46, 76, 1)',
'rgba(25, 46, 76, 1)',
'rgba(25, 46, 76, 1)',
'rgba(25, 46, 76, 1)',
'rgba(25, 46, 76, 1)',
]
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(25, 46, 76, 1)',
}
}
},
series: [
{
name: "男性",
type: 'radar',
lineStyle: {
width: 1,
opacity: 0.5
},
data: res.seriesData,
symbol: 'none',
itemStyle: {
color: '#0094FF'
},
areaStyle: {
opacity: 0.1
}
},
{
name: "女性",
type: 'radar',
lineStyle: {
width: 1,
opacity: 0.5
},
data: res.seriesDataMan,
symbol: 'none',
itemStyle: {
color: '#FF5E5E'
},
areaStyle: {
opacity: 0.1
}
}
],
legend: {
data: ['男性', '女性'],
textStyle: {
color: '#fff'
},
top: 0,
right: 0
// bottom: -5,
// left: 'center',
},
};
return option
}
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetSectionFlowCount()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
</script>

146
src/page/index/components/RegionalRevenue/RegionalRevenue.vue
View File

@ -63,70 +63,7 @@ const handleGoMounted = async () => {
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].toLocaleString()}元</div>
`;
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['0%', '70%'],
center: ['20%', '50%'], // 图形向左偏移
avoidLabelOverlap: false,
itemStyle: {
color: function (params: any) {
return colorList[params.dataIndex];
}
},
label: {
show: false
},
emphasis: false,
labelLine: {
show: false
},
data: res.pieData
}
],
legend: {
orient: 'vertical',
left: 200,
top: 'center',
align: 'left',
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
color: '#fff',
rich: {
name: {
width: 90, // 固定名称宽度
align: 'left',
padding: [0, 10, 0, 0]
},
percent: {
width: 50, // 固定百分比宽度
align: 'right',
padding: [0, 10, 0, 0]
}
}
},
formatter: function (name: any) {
let percentData: any = res.lengedData.filter((item: any) => item.name === name)
return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
}
}
};
const option = handleSetConfig(res)
myChart.setOption(option);
myChart.resize();
@ -226,6 +163,87 @@ onBeforeUnmount(() => {
myChart?.dispose();
});
const handleSetConfig = (res: any) => {
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].toLocaleString()}元</div>
`;
}
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['0%', '70%'],
center: ['20%', '50%'], // 图形向左偏移
avoidLabelOverlap: false,
itemStyle: {
color: function (params: any) {
return colorList[params.dataIndex];
}
},
label: {
show: false
},
emphasis: false,
labelLine: {
show: false
},
data: res.pieData
}
],
legend: {
orient: 'vertical',
left: 200,
top: 'center',
align: 'left',
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
color: '#fff',
rich: {
name: {
width: 90, // 固定名称宽度
align: 'left',
padding: [0, 10, 0, 0]
},
percent: {
width: 50, // 固定百分比宽度
align: 'right',
padding: [0, 10, 0, 0]
}
}
},
formatter: function (name: any) {
let percentData: any = res.lengedData.filter((item: any) => item.name === name)
return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
}
}
};
return option
}
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
</script>

142
src/page/index/components/ThisMonthBenefits/ThisMonthBenefits.vue
View File

@ -52,6 +52,79 @@ onMounted(async () => {
myChart = echarts.init(chartDom);
const option = handleSetConfig(res)
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)
let ThisMonthBenefits = sessionStorage.getItem('ThisMonthBenefits')
let data: any = []
if (ThisMonthBenefits) {
data = JSON.parse(ThisMonthBenefits)
} else {
data = await handleGetWelFareSummary(req)
sessionStorage.setItem("ThisMonthBenefits", JSON.stringify(data))
}
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
}
const handleSetConfig = (res: any) => {
const chartDom = document.getElementById('CoreCategory');
if (!chartDom) return {};
const rect = chartDom.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
// 计算center位置（20%，50%）对应的实际像素
const centerX = width * 0.21;
const centerY = height * 0.5;
const option = {
tooltip: { // 新增 tooltip 配置
trigger: 'item', // 触发类型：坐标轴触发
@ -121,68 +194,23 @@ onMounted(async () => {
}
]
};
return option
}
myChart.setOption(option);
myChart.resize();
window.addEventListener('resize', resizeChart);
})
const resizeChart = () => {
myChart?.resize();
};
const handleUpdatePie = async () => {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeChart);
myChart?.dispose();
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
const handleGetData = async () => {
const req: any = {
ProvinceCode: '530000',
StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM')
}
// const data = await handleGetWelFareSummary(req)
let ThisMonthBenefits = sessionStorage.getItem('ThisMonthBenefits')
let data: any = []
if (ThisMonthBenefits) {
data = JSON.parse(ThisMonthBenefits)
} else {
data = await handleGetWelFareSummary(req)
sessionStorage.setItem("ThisMonthBenefits", JSON.stringify(data))
}
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>

7
src/page/index/components/TradingAlert/TradingAlert.vue
View File

@ -39,9 +39,6 @@ const handleGetData = async () => {
sessionStorage.setItem("TradingAlert", JSON.stringify(data))
}
console.log('skodpijasidjaslfddfas', data);
TradingOtherData.value = {
@ -76,6 +73,10 @@ const handleGetData = async () => {
}
}
defineExpose({
handleGetData
});
</script>
<template>

29
src/page/index/components/TrendOfTrafficFlow/TrendOfTrafficFlow.vue
View File

@ -55,6 +55,14 @@ const handleGoMounted = async () => {
myChart = echarts.init(chartDom);
const option: any = handleSetConfig(res)
myChart.setOption(option);
window.addEventListener('resize', resizeChart);
}
// 配置图表的config
const handleSetConfig = (res: any) => {
const option = {
xAxis: {
type: 'category',
@ -168,10 +176,7 @@ const handleGoMounted = async () => {
type: 'scroll' // 如果图例过长，启用滚动
},
};
myChart.setOption(option);
window.addEventListener('resize', resizeChart);
return option
}
// 拿到断面流量数据
@ -290,6 +295,18 @@ const handleGetSectionFlowCount = async () => {
return res
}
// 更新图表数据
const handleUpdatePie = async () => {
const res = await handleGetSectionFlowCount()
// 先清空旧的 series
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const option: any = handleSetConfig(res)
myChart.setOption(option);
}
const resizeChart = () => {
myChart?.resize();
};
@ -298,6 +315,10 @@ onBeforeUnmount(() => {
window.removeEventListener('resize', resizeChart);
myChart?.dispose();
});
defineExpose({
handleUpdatePie
});
</script>
<template>

30
src/page/index/components/VehicleModelStay/VehicleModelStay.vue
View File

@ -46,6 +46,7 @@ watch(
{ deep: true }
);
// 初始运行的方法
const handleGoMounted = async () => {
const res: any = await handleGetData()
@ -58,6 +59,15 @@ const handleGoMounted = async () => {
myChart = echarts.init(chartDom);
const option = handleSetConfig(res)
myChart.setOption(option);
myChart.resize();
window.addEventListener('resize', resizeChart);
}
const handleSetConfig = (res: any) => {
const option = {
xAxis: {
type: 'category',
@ -169,11 +179,7 @@ const handleGoMounted = async () => {
},
color: ['#008CFF', '#69BCFF'] // 只需要两个颜色对应两个系列
};
myChart.setOption(option);
myChart.resize();
window.addEventListener('resize', resizeChart);
return option
}
// 拿到数据的方法
@ -283,7 +289,21 @@ onBeforeUnmount(() => {
myChart?.dispose();
});
const handleUpdatePie = async () => {
if (myChart) {
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
}
const res: any = await handleGetData()
const option = handleSetConfig(res)
myChart.setOption(option)
}
defineExpose({
handleUpdatePie
});
</script>
<template>

52
src/page/index/components/VehiclesEntering/VehiclesEntering.vue
View File

@ -58,6 +58,21 @@ const handleGoMounted = async () => {
myChart2 = echarts.init(chartDom2);
const option = handleSetConfig(res)
const option2 = handleSetConfig2(res)
myChart.setOption(option);
myChart2.setOption(option2);
myChart.resize();
myChart2.resize();
window.addEventListener('resize', resizeChart);
window.addEventListener('resize', resizeChart2);
}
const handleSetConfig = (res: any) => {
const option = {
tooltip: {
trigger: 'axis', // 触发类型：坐标轴触发
@ -204,8 +219,10 @@ const handleGoMounted = async () => {
],
color: ['#008CFF', '#69BCFF', '#FF5E5E', '#FF9500'] // Custom colors for each series
};
return option
}
const handleSetConfig2 = (res: any) => {
const option2 = {
tooltip: {
trigger: 'axis', // 触发类型：坐标轴触发
@ -318,15 +335,7 @@ const handleGoMounted = async () => {
}
],
}
myChart.setOption(option);
myChart2.setOption(option2);
myChart.resize();
myChart2.resize();
window.addEventListener('resize', resizeChart);
window.addEventListener('resize', resizeChart2);
return option2
}
// 拿到入区车辆的趋势
@ -485,7 +494,6 @@ const handleGetSectionFlowCount = async () => {
return res
}
const resizeChart = () => {
myChart?.resize();
};
@ -498,6 +506,28 @@ onBeforeUnmount(() => {
myChart2?.dispose();
});
// 更新图表数据
const handleUpdatePie = async () => {
const res: any = await handleGetSectionFlowCount()
myChart.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
myChart2.setOption({
series: [], // 清空 series
}, { replaceMerge: 'series' }); // 替换 series 部分
const option = handleSetConfig(res)
const option2 = handleSetConfig2(res)
myChart.setOption(option)
myChart2.setOption(option2)
}
defineExpose({
handleUpdatePie
});
</script>

3
src/page/index/components/supplierListBox/supplierListBox.vue
View File

@ -72,6 +72,9 @@ const handleGetData = async () => {
}
defineExpose({
handleGetData
});
</script>
<template>

323
src/page/index/index.vue
View File

@ -65,6 +65,7 @@ import MemberMall from './components/MemberMall/index.vue'
import AnalysisOfMember from './components/AnalysisOfMember/AnalysisOfMember.vue'
import AreaLegend from './components/AreaLegend/AreaLegend.vue';
import { useRouter } from 'vue-router'; // 新增
import moment from 'moment';
@ -112,15 +113,281 @@ let mapClickComeForm = ref<string>("")
// 当前招商信息的枚举
let noticeMessageObj = ref<any>()
// 创建组件实例
// 服务区概况
const OverviewOfServiceAreaRef = ref<any>()
// 交易预警
const TradingAlertRef = ref<any>()
// 核心经营数据
const CoreBusinessDataRef = ref<any>()
// 断面流量趋势
const TrendOfTrafficFlowRef = ref<any>()
// 入区车流趋势
const VehiclesEnteringRef = ref<any>()
// 经营效益趋势
const VehicleModelStayRef = ref<any>()
// 年龄
const CustomerAgeGroupRef = ref<any>()
// 性别
const GenderCustomerGroupRef = ref<any>()
// 偏好类型
const PreferenceTypeRef = ref<any>()
// 客群特征分析
const CustomerGroupRef = ref<any>()
// 客群消费偏好
const CustomerConsumptionPreferencesRef = ref<any>()
// 消费转化率对比图
const ConsumptionConversionRef = ref<any>()
// 消费水平
const ConsumptionLevelRef = ref<any>()
// 消费时段分析
const ConsumptionPeriodRef = ref<any>()
// 品牌消费水平
const BrandConsumptionLevelRef = ref<any>()
// 营收特征
const BusinessCaseRef = ref<any>()
// 区域营收占比
const RegionalRevenueRef = ref<any>()
// 业态结构占比
const BusinessStructureRef = ref<any>()
// 节假日营收
const FestivalRevenueSumInfoRef = ref<any>()
// 热门商品榜单
const HotProductListRef = ref<any>()
// 商户类别比例图 和 下面的列表
const BrandDetailRef = ref<any>()
// 供应商
const SupplierListBoxRef = ref<any>()
// 商城订单统计
const MallOrderStatisticsRef = ref<any>()
// 本月福利金发送额度
const ThisMonthBenefitsRef = ref<any>()
onMounted(() => {
let currentUser: any = sessionStorage.getItem('currentUser')
if (!currentUser) {
router.push('/login')
}
// 先判断当前是否已经存在了 之前的整点数据
let integralPoint: string = sessionStorage.getItem('integralPoint') || ""
console.log('integralPointintegralPoint', integralPoint);
// 如果有 就拿当前时间取对比
if (integralPoint) {
// 如果缓存里面的时间 跟当前的整点时间一样 那就触发 定时器方法
let nowTime: string = moment().format('YYYY-MM-DD HH')
let time: string = nowTime + ':00:00'
// timerMethod()
if (time === integralPoint) {
// 调用定时器方法
timerMethod()
} else {
handleGetUpdateAllData()
}
} else {
// 如果没有整点缓存 那就拿到当前最近的整点数据
let nowTime: string = moment().format('YYYY-MM-DD HH')
let time: string = nowTime + ':00:00'
sessionStorage.setItem('integralPoint', time)
}
})
// 定时器方法
const timerMethod = () => {
// 距离整点 不同时间的调用平路的设置
let checkInterval = 60 * 1000; // 默认1分钟检查一次
const now = new Date();
const secondsToNextHour = (60 - now.getMinutes()) * 60 - now.getSeconds();
// 关键优化：动态调整检查频率
if (secondsToNextHour <= 300) { // 距离整点5分钟时
checkInterval = 1000; // 切换到1秒检查
} else if (secondsToNextHour <= 1800) { // 距离整点30分钟时
checkInterval = 30 * 1000; // 30秒检查
} else {
checkInterval = 60 * 1000; // 否则1分钟检查
}
setTimeout(() => {
// handleGetUpdateAllData()
if (new Date().getMinutes() === 0) {
handleGetUpdateAllData()
}
timerMethod(); // 递归调用
}, checkInterval);
}
// 更新全部图表的缓存数据的方法
const handleGetUpdateAllData = () => {
// 清除原本的缓存数据
handleClearCacheData()
// 服务区概况
OverviewOfServiceAreaRef.value.handleGetData()
// 交易预警
TradingAlertRef.value.handleGetData()
// 核心经营数据
CoreBusinessDataRef.value.handleGetMapRealData()
// 断面流量趋势
TrendOfTrafficFlowRef.value.handleUpdatePie()
// 入区车流趋势
VehiclesEnteringRef.value.handleUpdatePie()
// 经营效益
VehicleModelStayRef.value.handleUpdatePie()
if (CustomerAgeGroupRef.value) {
// 年龄
CustomerAgeGroupRef.value.handleUpdatePie()
}
if (GenderCustomerGroupRef.value) {
// 性别
GenderCustomerGroupRef.value.handleUpdatePie()
}
if (PreferenceTypeRef.value) {
// 偏好类型
PreferenceTypeRef.value.handleUpdatePie()
}
if (CustomerGroupRef.value) {
// 客群特征分析
CustomerGroupRef.value.handleUpdatePie()
}
if (CustomerConsumptionPreferencesRef.value) {
// 客群消费偏好
CustomerConsumptionPreferencesRef.value.handleUpdatePie()
}
if (ConsumptionConversionRef.value) {
// 消费转化率对比图
ConsumptionConversionRef.value.handleUpdatePie()
}
if (ConsumptionConversionRef.value) {
// 消费水平
ConsumptionConversionRef.value.handleUpdatePie()
}
if (ConsumptionPeriodRef.value) {
// 消费时段分析
ConsumptionPeriodRef.value.handleUpdatePie()
}
if (BrandConsumptionLevelRef.value) {
// 品牌消费水平
BrandConsumptionLevelRef.value.handleUpdatePie()
}
if (BusinessCaseRef.value) {
// 营收特征
BusinessCaseRef.value.handleUpdatePie()
}
if (RegionalRevenueRef.value) {
// 区域营收占比
RegionalRevenueRef.value.handleUpdatePie()
}
if (BusinessStructureRef.value) {
// 业态结构占比
BusinessStructureRef.value.handleUpdatePie()
}
if (FestivalRevenueSumInfoRef.value) {
// 节假日营收
FestivalRevenueSumInfoRef.value.handleUpdatePie()
}
if (HotProductListRef.value) {
// 热门商品榜单
HotProductListRef.value.handleUpdatePie()
}
if (BrandDetailRef.value) {
// 商户类别比例图 和 下面的列表
BrandDetailRef.value.handleUpdatePie()
}
if (SupplierListBoxRef.value) {
// 供应商
SupplierListBoxRef.value.handleGetData()
}
if (MallOrderStatisticsRef.value) {
// 商城订单统计
MallOrderStatisticsRef.value.handleGetData()
}
if (ThisMonthBenefitsRef.value) {
// 本月福利金额
ThisMonthBenefitsRef.value.handleGetData()
}
}
// 清空原先的缓存数据
const handleClearCacheData = () => {
// 清除服务区概况的设备信息的缓存
sessionStorage.setItem("OverviewOfServiceArea", '')
sessionStorage.setItem('OverviewOfServiceAreaAI', '')
// 清除服务区承载的缓存
sessionStorage.setItem("OverviewOfServiceAreaBusiness", '')
sessionStorage.setItem("OverviewOfServiceAreaBusinessAI", '')
// 清除交易预警的缓存
sessionStorage.setItem("TradingAlert", '')
sessionStorage.setItem("TradingAlertAI", '')
// 清除实时数据的缓存
sessionStorage.setItem("CoreBusinessData", '')
sessionStorage.setItem("CoreBusinessDataAI", '')
sessionStorage.setItem("CoreBusinessDataMonth", '')
sessionStorage.setItem("CoreBusinessDataMonthAI", '')
// 断面流量趋势
sessionStorage.setItem("TrendOfTrafficFlow", '')
sessionStorage.setItem("TrendOfTrafficFlowYes", '')
sessionStorage.setItem("TrendOfTrafficFlowYesAI", '')
sessionStorage.setItem("TrendOfTrafficFlowYesAI", '')
// 经营效益趋势
sessionStorage.setItem("VehicleModelStay", '')
sessionStorage.setItem("VehicleModelStayAI", '')
// 年龄
sessionStorage.setItem("CustomerAgeGroup", '')
sessionStorage.setItem("CustomerAgeGroupAI", '')
// 性别
sessionStorage.setItem("GenderCustomerGroup", '')
sessionStorage.setItem("GenderCustomerGroupAI", '')
// 偏好类型
sessionStorage.setItem("PreferenceType", '')
sessionStorage.setItem("PreferenceTypeAI", '')
// 客群特征分析
sessionStorage.setItem("CustomerGroup", '')
sessionStorage.setItem("CustomerGroupAI", '')
// 客群消费偏好
sessionStorage.setItem("CustomerConsumptionPreferences", '')
sessionStorage.setItem("CustomerConsumptionPreferencesAI", '')
// 消费转化率对比图
sessionStorage.setItem("ConsumptionConversion", '')
sessionStorage.setItem("ConsumptionConversionAI", '')
// 消费水平
sessionStorage.setItem("ConsumptionLevel", '')
sessionStorage.setItem("ConsumptionLevelAI", '')
// 消费时段分析
sessionStorage.setItem("ConsumptionPeriod", '')
sessionStorage.setItem("ConsumptionPeriodAI", '')
// 品牌消费水平
sessionStorage.setItem("BrandConsumptionLevel", '')
sessionStorage.setItem("BrandConsumptionLevelAI", '')
// 营收特征
sessionStorage.setItem("BusinessCase", '')
sessionStorage.setItem("BusinessCaseAI", '')
// 区域营收占比
sessionStorage.setItem("RegionalRevenue", '')
sessionStorage.setItem("RegionalRevenueAI", '')
// 业态结构占比
sessionStorage.setItem("BusinessStructure", '')
sessionStorage.setItem("BusinessStructureAI", '')
// 节假日营收
sessionStorage.setItem("FestivalRevenueSumInfo", '')
sessionStorage.setItem("FestivalRevenueSumInfoAI", '')
// 热门商品榜单
sessionStorage.setItem("HotProductList", '')
// 商户类别比例图 和 下面的列表
sessionStorage.setItem("BrandDetail", '')
sessionStorage.setItem("BrandTab", '')
sessionStorage.setItem("BrandTabList", '')
// 供应商
sessionStorage.setItem("supplierListBox", '')
sessionStorage.setItem("supplierListBox2", '')
// 商城订单统计
sessionStorage.setItem("MallOrderStatistics", '')
// 本月福利金额
sessionStorage.setItem("ThisMonthBenefits", '')
}
// 改变页面样式
const handleChangePageType = () => {
if (pageType.value === 'center') {
@ -223,7 +490,7 @@ const handleStopPrint = () => {
<div v-show="selectPageTab === 1">
<div class="content169LeftContent">
<!-- 服务区概况 -->
<OverviewOfServiceArea />
<OverviewOfServiceArea ref="OverviewOfServiceAreaRef" />
<NewBigTitleBox :title="'特情事件'" style="margin-top: 15px;" />
@ -234,7 +501,7 @@ const handleStopPrint = () => {
<!-- <BusyTradingRanking style="margin-top: 11px;" /> -->
<!-- 交易预警 -->
<TradingAlert />
<TradingAlert ref="TradingAlertRef" />
</div>
</div>
@ -258,7 +525,8 @@ const handleStopPrint = () => {
<div class="content169Center">
<!-- 核心经营数据 -->
<CoreBusinessData :currentService="currentService" style="position: relative;z-index: 9;" />
<CoreBusinessData ref="CoreBusinessDataRef" :currentService="currentService"
style="position: relative;z-index: 9;" />
<div v-show="selectPageTab === 1 && !showDialogBox">
<!-- 地图 -->
@ -324,12 +592,12 @@ const handleStopPrint = () => {
<div class="content169LeftContent" style="margin-top: 21px;">
<div class="leftContentBoxItem">
<!-- 断面流量趋势 -->
<TrendOfTrafficFlow :currentService="currentService" />
<TrendOfTrafficFlow ref="TrendOfTrafficFlowRef" :currentService="currentService" />
</div>
<div class="leftContentBoxItem" style="margin-top: 23px;">
<!-- 入区车流趋势 -->
<VehiclesEntering :currentService="currentService" />
<VehiclesEntering ref="VehiclesEnteringRef" :currentService="currentService" />
</div>
<!-- <div class="leftContentBoxItem" style="margin-top: 30px;"> -->
@ -340,7 +608,7 @@ const handleStopPrint = () => {
<div class="leftContentBoxItem" style="margin-top: 33px;">
<!-- 经营效益趋势 -->
<VehicleModelStay />
<VehicleModelStay ref="VehicleModelStayRef" />
</div>
</div>
</div>
@ -383,28 +651,32 @@ const handleStopPrint = () => {
<div class="leftBottomContent">
<!-- 年龄 -->
<CustomerAgeGroup style="margin-top: 20px;width: calc((100% - 57px) / 3);" />
<CustomerAgeGroup ref="CustomerAgeGroupRef"
style="margin-top: 20px;width: calc((100% - 57px) / 3);" />
<!-- 性别 -->
<GenderCustomerGroup style="margin-left: 23px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
<GenderCustomerGroup ref="GenderCustomerGroupRef"
style="margin-left: 23px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
<!-- 停留时长 -->
<!-- <CustomerGroupStay style="margin-left: 20px;margin-top: 20px;" /> -->
<!-- 偏好类型 -->
<PreferenceType style="margin-left: 34px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
<PreferenceType ref="PreferenceTypeRef"
style="margin-left: 34px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
</div>
<div class="left3stBottom" style="margin-top: 0;display: flex;flex-wrap: wrap;">
<div class="left3stBottomItem" style="width: calc((100% - 57px) / 3);">
<!-- 客群特征分析 -->
<CustomerGroup style="margin-top: 15px;" />
<CustomerGroup ref="CustomerGroupRef" style="margin-top: 15px;" />
</div>
<div class="left3stBottomItem" style="width: calc((100% - 57px) / 3 * 2);margin-left: 23px;">
<!-- 客群消费偏好 -->
<CustomerConsumptionPreferences style="margin-top: 15px;" />
<CustomerConsumptionPreferences ref="CustomerConsumptionPreferencesRef"
style="margin-top: 15px;" />
</div>
<!-- <div class="left3stBottomItem">
@ -428,27 +700,28 @@ const handleStopPrint = () => {
<div class="left3stBottomItemLeft">
<div class="left3stBottomItem">
<!-- 消费转化率对比图 -->
<ConsumptionConversion style="margin-top: 15px;" />
<ConsumptionConversion ref="ConsumptionConversionRef" style="margin-top: 15px;" />
</div>
<div class="left3stBottomItem">
<!-- 消费水平 -->
<ConsumptionLevel style="margin-top: 15px;" />
<ConsumptionLevel ref="ConsumptionLevelRef" style="margin-top: 15px;" />
</div>
<div class="left3stBottomItem">
<!-- 消费时段分析 -->
<ConsumptionPeriod style="margin-top: 15px;" />
<ConsumptionPeriod ref="ConsumptionPeriodRef" style="margin-top: 15px;" />
</div>
<div class="left3stBottomItem">
<!-- 品牌消费水平 -->
<BrandConsumptionLevel style="margin-top: 15px;" />
<BrandConsumptionLevel ref="BrandConsumptionLevelRef" style="margin-top: 15px;" />
</div>
</div>
<div class="left3stBottomItemRight">
<BusinessCase :currentService="currentService" :selectTab="selectTab" />
<!-- 营收特征 -->
<BusinessCase ref="BusinessCaseRef" :currentService="currentService" :selectTab="selectTab" />
</div>
</div>
@ -480,14 +753,15 @@ const handleStopPrint = () => {
<NewBigTitleBox :title="'经营业态'" style="margin-top: 20px;" />
<div class="rightContentBox">
<!-- 区域营收占比 -->
<RegionalRevenue :currentService="currentService" style="margin-top: 10px;" />
<RegionalRevenue ref="RegionalRevenueRef" :currentService="currentService"
style="margin-top: 10px;" />
<!-- 多业态收入 -->
<!-- <MultiIndustryIncome style="margin-top: 34px;" :currentService="currentService" /> -->
<!-- 业态结构占比 -->
<!-- style="margin-top: 22px;" -->
<BusinessStructure :currentService="currentService" />
<BusinessStructure ref="BusinessStructureRef" :currentService="currentService" />
</div>
<NewBigTitleBox :title="'节假日营收'">
@ -503,7 +777,8 @@ const handleStopPrint = () => {
</NewBigTitleBox>
<!-- 节假日营收 -->
<!-- <FestivalRevenue :currentService="currentService" :FestivalValue="FestivalValue" /> -->
<FestivalRevenueSumInfo :currentService="currentService" :FestivalValue="FestivalValue" />
<FestivalRevenueSumInfo ref="FestivalRevenueSumInfoRef" :currentService="currentService"
:FestivalValue="FestivalValue" />
<!-- 电商模块 -->
<!-- <modalTitle :title="'电商模块'" style="margin-top: 20px;" /> -->
@ -624,7 +899,7 @@ const handleStopPrint = () => {
<!-- <AssessmentScoringRanking style="margin-top: 19px;" /> -->
<!-- 热门商品榜单 -->
<HotProductList style="margin-top: 20px;" :pageType="'left'" />
<HotProductList ref="HotProductListRef" style="margin-top: 20px;" :pageType="'left'" />
</div>
<!-- 客群特征分析 -->
@ -642,12 +917,12 @@ const handleStopPrint = () => {
<NewBigTitleBox :title="'品牌'" style="margin-top: 54px;" />
<!-- 商户类别比例图 和 下面的列表 -->
<BrandDetail />
<BrandDetail ref="BrandDetailRef" />
</div>
<div class="content1694stItem">
<NewBigTitleBox :title="'供应商'" style="margin-top: 54px;" />
<SupplierListBox />
<SupplierListBox ref="SupplierListBoxRef" />
<!-- 在线服务区和在线收银机 -->
<!-- <TodayTrend /> -->
@ -664,12 +939,12 @@ const handleStopPrint = () => {
<NewBigTitleBox :title="'电商模块'" style="margin-top: 28px;" />
<!-- 商城订单统计 -->
<MallOrderStatistics style="margin-top: 20px;" />
<MallOrderStatistics ref="MallOrderStatisticsRef" style="margin-top: 20px;" />
<NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />
<!-- 本月福利金发送额度 -->
<ThisMonthBenefits style="margin-top: 10px;" />
<ThisMonthBenefits ref="ThisMonthBenefitsRef" style="margin-top: 10px;" />
<!-- 核心品类占比 -->
<!-- <CoreCategory style="margin-top: 10px;" /> -->