545 lines
17 KiB
Vue
545 lines
17 KiB
Vue
<script setup lang="ts">
|
||
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||
import SmallTitle from '../smallTitle/smallTitle.vue'
|
||
import RevenueYOYIcon from '../../../../assets/image/RevenueYOYIcon.png'
|
||
import './BusinessCase.less'
|
||
import moment from 'moment';
|
||
import { handleCodeGetRevenueCompare, handleGetRevenueTrend } from '../../service';
|
||
import * as echarts from 'echarts/core';
|
||
import { BarChart, LineChart } from 'echarts/charts';
|
||
import {
|
||
GridComponent,
|
||
TitleComponent,
|
||
TooltipComponent,
|
||
LegendComponent,
|
||
DatasetComponent, // 必须添加！否则 dataset 功能无效
|
||
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'
|
||
|
||
|
||
|
||
// 注册组件
|
||
echarts.use([
|
||
LineChart,
|
||
BarChart,
|
||
GridComponent,
|
||
TitleComponent,
|
||
TooltipComponent,
|
||
LegendComponent,
|
||
DatasetComponent, // 必须注册
|
||
TransformComponent, // 必须注册
|
||
CanvasRenderer
|
||
]);
|
||
|
||
|
||
let myChart: echarts.ECharts;
|
||
let myChartBottom: echarts.ECharts;
|
||
|
||
const tabList: any = [
|
||
{ label: "营收金额", value: 1 },
|
||
{ label: "客单量", value: 2 },
|
||
{ label: "客单均价", value: 3 },
|
||
]
|
||
let selectTab = ref<number>(1)
|
||
|
||
|
||
|
||
// 当前请求来的实际数据
|
||
let realData = ref<any>()
|
||
// 请求到的整个数据
|
||
let getAllData = ref<any>()
|
||
|
||
// 传入的数据
|
||
const props = defineProps<{
|
||
currentService?: any;
|
||
selectTab?: any
|
||
}>();
|
||
|
||
// 监听传入的选中服务区
|
||
watch(
|
||
() => props.currentService,
|
||
(newVal, oldVal) => {
|
||
handleGetData()
|
||
handleGetBottomData()
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
// 监听传入的选中服务区
|
||
watch(
|
||
() => props.selectTab,
|
||
(newVal, oldVal) => {
|
||
handleShowData(newVal)
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
onMounted(async () => {
|
||
// 用tab可以修改的方法
|
||
await handleGetData()
|
||
// await handleGetBottomData()
|
||
})
|
||
|
||
|
||
// 切换tab的内容
|
||
const handleChangeTab = async (value: number) => {
|
||
selectTab.value = value
|
||
handleShowData(value)
|
||
}
|
||
|
||
// 拿到数据的方法
|
||
const handleGetData = async () => {
|
||
const req: any = {
|
||
ProvinceCode: "530000",
|
||
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
|
||
ServerpartId: props.currentService?.SERVERPART_ID || "",
|
||
}
|
||
|
||
let BusinessCase = sessionStorage.getItem('BusinessCase')
|
||
let data: any = []
|
||
if (BusinessCase) {
|
||
data = JSON.parse(BusinessCase)
|
||
} else {
|
||
data = await handleCodeGetRevenueCompare(req)
|
||
sessionStorage.setItem("BusinessCase", JSON.stringify(data))
|
||
}
|
||
|
||
// const data = await handleCodeGetRevenueCompare(req)
|
||
|
||
getAllData.value = data
|
||
|
||
// 营收金额
|
||
let category: any = ['product']
|
||
let monthList: number[] = []
|
||
let list = data.RevenueAmountList
|
||
if (list && list.length > 0) {
|
||
list.forEach((item: any, index: number) => {
|
||
category.push(item.name)
|
||
if (index === 0 && item.data && item.data.length > 0) {
|
||
item.data.forEach((subItem: any) => {
|
||
monthList.push(subItem[0])
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
let aiObj1: any = {}
|
||
// 营收
|
||
let res: any = []
|
||
if (monthList && monthList.length > 0) {
|
||
monthList.forEach((item: number) => {
|
||
let list: any = [`${item}月`]
|
||
data.RevenueAmountList.forEach((subItem: any) => {
|
||
let newData: any = subItem.data
|
||
list.push(Number(((newData[item - 1][1]) / 10000).toFixed(2)))
|
||
})
|
||
aiObj1[`${item}月`] = `工作日平均${list[1]}元,周末平均${list[2]}元,节假日平均${list[3]}元`
|
||
res.push(list)
|
||
})
|
||
}
|
||
|
||
// 客单量
|
||
let res2: any = []
|
||
let aiObj2: any = {}
|
||
if (monthList && monthList.length > 0) {
|
||
monthList.forEach((item: number) => {
|
||
let list: any = [`${item}月`]
|
||
data.TicketCountList.forEach((subItem: any) => {
|
||
let newData: any = subItem.data
|
||
list.push(Number(((newData[item - 1][1]) / 10000).toFixed(2)))
|
||
})
|
||
aiObj2[`${item}月`] = `工作日平均${list[1]}元,周末平均${list[2]}元,节假日平均${list[3]}元`
|
||
res2.push(list)
|
||
})
|
||
}
|
||
|
||
// 均价
|
||
let res3: any = []
|
||
let aiObj3: any = {}
|
||
if (monthList && monthList.length > 0) {
|
||
monthList.forEach((item: number) => {
|
||
let list: any = [`${item}月`]
|
||
data.AvgTicketAmountList.forEach((subItem: any) => {
|
||
let newData: any = subItem.data
|
||
list.push(newData[item - 1][1])
|
||
})
|
||
aiObj3[`${item}月`] = `工作日平均${list[1]}元,周末平均${list[2]}元,节假日平均${list[3]}元`
|
||
res3.push(list)
|
||
})
|
||
}
|
||
|
||
|
||
let obj: any = {
|
||
1: [category, ...res],
|
||
2: [category, ...res2],
|
||
3: [category, ...res3],
|
||
}
|
||
realData.value = obj
|
||
|
||
let BusinessCaseAI = sessionStorage.getItem('BusinessCaseAI')
|
||
if (BusinessCaseAI) { } else {
|
||
let aiObj: any = {
|
||
"营收金额": aiObj1,
|
||
"客单量": aiObj2,
|
||
"客单均价": aiObj3,
|
||
}
|
||
sessionStorage.setItem("BusinessCaseAI", JSON.stringify(aiObj))
|
||
}
|
||
|
||
handleShowData(selectTab.value)
|
||
}
|
||
|
||
// 拿到底部的方法
|
||
const handleGetBottomData = async () => {
|
||
const req: any = {
|
||
ProvinceCode: "530000",
|
||
StatisticsDate: moment().format('YYYY'),
|
||
StatisticsType: 1,
|
||
ServerpartId: props.currentService?.SERVERPART_ID || "",
|
||
}
|
||
const yesReq: any = {
|
||
ProvinceCode: "530000",
|
||
StatisticsDate: moment().subtract(1, 'y').format('YYYY'),
|
||
StatisticsType: 1,
|
||
ServerpartId: props.currentService?.SERVERPART_ID || "",
|
||
}
|
||
const data = await handleGetRevenueTrend(req)
|
||
const yesData = await handleGetRevenueTrend(yesReq)
|
||
|
||
|
||
let category: string[] = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||
let currentYear: number[] = []
|
||
let lastYear: number[] = []
|
||
|
||
if (data && data.length > 0) {
|
||
data.forEach((item: any) => {
|
||
currentYear.push(Number((Number(item.value) / 10000).toFixed(2)))
|
||
})
|
||
}
|
||
|
||
if (yesData && yesData.length > 0) {
|
||
yesData.forEach((item: any) => {
|
||
lastYear.push(Number((Number(item.value) / 10000).toFixed(2)))
|
||
})
|
||
}
|
||
|
||
await handleShowBottomData({
|
||
category: category,
|
||
currentYear: currentYear,
|
||
lastYear: lastYear,
|
||
})
|
||
|
||
}
|
||
|
||
// 切换显示的数据源 营收特征分析的
|
||
const handleShowData = async (value: number) => {
|
||
let data = realData.value[value]
|
||
|
||
|
||
|
||
const chartDom = document.getElementById('featureAnalysis');
|
||
if (!chartDom) return;
|
||
|
||
myChart = echarts.init(chartDom);
|
||
|
||
const option = {
|
||
legend: {
|
||
top: 15,
|
||
right: 10,
|
||
textStyle: {
|
||
color: '#ffffff' // 设置图例文字为白色
|
||
}
|
||
},
|
||
tooltip: { trigger: 'axis' },
|
||
dataset: { source: data },
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {
|
||
width: '80',
|
||
interval: 0,
|
||
color: '#fff',
|
||
formatter: '{value}' // 刻度值保持纯数字
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false // 隐藏刻度小线条
|
||
}
|
||
},
|
||
yAxis: {
|
||
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: '80',
|
||
color: '#fff'
|
||
},
|
||
nameTextStyle: {
|
||
color: '#fff', // 名称颜色
|
||
padding: [0, 0, 0, 30] // 名称位置调整
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'bar',
|
||
itemStyle: {
|
||
color: '#0094FF' // 第一根柱子的颜色
|
||
}
|
||
},
|
||
{
|
||
type: 'bar',
|
||
itemStyle: {
|
||
color: '#69BCFF' // 第一根柱子的颜色
|
||
}
|
||
},
|
||
{
|
||
type: 'bar',
|
||
itemStyle: {
|
||
color: '#6B7C8B' // 第一根柱子的颜色
|
||
}
|
||
}],
|
||
grid: {
|
||
left: '0', // 左侧间距
|
||
right: '0', // 右侧间距
|
||
bottom: '0', // 底部间距
|
||
top: '50', // 顶部间距
|
||
containLabel: true // 确保坐标轴标签在grid内
|
||
},
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
window.addEventListener('resize', resizeChart);
|
||
}
|
||
|
||
// 切换显示数据源 营收同比分析的
|
||
const handleShowBottomData = async (res: any) => {
|
||
|
||
const chartDom = document.getElementById('featureAnalysisBottom');
|
||
if (!chartDom) return;
|
||
myChartBottom = echarts.init(chartDom);
|
||
|
||
|
||
const option = {
|
||
legend: {
|
||
top: 0, // 距离容器底部距离
|
||
right: 0,
|
||
itemWidth: 20, // 图例标记的图形宽度
|
||
itemHeight: 10, // 图例标记的图形高度
|
||
textStyle: {
|
||
color: '#fff' // 图例文字颜色
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: res.category,
|
||
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',
|
||
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: '30',
|
||
containLabel: true
|
||
},
|
||
series: [
|
||
{
|
||
name: '今年',
|
||
data: res.currentYear,
|
||
type: 'line',
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#0094FF'
|
||
},
|
||
itemStyle: {
|
||
color: '#0094FF'
|
||
},
|
||
},
|
||
{
|
||
name: '去年',
|
||
data: res.lastYear,
|
||
type: 'line',
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#00FFB7' // 改为橙色
|
||
},
|
||
itemStyle: {
|
||
color: '#00FFB7' // 改为橙色
|
||
},
|
||
}
|
||
],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'line' // 改为线条指示器
|
||
},
|
||
formatter: function (params: any) {
|
||
return `${params.map((item: any) => {
|
||
return `<div>
|
||
${item.seriesName}：${item.value}万元
|
||
</div>`
|
||
}).join("")}`
|
||
}
|
||
}
|
||
};
|
||
|
||
myChartBottom.setOption(option);
|
||
window.addEventListener('resize', resizeChartBottom);
|
||
}
|
||
|
||
const resizeChart = () => {
|
||
myChart?.resize();
|
||
};
|
||
const resizeChartBottom = () => {
|
||
myChart?.resize();
|
||
};
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener('resize', resizeChart);
|
||
myChart?.dispose();
|
||
|
||
|
||
window.removeEventListener('resize', resizeChartBottom);
|
||
myChartBottom?.dispose();
|
||
});
|
||
|
||
|
||
</script>
|
||
|
||
|
||
|
||
<template>
|
||
<div class="BusinessCaseBox">
|
||
<SmallTitle title="营收特征">
|
||
<!-- <template #extra>
|
||
<div class="BusinessCaseTabBox">
|
||
<div :class="selectTab === item.value ? 'BusinessCaseItem selectBusinessCaseItem' : 'BusinessCaseItem'"
|
||
v-for="(item, index) in tabList" :key="index" @click="handleChangeTab(item.value)">
|
||
{{ item.label }}
|
||
</div>
|
||
</div>
|
||
</template> -->
|
||
</SmallTitle>
|
||
|
||
<!-- 营收同比 -->
|
||
<div class="BusinessCaseRevenueYOY" v-if="false">
|
||
<div class="BusinessCaseLeftItem">
|
||
<img class="BusinessIcon" :src="RevenueYOYIcon" />
|
||
</div>
|
||
|
||
<div class="BusinessCaseRightItem">
|
||
<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="changeBox">
|
||
<img v-if="getAllData?.RevenueAmountYOYRate || getAllData?.TicketCountYOYRate || getAllData?.AvgTicketAmountRate"
|
||
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 class="compareTitle">(相比去年同日)</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" />
|
||
<div class="changeText"></div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- <div class="rightItemRight">
|
||
<div class="BusinessCaseRevenueValue"></div>
|
||
<div class="BusinessCaseRevenueUnit">元</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 营收特征分析 -->
|
||
<div class="featureAnalysis">
|
||
<!-- <SmallTitle title="营收特征分析" /> -->
|
||
|
||
<div class="featureAnalysisBox" id="featureAnalysis"></div>
|
||
|
||
<!-- <SmallTitle title="营收同比分析" style="margin-top: 31px;" />
|
||
|
||
<div class="featureAnalysisBottom" id="featureAnalysisBottom"></div> -->
|
||
</div>
|
||
|
||
</div>
|
||
</template> |