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-06-23 19:16:56 +08:00
parent 185184a2d7
commit d829c7bc93
29 changed files with 1129 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/MemberContentBoxItem.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
src/assets/image/MemberOverviewItemTop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/image/label1Data.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
src/assets/image/label2Data.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
src/assets/image/memberSumBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 927 B

BIN
src/assets/image/memberTotalBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/assets/image/nearDataBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
src/assets/image/recentDataTopValueBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
src/assets/image/tradingBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

29
src/page/index/components/AnalysisOfMember/AnalysisOfMember.less Normal file
View File

@ -0,0 +1,29 @@
.VehicleModelStayBox {
// width: 100%;
width: calc((100vw - 90px) / 4 - 35px);
.VehicleModelStayCharts {
width: 100%;
margin-top: 10px;
position: relative;
.VehicleModelStayUnit {
font-family: "Microsoft YaHei";
font-weight: 400;
font-size: 10px;
color: #7F808B;
text-align: left;
font-style: normal;
padding-left: 8px;
position: absolute;
top: -10px;
left: 0;
}
.AnalysisOfMember {
width: 100%;
height: 230px;
}
}
}

223
src/page/index/components/AnalysisOfMember/AnalysisOfMember.vue Normal file
View File

@ -0,0 +1,223 @@
<script setup lang="ts">
import SmallTitle from '../smallTitle/smallTitle.vue'
import './AnalysisOfMember.less'
import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import {
GridComponent,
TitleComponent,
TooltipComponent,
LegendComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import moment from 'moment';
import { handleGetBayonetSTAnalysis, handleGetRevenueTrend, handleGetTransactionConvert, handleGetTransactionTimeAnalysis } from '../../service';
// 注册组件
echarts.use([
BarChart,
GridComponent,
TitleComponent,
TooltipComponent,
LegendComponent,
CanvasRenderer
]);
let myChart: echarts.ECharts;
// 当前查询的时间
let searchTime = ref<string>()
onMounted(async () => {
await handleGoMounted()
})
// 传入的数据
const props = defineProps<{
currentService?: any;
}>();
// 监听传入的选中服务区
watch(
() => props.currentService,
(newVal, oldVal) => {
handleGoMounted()
},
{ deep: true }
);
// 初始运行的方法
const handleGoMounted = async () => {
const res: any = await handleGetData()
console.log('fhdsuFHDSJFAHKD', res);
const chartDom = document.getElementById('AnalysisOfMember');
if (!chartDom) return;
myChart = echarts.init(chartDom);
const option = {
xAxis: {
type: 'category',
data: res.category,
axisLabel: {
interval: 0, // 改为0表示显示所有刻度
showMinLabel: true,
showMaxLabel: true,
color: '#fff', // x轴标签颜色
fontSize: 12 // 可调整字体大小防止重叠
},
axisLine: {
lineStyle: {
color: '#fff' // x轴线颜色
}
},
axisTick: {
alignWithLabel: true // 保证刻度线和标签对齐
}
},
yAxis: [
{
type: 'value',
name: '%',
splitLine: {
show: false
},
nameTextStyle: {
color: '#fff',
padding: [0, 30, 0, 0] // 调整单位位置
},
axisLine: {
show: true,
lineStyle: {
color: '#fff' // y轴线颜色
}
},
axisLabel: {
width: 60,
color: '#fff', // y轴标签颜色
formatter: '{value}' // 添加单位
}
}
],
grid: {
left: '0', // 增加左侧空间
right: '0', // 增加右侧空间
bottom: '0',
top: '50',
containLabel: true
},
series: [
{
name: `每周优品爆款`,
data: res?.data || [],
type: 'bar',
barWidth: 10,
itemStyle: {
borderRadius: [3, 3, 0, 0],
color: '#008CFF' // 直接指定颜色
},
label: {
show: true,
position: 'top',
formatter: function (params: any) {
// 自定义显示内容
return res.addList && res.addList[params.dataIndex] ? `${res.addList[params.dataIndex]}%` : '';
},
color: '#fff', // 文字颜色
fontSize: 10 // 文字大小
}
},
{
name: `其他类型`,
data: res?.otherData || [],
type: 'bar',
barWidth: 10,
itemStyle: {
borderRadius: [3, 3, 0, 0],
color: '#69BCFF' // 直接指定颜色
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' // 阴影指示器（适合柱状图）
},
formatter: function (params: any) {
console.log('params', params);
let str: string = `<div>${params[0].name}</div>`
params.forEach((item: any) => {
str += `<div>${item.seriesName}：${item.value}%</div>`
})
return str
// let result = params[0].axisValue + '<br/>';
// params.forEach((item: any, index: number) => {
// result += `${item.marker} ${item.seriesName}: ${index === 0 ? res?.realData[item.dataIndex].toLocaleString() : res?.realDataLastYear[item.dataIndex].toLocaleString()}元<br/>`;
// });
// return result;
}
},
legend: {
data: [`每周优品爆款`, `其他类型`], // 使用动态名称
textStyle: {
color: '#fff', // 图例文字颜色
fontSize: 12
},
right: '0', // 距离右侧10px
top: '0', // 距离顶部10px
},
color: ['#008CFF', '#69BCFF'] // 只需要两个颜色对应两个系列
};
myChart.setOption(option);
myChart.resize();
window.addEventListener('resize', resizeChart);
}
// 拿到数据的方法
const handleGetData = async () => {
let category: number[] = []
let seriesData: number[] = []
let realData: number[] = []
let seriesDataLastYear: number[] = []
let realDataLastYear: number[] = []
let res: any = {
category: ["购买数量", "交易金额", "订单笔数", "购买人数"],
data: [50.99, 48.89, 82.95, 85.05],
otherData: [49.01, 51.11, 17.05, 14.95]
}
return res
}
const resizeChart = () => {
myChart?.resize();
};
onBeforeUnmount(() => {
window.removeEventListener('resize', resizeChart);
myChart?.dispose();
});
</script>
<template>
<div class="VehicleModelStayBox">
<!-- <SmallTitle :title="`车型停留分析/日均${searchTime ? `(${searchTime}月)` : ''}`"></SmallTitle> -->
<!-- <SmallTitle :title="`经营效益`"></SmallTitle> -->
<div class="VehicleModelStayCharts" style="margin-top:15px">
<div class="AnalysisOfMember" id="AnalysisOfMember"></div>
</div>
</div>
</template>

9
src/page/index/components/BusinessCase/BusinessCase.less
View File

@ -2,8 +2,8 @@
width: 100%;
.BusinessCaseTabBox {
width: 100%;
display: flex;
// width: 100%;
display: inline-flex;
align-items: center;
background: linear-gradient(90deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
padding: 3px 20px;
@ -259,16 +259,15 @@
.featureAnalysis {
width: 100%;
margin-top: 32px;
.featureAnalysisBox {
width: 100%;
height: 300px;
height: 390px;
}
.featureAnalysisBottom {
width: 100%;
height: 300px;
height: 390px;
margin-top: 18px;
}
}

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

@ -55,6 +55,7 @@ let getAllData = ref<any>()
// 传入的数据
const props = defineProps<{
currentService?: any;
selectTab?: any
}>();
// 监听传入的选中服务区
@ -67,6 +68,15 @@ watch(
{ deep: true }
);
// 监听传入的选中服务区
watch(
() => props.selectTab,
(newVal, oldVal) => {
handleShowData(newVal)
},
{ deep: true }
);
onMounted(async () => {
// 用tab可以修改的方法
await handleGetData()
@ -237,7 +247,7 @@ const handleShowData = async (value: number) => {
const option = {
legend: {
top: 10,
top: 15,
right: 10,
textStyle: {
color: '#ffffff' // 设置图例文字为白色
@ -248,6 +258,7 @@ const handleShowData = async (value: number) => {
xAxis: {
type: 'category',
axisLabel: {
width: '80',
interval: 0,
color: '#fff',
formatter: '{value}' // 刻度值保持纯数字
@ -274,7 +285,7 @@ const handleShowData = async (value: number) => {
show: false // 隐藏刻度线（短横线）
},
axisLabel: {
width: '60',
width: '80',
color: '#fff'
},
nameTextStyle: {
@ -443,20 +454,17 @@ onBeforeUnmount(() => {
<template>
<div class="BusinessCaseBox">
<SmallTitle title="营收特征分析" />
<SmallTitle style="padding-left: 0;margin-top: 38px;">
<template #extra>
<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>
</template> -->
</SmallTitle>
<!-- 营收同比 -->
<div class="BusinessCaseRevenueYOY" v-if="false">
<div class="BusinessCaseLeftItem">

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

@ -160,8 +160,8 @@ const handleGetData = async () => {
const req: any = {
ProvinceCode: '530000',
// StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
StatisticsDate: '2025-04-30',
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
// StatisticsDate: '2025-04-30',
BusinessTradeIds: -1,
ServerpartId: props.currentService?.SERVERPART_ID || ""
}

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

@ -61,7 +61,7 @@ onMounted(async () => {
yAxis: [
{
type: 'value',
name: '车流量(辆)',
name: res.carResList && res.carResList.length > 0 ? '车流量(辆)' : "",
nameTextStyle: {
color: '#ffffff', // Y轴名称颜色
padding: [0, 0, 0, 20]

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

@ -11,7 +11,7 @@ import {
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { onBeforeUnmount, onMounted, watch } from 'vue';
import { handleGetCustomerSaleRatio } from '../../service';
import { handleGetBusinessTradeRevenue, handleGetCustomerSaleRatio } from '../../service';
import moment from 'moment';
// 注册组件
@ -160,21 +160,31 @@ const handleGoMounted = async () => {
}
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 = {
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'
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 handleGetCustomerSaleRatio(req)
data = await handleGetBusinessTradeRevenue(req)
sessionStorage.setItem("CustomerConsumptionPreferences", JSON.stringify(data))
}
@ -187,14 +197,14 @@ const handleGetData = async () => {
let aiObj: any = {}
if (data.CustomerSaleList && data.CustomerSaleList.length > 0) {
let list = data.CustomerSaleList.slice(0, 15)
// CustomerSaleList
if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
let list = data.BusinessTradeRank.slice(0, 10)
list.forEach((item: any) => {
category.push(item.BusinessTradeName)
seriesData.push(item.TotalRatio)
realData.push(item.TotalRatio)
aiObj[item.BusinessTradeName] = `占比${item.TotalRatio}%`
category.push(item.name)
seriesData.push(item.value)
realData.push(item.value)
aiObj[item.name] = `占比${item.value}%`
})
}

256
src/page/index/components/MemberMall/index.less Normal file
View File

@ -0,0 +1,256 @@
.MemberMallBox {
width: 100%;
.MemberSumBox {
width: 100%;
height: 38px;
background-image: url('../../../../assets/image/memberSumBg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
.MemberSumBoxLeft {
width: 30%;
font-family: Bahnschrift, Bahnschrift;
font-weight: 600;
font-size: 14px;
color: #FFFFFF;
line-height: 10px;
text-shadow: 0px 0px 5px #63D7FB;
text-align: left;
font-style: normal;
padding-left: 18px;
box-sizing: border-box;
padding-top: 5px;
}
.memberSumTotal {
width: calc(40% - 16px);
font-family: Bahnschrift, Bahnschrift;
font-weight: bold;
font-size: 25px;
color: #FFFFFF;
line-height: 30px;
text-align: center;
font-style: normal;
background-image: url('../../../../assets/image/memberTotalBg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
letter-spacing: 5px;
padding-top: 5px;
}
.MemberSumBoxRight {
width: 30%;
font-family: Bahnschrift, Bahnschrift;
font-weight: 600;
font-size: 13px;
color: #6FF3FB;
line-height: 17px;
text-align: right;
font-style: normal;
padding-right: 20px;
box-sizing: border-box;
padding-top: 5px;
}
}
.recentData {
width: 100%;
height: 165px;
.recentDataTop {
width: 100%;
height: 68px;
position: relative;
.recentDataTopItem {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
.recentDataTopValue {
width: 44px;
height: 44px;
font-family: Bahnschrift, Bahnschrift;
font-weight: 400;
font-size: 21px;
color: #FFFFFF;
line-height: 44px;
text-align: center;
font-style: normal;
background-image: url('../../../../assets/image/recentDataTopValueBg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.recentDataTopLabel {
font-family: Bahnschrift, Bahnschrift;
font-weight: 400;
font-size: 14px;
color: #D3E7ED;
line-height: 18px;
text-align: left;
font-style: normal;
margin-top: 5px;
}
}
}
.recentDataBottom {
width: 100%;
height: 89px;
background-image: url('../../../../assets/image/nearDataBg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.MemberConsumption {
width: 100%;
margin-top: 20px;
.MemberConsumptionItem {
display: flex;
align-items: center;
.MemberConsumptionLabel {
font-family: Bahnschrift, Bahnschrift;
font-weight: 400;
font-size: 14px;
color: #FFFFFF;
line-height: 20px;
text-align: left;
font-style: normal;
display: inline-block;
width: 95px;
text-align: left;
}
.MemberConsumptionProgress {
width: calc(100% - 190px);
height: 22px;
background-image: url('../../../../assets/image/label1Data.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.MemberConsumptionProgress2 {
width: calc(100% - 190px);
height: 22px;
background-image: url('../../../../assets/image/label2Data.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.MemberConsumptionValue {
font-family: Bahnschrift, Bahnschrift;
font-weight: 400;
font-size: 21px;
color: #FFFFFF;
line-height: 30px;
font-style: normal;
display: inline-block;
width: 95px;
text-align: left;
}
}
}
.MemberContentBox {
width: 100%;
margin-top: 30px;
display: flex;
align-items: center;
justify-content: space-between;
.MemberContentBoxItem {
width: calc((100% - 28px) / 2);
box-sizing: border-box;
padding: 15px 21px;
background-image: url('../../../../assets/image/smallModalBg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
.MemberContentBoxItemBox {
display: flex;
align-items: center;
.MemberContentBoxItemLabel {
width: 50%;
font-family: Bahnschrift, Bahnschrift;
font-weight: 400;
font-size: 14px;
color: #FFFFFF;
line-height: 20px;
text-align: left;
font-style: normal;
box-sizing: border-box;
padding-right: 5px;
}
.MemberContentBoxItemValue {
width: 50%;
display: inline-block;
box-sizing: border-box;
padding-left: 10px;
font-family: Bahnschrift, Bahnschrift;
font-weight: bold;
font-size: 20px;
color: #6FEFFA;
line-height: 21px;
text-align: left;
font-style: normal;
}
}
}
}
.MemberOverview {
width: 100%;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
.MemberOverviewItem {
width: calc((100% - 82px) / 3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.MemberOverviewItemTop {
width: 80px;
height: 80px;
font-family: Bahnschrift, Bahnschrift;
font-weight: 500;
font-size: 18px;
color: #FFFFFF;
line-height: 80px;
text-align: center;
font-style: normal;
background-image: url('../../../../assets/image/MemberOverviewItemTop.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.MemberOverviewItemBottom {
font-family: Bahnschrift, Bahnschrift;
font-weight: 400;
font-size: 16px;
color: #FFFFFF;
line-height: 21px;
text-align: left;
font-style: normal;
margin-top: 17px;
}
}
}
}

114
src/page/index/components/MemberMall/index.vue Normal file
View File

@ -0,0 +1,114 @@
<script setup lang="ts">
import './index.less'
import SmallTitle from '../smallTitle/smallTitle.vue'
</script>
<template>
<div class="MemberMallBox">
<!-- 会员总数 -->
<div class="MemberSumBox">
<div class="MemberSumBoxLeft">会员总数</div>
<div class="memberSumTotal">12733</div>
<div class="MemberSumBoxRight">本月新增 56 个</div>
</div>
<!-- 近30天数据 -->
<SmallTitle title="近30天数据" style="margin-top: 22px;" />
<div class="recentData">
<div class="recentDataTop">
<div class="recentDataTopItem" style="left: 22px;top: 31px;">
<div class="recentDataTopValue">94</div>
<div class="recentDataTopLabel">新增会员数</div>
</div>
<div class="recentDataTopItem" style="left: 30%;top: 0;">
<div class="recentDataTopValue">2716</div>
<div class="recentDataTopLabel">打开次数</div>
</div>
<div class="recentDataTopItem" style="right: 30%;top: 0;">
<div class="recentDataTopValue">624</div>
<div class="recentDataTopLabel">新增人数</div>
</div>
<div class="recentDataTopItem" style="right: 8px;top: 31px;">
<div class="recentDataTopValue">884</div>
<div class="recentDataTopLabel">访问人数</div>
</div>
</div>
<div class="recentDataBottom"></div>
</div>
<!-- 会员消费情况 -->
<SmallTitle title="会员消费情况" />
<div class="MemberConsumption">
<div class="MemberConsumptionItem">
<div class="MemberConsumptionLabel">会员消费笔数</div>
<div class="MemberConsumptionProgress"></div>
<div class="MemberConsumptionValue">133</div>
</div>
<div class="MemberConsumptionItem" style="margin-top: 18px;">
<div class="MemberConsumptionLabel">会员总销售额</div>
<div class="MemberConsumptionProgress2"></div>
<div class="MemberConsumptionValue">27,734.10</div>
</div>
</div>
<div class="MemberContentBox">
<div class="MemberContentBoxItem">
<div class="MemberContentBoxItemBox">
<div class="MemberContentBoxItemLabel">工会会员</div>
<div class="MemberContentBoxItemValue">512</div>
</div>
<div class="MemberContentBoxItemBox" style="margin-top: 18px;">
<div class="MemberContentBoxItemLabel">会员占比</div>
<div class="MemberContentBoxItemValue">4.02%</div>
</div>
</div>
<div class="MemberContentBoxItem">
<div class="MemberContentBoxItemBox">
<div class="MemberContentBoxItemLabel">会员转化率</div>
<div class="MemberContentBoxItemValue">15.06%</div>
</div>
<div class="MemberContentBoxItemBox" style="margin-top: 18px;">
<div class="MemberContentBoxItemLabel">会员增长率</div>
<div class="MemberContentBoxItemValue">0.74%</div>
</div>
</div>
</div>
<!-- 会员消费情况 -->
<SmallTitle title="会员消费数据概览" style="margin-top: 25px;" />
<div class="MemberOverview">
<div class="MemberOverviewItem">
<div class="MemberOverviewItemTop">23</div>
<div class="MemberOverviewItemBottom">购买人数</div>
</div>
<div class="MemberOverviewItem">
<div class="MemberOverviewItemTop">23</div>
<div class="MemberOverviewItemBottom">1,205.83</div>
</div>
<div class="MemberOverviewItem">
<div class="MemberOverviewItemTop">208.53</div>
<div class="MemberOverviewItemBottom">客单价</div>
</div>
<div class="MemberOverviewItem">
<div class="MemberOverviewItemTop">29.17%</div>
<div class="MemberOverviewItemBottom">会员复购率</div>
</div>
</div>
</div>
</template>

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

@ -12,7 +12,7 @@ import {
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import moment from 'moment';
import { handleGetBusinessTradeRevenue, handleGetSPBayonetList } from '../../service';
import { handleGetBusinessTradeRevenue, handleGetCustomerSaleRatio, handleGetSPBayonetList } from '../../service';
// 注册组件
echarts.use([
@ -37,21 +37,25 @@ onMounted(async () => {
myChart = echarts.init(chartDom);
const option = {
// tooltip: { // 新增 tooltip 配置
// trigger: 'item',
// formatter: function (params: any) {
// console.log('params', params);
// return `<div>${params.name} ${params.value}</div>
// `;
// }
// },
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%', '60%'], // 2. 确保居中
radius: '40%', // 调整雷达图大小，留出空间给文字
center: ['50%', '45%'], // 2. 确保居中
axisName: {
color: 'rgb(255, 255, 255)',
padding: 10
@ -79,6 +83,7 @@ onMounted(async () => {
},
series: [
{
name: "男性",
type: 'radar',
lineStyle: {
width: 1,
@ -87,13 +92,37 @@ onMounted(async () => {
data: res.seriesData,
symbol: 'none',
itemStyle: {
color: '#0289ED'
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'
},
bottom: -5,
left: 'center',
},
};
myChart.setOption(option);
@ -105,9 +134,16 @@ onMounted(async () => {
const handleGetSectionFlowCount = async () => {
const req: any = {
ProvinceCode: '530000',
StatisticsDate: moment(moment().subtract(1, 'M')).format('YYYY-MM-DD'),
BusinessTradeIds: -1
// ProvinceCode: '530000',
// StatisticsDate: moment(moment().subtract(1, 'M')).format('YYYY-MM-DD'),
// BusinessTradeIds: -1
statisticsType: 1,
startMonth: moment().startOf('y').format('YYYYMM'),
endMonth: moment().format('YYYYMM'),
provinceCode: '530000',
showTradeLevel: 1,
fromRedis: true
}
let PreferenceType = sessionStorage.getItem('PreferenceType')
@ -115,33 +151,70 @@ const handleGetSectionFlowCount = async () => {
if (PreferenceType) {
data = JSON.parse(PreferenceType)
} else {
data = await handleGetBusinessTradeRevenue(req)
data = await handleGetCustomerSaleRatio(req)
sessionStorage.setItem("PreferenceType", JSON.stringify(data))
}
// const data = await handleGetBusinessTradeRevenue(req)
let category: any = []
// 男
let seriesData: any = []
let realData: any = []
// 女
let seriesDataMan: any = []
let realDataMan: any = []
let aiObj: any = {}
let list: any = data.BusinessTradeRank
let max: number = 0
// let list: any = data.BusinessTradeRank
let list: any = data.CustomerSaleList
if (list && list.length > 0) {
list.forEach((item: any) => {
category.push({ name: `${item.name}：${item.value}%`, max: 100 })
seriesData.push(Number(item.value))
realData.push(item.data)
aiObj[item.name] = item.value + '%'
if (item.FemaleRatio > max) {
max = item.FemaleRatio
}
if (item.MaleRatio > max) {
max = item.MaleRatio
}
category.push({ name: `${item.BusinessTradeName}`, max: 100 })
seriesData.push(Number(item.FemaleRatio))
realData.push(item.FemaleRatio)
seriesDataMan.push(Number(item.MaleRatio))
realDataMan.push(item.MaleRatio)
aiObj[item.BusinessTradeName + '男性'] = item.FemaleRatio + '%'
aiObj[item.BusinessTradeName + '女性'] = item.MaleRatio + '%'
// category.push({ name: `${item.name}：${item.value}%`, max: 100 })
// seriesData.push(Number(item.value))
// realData.push(item.data)
// aiObj[item.name] = item.value + '%'
})
}
if (category && category.length > 0) {
category.forEach((item: any) => {
item.max = max
})
}
let res: any = {
category: category,// x轴的内容
seriesData: [seriesData],// y轴的数据
realData: realData// 真实数据
realData: realData,// 真实数据
seriesDataMan: [seriesDataMan],
realDataMan: realDataMan,
}
console.log('resresresres', res);
let PreferenceTypeAI = sessionStorage.getItem('PreferenceTypeAI')
if (PreferenceTypeAI) { } else {
sessionStorage.setItem("PreferenceTypeAI", JSON.stringify(aiObj))

221
src/page/index/components/TradingAlert/TradingAlert.less
View File

@ -4,75 +4,127 @@
// padding: 0 20px;
// margin-top: 20px;
.TradingAlertBox {
.TradingAlertNewBox {
width: 100%;
margin-top: 21px;
box-sizing: border-box;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
background-image: url('../../../../assets/image/tradingBg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
.TradingAlertItem {
width: calc((100% - 10px)/2);
box-sizing: border-box;
padding: 10px 15px;
.TradingAlertNewBoxItem {
width: calc(100% / 3);
display: flex;
align-items: center;
background: linear-gradient(0, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
justify-content: flex-start;
.TradingAlertNewBoxItemTemplate {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
.TradingAlertItemLeft {
width: 46px;
height: 46px;
margin-right: 10px;
.TradingAlertItemLeftIcon {
width: 46px;
height: 46px;
}
.TradingAlertNewBoxItemValue {
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 25px;
color: #FEC003;
line-height: 25px;
letter-spacing: 1px;
text-align: right;
font-style: normal;
}
.TradingAlertItemRight {
flex: 1;
.TradingAlertItemRightLabel {
font-family: Microsoft YaHei, Microsoft YaHei;
.TradingAlertNewBoxItemLabel {
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 14px;
color: #FFFFFF;
text-align: left;
font-style: normal;
}
.TradingAlertItemRightValueBox {
display: flex;
align-items: flex-end;
justify-content: flex-end;
.TradingAlertItemRightValue {
font-family: Impact, Impact;
font-weight: 400;
font-size: 25px;
color: #FFFFFF;
letter-spacing: 2px;
color: #D9E7FF;
line-height: 14px;
letter-spacing: 1px;
text-align: right;
font-style: normal;
}
.OverviewOfServiceAreaBusyContentItemRightUnit {
font-family: Inter, Inter;
font-weight: 400;
font-size: 12px;
color: #808A96;
text-align: right;
font-style: normal;
text-transform: none;
margin-left: 10px;
margin-top: 9px;
}
}
}
}
}
// .TradingAlertBox {
// width: 100%;
// display: flex;
// align-items: center;
// justify-content: space-between;
// .TradingAlertItem {
// width: calc((100% - 10px)/2);
// box-sizing: border-box;
// padding: 10px 15px;
// display: flex;
// align-items: center;
// background: linear-gradient(0, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
// .TradingAlertItemLeft {
// width: 46px;
// height: 46px;
// margin-right: 10px;
// .TradingAlertItemLeftIcon {
// width: 46px;
// height: 46px;
// }
// }
// .TradingAlertItemRight {
// flex: 1;
// .TradingAlertItemRightLabel {
// font-family: Microsoft YaHei, Microsoft YaHei;
// font-weight: 400;
// font-size: 14px;
// color: #FFFFFF;
// text-align: left;
// font-style: normal;
// }
// .TradingAlertItemRightValueBox {
// display: flex;
// align-items: flex-end;
// justify-content: flex-end;
// .TradingAlertItemRightValue {
// font-family: Impact, Impact;
// font-weight: 400;
// font-size: 25px;
// color: #FFFFFF;
// letter-spacing: 2px;
// text-align: right;
// font-style: normal;
// }
// .OverviewOfServiceAreaBusyContentItemRightUnit {
// font-family: Inter, Inter;
// font-weight: 400;
// font-size: 12px;
// color: #808A96;
// text-align: right;
// font-style: normal;
// text-transform: none;
// margin-left: 10px;
// }
// }
// }
// }
// }
.TradingAlertListBox {
@ -80,33 +132,70 @@
height: 120px;
margin-top: 12px;
.TradingAlertItemHeaderBox {
width: 100%;
background: linear-gradient(90deg, rgba(69, 97, 130, 0.33) 0%, rgba(69, 97, 130, 0.33) 100%);
box-sizing: border-box;
padding: 7px 0 9px 32px;
display: flex;
align-items: center;
.leftItemLabel,
.leftItemLabel2,
.leftItemValue {
width: calc((100% - 32px) / 3);
font-family: OPPOSans, OPPOSans;
font-weight: normal;
font-size: 15px;
color: #94DCEF;
line-height: 17px;
text-align: left;
font-style: normal;
}
}
.TradingAlertItem {
width: 100%;
box-sizing: border-box;
padding: 4px 20px;
padding: 7px 0 9px 32px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: rgba(168, 172, 171, 0.08);
margin: 2px 0;
.leftItemLabel {
width: 60%;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
.leftItemLabel,
.leftItemLabel2,
.leftItemValue {
width: calc((100% - 32px) / 3);
font-family: OPPOSans, OPPOSans;
font-weight: normal;
font-size: 13px;
color: #E4F3FF;
line-height: 17px;
text-align: left;
font-style: normal;
}
.rightItemLabel {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 12px;
color: #FF0000;
text-align: right;
font-style: normal;
text-transform: none;
}
// .leftItemLabel {
// width: 60%;
// font-family: Microsoft YaHei, Microsoft YaHei;
// font-weight: 400;
// font-size: 12px;
// color: #FFFFFF;
// text-align: left;
// font-style: normal;
// }
// .rightItemLabel {
// font-family: Microsoft YaHei, Microsoft YaHei;
// font-weight: 400;
// font-size: 12px;
// color: #FF0000;
// text-align: right;
// font-style: normal;
// text-transform: none;
// }
}
}

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

@ -44,12 +44,15 @@ const handleGetData = async () => {
console.log('skodpijasidjaslfddfas', data);
TradingOtherData.value = data.OtherData
TradingOtherData.value = {
...data.OtherData,
sum: Number(data.OtherData.value) + Number(data.OtherData.data)
}
// ai需要的数据
let AIData: any = []
if (data.List && data.List.length > 0) {
let list = data.List.slice(0, 10)
let list = data.List.slice(0, 6)
TradingAlertList.length = 0;
list && list.forEach((item: any) => {
TradingAlertList.push(item)
@ -77,10 +80,36 @@ const handleGetData = async () => {
<template>
<div class="TradingAlertBox">
<SmallTitle :title="'交易预警'"></SmallTitle>
<div class="TradingAlertBox">
<div class="TradingAlertItem">
<div class="TradingAlertNewBox">
<div class="TradingAlertNewBoxItem">
<div class="TradingAlertNewBoxItemTemplate">
<div class="TradingAlertNewBoxItemValue">{{ (TradingOtherData?.sum || 0) }}</div>
<div class="TradingAlertNewBoxItemLabel">交易预警总数</div>
</div>
</div>
<div class="TradingAlertNewBoxItem">
<div class="TradingAlertNewBoxItemTemplate">
<div class="TradingAlertNewBoxItemValue" style="color: #F87D75;">{{ (TradingOtherData?.value || 0)
}}</div>
<div class="TradingAlertNewBoxItemLabel">必查项</div>
</div>
</div>
<div class="TradingAlertNewBoxItem">
<div class="TradingAlertNewBoxItemTemplate">
<div class="TradingAlertNewBoxItemValue" style="color: #75F8EE;">{{ (TradingOtherData?.data || 0) }}
</div>
<div class="TradingAlertNewBoxItemLabel">抽查项</div>
</div>
</div>
</div>
<!-- <SmallTitle :title="'交易预警'"></SmallTitle> -->
<!-- <div class="TradingAlertBox"> -->
<!-- <div class="TradingAlertItem">
<div class="TradingAlertItemLeft">
<img class="TradingAlertItemLeftIcon" src="../../../../assets/image/busyIcon.png" />
</div>
@ -100,24 +129,32 @@ const handleGetData = async () => {
<div class="TradingAlertItemRight">
<div class="TradingAlertItemRightLabel">抽查项</div>
<div class="TradingAlertItemRightValueBox">
<div class="TradingAlertItemRightValue">{{ TradingOtherData?.value || '' }}</div>
<div class="TradingAlertItemRightValue">{{ TradingOtherData?.data || '' }}</div>
<div class="OverviewOfServiceAreaBusyContentItemRightUnit">项</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- </div> -->
<div class="TradingAlertListBox">
<div class="TradingAlertItem" v-for="(item, index) in TradingAlertList" :key="index"
:style="{ backgroundColor: index % 2 === 0 ? 'rgba(22, 28, 47, 1)' : 'rgba(0, 0, 0, 0.2)' }">
<div class="leftItemLabel">
<span>{{ item.serverpartName }}</span>
<span style="margin-left: 8px;">{{ item.serverpartShopName }}</span>
<div class="TradingAlertItemHeaderBox">
<div class="leftItemLabel">服务区名称</div>
<div class="leftItemLabel2">门店</div>
<div class="leftItemValue">状态</div>
</div>
<div class="rightItemLabel">
<div class="TradingAlertItem" v-for="(item, index) in TradingAlertList" :key="index">
<div class="leftItemLabel">
<span>{{ item.serverpartName }}</span>
</div>
<div class="leftItemLabel2">
{{ item.serverpartShopName }}
</div>
<div class="leftItemValue" style="color: #EABC08;">
{{ item.exceptionTypeName }}
</div>
</div>

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

@ -104,7 +104,11 @@ const handleGoMounted = async () => {
barWidth: 5,
smooth: true,
itemStyle: {
borderRadius: [3, 3, 0, 0]
borderRadius: [3, 3, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#46B8F3' }, // 顶部颜色
{ offset: 1, color: '#1A4AF6' } // 底部颜色
])
},
label: {
show: true,
@ -125,7 +129,9 @@ const handleGoMounted = async () => {
barWidth: 5,
smooth: true,
itemStyle: {
borderRadius: [3, 3, 0, 0]
borderRadius: [3, 3, 0, 0],
color: "#3CD495"
// 蓝湖这个没渐变 不知道为啥
}
},
],

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

@ -117,7 +117,10 @@ const handleGoMounted = async () => {
barWidth: 5,
itemStyle: {
borderRadius: [3, 3, 0, 0],
color: '#008CFF' // 直接指定颜色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#46B8F3' }, // 顶部颜色
{ offset: 1, color: '#1A4AF6' } // 底部颜色
])
},
label: {
show: true,
@ -137,7 +140,7 @@ const handleGoMounted = async () => {
barWidth: 5,
itemStyle: {
borderRadius: [3, 3, 0, 0],
color: '#69BCFF' // 直接指定颜色
color: '#3CD495' // 直接指定颜色
}
}
],

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

@ -150,7 +150,11 @@ const handleGoMounted = async () => {
data: res.seriesDataCar,
yAxisIndex: 0,
itemStyle: {
borderRadius: [3, 3, 0, 0]
borderRadius: [3, 3, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#46B8F3' }, // 顶部颜色
{ offset: 1, color: '#1A4AF6' } // 底部颜色
])
},
label: {
show: true,
@ -171,7 +175,8 @@ const handleGoMounted = async () => {
yAxisIndex: 0,
barWidth: 5,
itemStyle: {
borderRadius: [3, 3, 0, 0]
borderRadius: [3, 3, 0, 0],
color: "#3CD495"
}
},
// {
@ -280,7 +285,11 @@ const handleGoMounted = async () => {
symbol: 'circle',
symbolSize: 6,
lineStyle: {
width: 2
width: 2,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#46B8F3' }, // 左端颜色
{ offset: 1, color: '#1A4AF6' } // 右端颜色
])
},
label: {
show: true,
@ -300,11 +309,14 @@ const handleGoMounted = async () => {
symbol: 'circle',
symbolSize: 6,
lineStyle: {
width: 2
width: 2,
color: "#FFB006"
},
itemStyle: {
color: '#FFB006' // 确保标记点与线条同色
}
}
],
color: ['#FF5E5E', '#FF9500']
}
myChart.setOption(option);
@ -358,6 +370,8 @@ const handleGetSectionFlowCount = async () => {
yesData = JSON.parse(VehiclesEntering2)
} else {
yesData = await handleGetMonthAnalysis(yesReq)
console.log('yesDatayesDatayesDatayesDatayesDatayesDatayesData', yesData);
sessionStorage.setItem("VehiclesEntering2", JSON.stringify(yesData))
}
@ -452,18 +466,20 @@ const handleGetSectionFlowCount = async () => {
let VehiclesEnteringAI = sessionStorage.getItem('VehiclesEnteringAI')
if (VehiclesEnteringAI) { } else {
let res: any = {}
res[`${res.currentYear}年入区车流`] = aiObj
res[`${res.yesYear}年入区车流`] = yesAiObj
sessionStorage.setItem("VehiclesEntering2", JSON.stringify(res))
let result: any = {}
result[`${res.currentYear}年入区车流`] = aiObj
result[`${res.yesYear}年入区车流`] = yesAiObj
sessionStorage.setItem("VehiclesEnteringAI", JSON.stringify(result))
}
let VehiclesEnteringAI2 = sessionStorage.getItem('VehiclesEnteringAI2')
if (VehiclesEnteringAI2) { } else {
let res: any = {}
res[`${res.currentYear}年对客营收`] = aiRevenueObj
res[`${res.yesYear}年对客营收`] = yesAiRevenueObj
sessionStorage.setItem("VehiclesEntering2", JSON.stringify(res))
let result: any = {}
result[`${res.currentYear}年对客营收`] = aiRevenueObj
result[`${res.yesYear}年对客营收`] = yesAiRevenueObj
sessionStorage.setItem("VehiclesEnteringAI2", JSON.stringify(result))
}
return res

22
src/page/index/components/newBigTitleBox/newBigTitleBox.less
View File

@ -4,6 +4,14 @@
background-image: url(../../../../assets/image/newBigTitleBg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding-left: 38px;
display: flex;
align-items: center;
justify-content: space-between;
.titleBox {
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 20px;
@ -11,11 +19,15 @@
color: #4CA9EF;
text-align: left;
font-style: normal;
box-sizing: border-box;
padding-left: 38px;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(0deg, #9AFFFB 0%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
.newBigTitleBoxLong {

2
src/page/index/components/newBigTitleBox/newBigTitleBox.vue
View File

@ -15,7 +15,7 @@ const props = defineProps<{
<template>
<div
:class="type === 2 ? 'newBigTitleBox newBigTitleBoxLong' : type === 3 ? 'newBigTitleBox newThreeBigTitleBoxLong' : 'newBigTitleBox'">
{{ props?.title || "" }}
<span class="titleBox">{{ props?.title || "" }}</span>
<slot name="extra"></slot>
</div>
</template>

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

@ -60,6 +60,8 @@ import AssessmentScoringRanking from './components/AssessmentScoringRanking/Asse
import SmallTitle from './components/smallTitle/smallTitle.vue';
import FestivalRevenueSumInfo from './components/FestivalRevenueSumInfo/FestivalRevenueSumInfo.vue'
import AIIcon from '../../assets/image/AIIcon.png'
import MemberMall from './components/MemberMall/index.vue'
import AnalysisOfMember from './components/AnalysisOfMember/AnalysisOfMember.vue'
// 页面样式
let pageType = ref<string>("center")
@ -73,8 +75,15 @@ let FestivalOptions = [
{ label: '暑期', value: 6 },
{ label: '中秋', value: 7 },
{ label: '国庆', value: 8 },
]
const tabList: any = [
{ label: "营收金额", value: 1 },
{ label: "客单量", value: 2 },
{ label: "客单均价", value: 3 },
]
let selectTab = ref<number>(1)
const iframeLoaded = ref<boolean>(false);
// 选中的节日
let FestivalValue = ref<number>(5)
@ -141,6 +150,11 @@ const sendCacheToIframe = () => {
}
};
// 切换tab的内容
const handleChangeTab = async (value: number) => {
selectTab.value = value
}
// 提问问题
const handleSubmit = () => {
@ -315,27 +329,26 @@ const handleStopPrint = () => {
<div class="leftBottomContent">
<!-- 年龄 -->
<CustomerAgeGroup style="margin-top: 20px;width: calc(100% / 3);" />
<CustomerAgeGroup style="margin-top: 20px;width: calc((100% - 57px) / 3);" />
<!-- 性别 -->
<GenderCustomerGroup style="margin-left: 20px;margin-top: 20px;width: calc(100% / 3);" />
<GenderCustomerGroup style="margin-left: 23px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
<!-- 停留时长 -->
<!-- <CustomerGroupStay style="margin-left: 20px;margin-top: 20px;" /> -->
<!-- 偏好类型 -->
<PreferenceType style="margin-left: 20px;margin-top: 20px;width: calc(100% / 3);" />
<PreferenceType style="margin-left: 34px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
</div>
<div class="left3stBottom"
style="margin-top: 0;display: flex;justify-content: space-between;flex-wrap: wrap;">
<div class="left3stBottom" style="margin-top: 0;display: flex;flex-wrap: wrap;">
<div class="left3stBottomItem" style="width: calc(100% / 3);">
<div class="left3stBottomItem" style="width: calc((100% - 57px) / 3);">
<!-- 客群特征分析 -->
<CustomerGroup style="margin-top: 15px;" />
</div>
<div class="left3stBottomItem" style="width: calc(100% / 3 * 2);">
<div class="left3stBottomItem" style="width: calc((100% - 57px) / 3 * 2);margin-left: 23px;">
<!-- 客群消费偏好 -->
<CustomerConsumptionPreferences style="margin-top: 15px;" />
</div>
@ -346,7 +359,16 @@ const handleStopPrint = () => {
<!-- 交易画像分析 -->
<NewBigTitleBox title="交易画像分析" :type="3" style="margin-top: 15px;" />
<NewBigTitleBox title="交易画像分析" :type="3" style="margin-top: 15px;">
<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>
</NewBigTitleBox>
<div class="left3stBottom" style="margin-top: 0;">
<div class="left3stBottomItemLeft">
@ -372,7 +394,7 @@ const handleStopPrint = () => {
</div>
<div class="left3stBottomItemRight">
<BusinessCase :currentService="currentService" />
<BusinessCase :currentService="currentService" :selectTab="selectTab" />
</div>
</div>
@ -401,7 +423,7 @@ const handleStopPrint = () => {
<!-- 时间天气等内容 -->
<BasicMessageBox :currentService="currentService" style="margin-top: 20px;" />
<NewBigTitleBox :title="'经营业态月度情况'" style="margin-top: 20px;" />
<NewBigTitleBox :title="'经营业态'" style="margin-top: 20px;" />
<div class="rightContentBox">
<!-- 区域营收占比 -->
<RegionalRevenue :currentService="currentService" style="margin-top: 10px;" />
@ -413,7 +435,7 @@ const handleStopPrint = () => {
<BusinessStructure :currentService="currentService" style="margin-top: 22px;" />
</div>
<NewBigTitleBox :title="'节假日营收分析'" style="margin-top: 44px;">
<NewBigTitleBox :title="'节假日营收'" style="margin-top: 44px;">
<!-- <template #extra>
<div class="FestivalBox">
<el-select class="festivalSelect" v-model="FestivalValue" placeholder="Select"
@ -424,7 +446,7 @@ const handleStopPrint = () => {
</div>
</template> -->
</NewBigTitleBox>
<!-- 节假日营收分析 -->
<!-- 节假日营收 -->
<!-- <FestivalRevenue :currentService="currentService" :FestivalValue="FestivalValue" /> -->
<FestivalRevenueSumInfo :currentService="currentService" :FestivalValue="FestivalValue" />
@ -534,14 +556,17 @@ const handleStopPrint = () => {
<!-- 消息轮播框 -->
<NoticeListBox :selectPageTab="selectPageTab" />
<NewBigTitleBox :title="'管理运营监控'" style="margin-top: 29px;" />
<NewBigTitleBox :title="'会员商城'" style="margin-top: 29px;" />
<div style="width: 100%;box-sizing: border-box;padding: 20px 11px 0;">
<!-- 会员商城 -->
<MemberMall />
<!-- 日常巡检(蓝湖的设备完好率) -->
<DailyInspection />
<!-- <DailyInspection /> -->
<!-- 考核打分排行榜 -->
<AssessmentScoringRanking style="margin-top: 19px;" />
<!-- <AssessmentScoringRanking style="margin-top: 19px;" /> -->
<!-- 热门商品榜单 -->
<HotProductList style="margin-top: 20px;" :pageType="'left'" />
@ -594,10 +619,12 @@ const handleStopPrint = () => {
<!-- 核心品类占比 -->
<!-- <CoreCategory style="margin-top: 10px;" /> -->
<NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />
<NewBigTitleBox :title="'会员消费数据分析'" style="margin-top: 28px;" />
<AnalysisOfMember />
<!-- 商户评分排行榜 -->
<MerchantRatingRanking style="margin-top: 16px;" />
<!-- <MerchantRatingRanking style="margin-top: 16px;" /> -->
</div>
</div>

48
src/page/index/style.less
View File

@ -459,13 +459,13 @@
padding: 0 26px;
.left3stBottomItemLeft {
width: calc(100% / 3 * 2);
width: calc((100% - ((100% - 57px) / 3 + 34px)));
display: inline-flex;
justify-content: space-between;
flex-wrap: wrap;
.left3stBottomItem {
width: 50%;
width: calc(50% - 10px);
// width: calc((100% - 30px) / 2);
// width: calc((100% - 56px) / 2);
height: 214px;
@ -473,8 +473,50 @@
}
.left3stBottomItemRight {
width: calc(100% / 3);
width: calc((100% - 57px) / 3);
display: inline-flex;
margin-left: 34px;
}
}
.BusinessCaseTabBox {
// width: 100%;
display: inline-flex;
align-items: center;
// background: linear-gradient(90deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
padding: 3px 20px;
box-sizing: border-box;
.BusinessCaseItem {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 15px;
color: #87919C;
text-align: left;
font-style: normal;
margin: 0 10px;
cursor: pointer;
}
.selectBusinessCaseItem {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 15px;
color: #FFFFFF;
text-align: left;
font-style: normal;
position: relative;
}
.selectBusinessCaseItem::after {
content: "";
width: 100%;
height: 1px;
background: linear-gradient(180deg, #00F6FF 0%, #008CFF 100%);
position: absolute;
left: 0;
bottom: -4px;
}
}
}

2
tsconfig.tsbuildinfo
View File

@ -1 +1 @@
{"root":["./src/main.ts","./src/shims-vue.d.ts","./src/vite-env.d.ts","./src/options/serveice.ts","./src/page/index/service.ts","./src/request/newrequest.ts","./src/request/request.ts","./src/request/requestcode.ts","./src/request/requestconfig.ts","./src/request/requestlocal.ts","./src/request/requestpos.ts","./src/request/requesttest.ts","./src/router/index.ts","./src/stores/counter.ts","./src/app.vue","./src/page/index/index.vue","./src/page/index/components/accountsreceivablewarning/accountsreceivablewarning.vue","./src/page/index/components/announcementtopic/announcementtopic.vue","./src/page/index/components/annualaccountsreceivable/annualaccountsreceivable.vue","./src/page/index/components/assessmentscoring/assessmentscoring.vue","./src/page/index/components/assessmentscoringranking/assessmentscoringranking.vue","./src/page/index/components/basicmessagebox/basicmessagebox.vue","./src/page/index/components/brandconsumptionlevel/brandconsumptionlevel.vue","./src/page/index/components/branddetail/branddetail.vue","./src/page/index/components/brandlisttbox/brandlisttbox.vue","./src/page/index/components/businesscase/businesscase.vue","./src/page/index/components/businessstructure/businessstructure.vue","./src/page/index/components/busytradingranking/busytradingranking.vue","./src/page/index/components/centertitle/centertitle.vue","./src/page/index/components/consumptionconversion/consumptionconversion.vue","./src/page/index/components/consumptionlevel/consumptionlevel.vue","./src/page/index/components/consumptionperiod/consumptionperiod.vue","./src/page/index/components/contractinformation/contractinformation.vue","./src/page/index/components/corebusinessdata/corebusinessdata.vue","./src/page/index/components/corecategory/corecategory.vue","./src/page/index/components/customeragegroup/customeragegroup.vue","./src/page/index/components/customerconsumptionpreferences/customerconsumptionpreferences.vue","./src/page/index/components/customergroup/customergroup.vue","./src/page/index/components/customergroupstay/customergroupstay.vue","./src/page/index/components/dailyinspection/dailyinspection.vue","./src/page/index/components/deductiontype/deductiontype.vue","./src/page/index/components/detailedpayment/detailedpayment.vue","./src/page/index/components/festivalrevenue/festivalrevenue.vue","./src/page/index/components/festivalrevenuesuminfo/festivalrevenuesuminfo.vue","./src/page/index/components/gendercustomergroup/gendercustomergroup.vue","./src/page/index/components/highqualitymerchants/highqualitymerchants.vue","./src/page/index/components/hotproductlist/hotproductlist.vue","./src/page/index/components/mallorderstatistics/mallorderstatistics.vue","./src/page/index/components/merchantcategory/merchantcategory.vue","./src/page/index/components/merchantratingranking/merchantratingranking.vue","./src/page/index/components/multiindustryincome/multiindustryincome.vue","./src/page/index/components/overviewofservicearea/overviewofservicearea.vue","./src/page/index/components/pagemap/pagemap.vue","./src/page/index/components/passengerflowchanges/passengerflowchanges.vue","./src/page/index/components/paymentprogress/paymentprogress.vue","./src/page/index/components/preferencetype/preferencetype.vue","./src/page/index/components/privaterideservice/privaterideservice.vue","./src/page/index/components/regionalrevenue/regionalrevenue.vue","./src/page/index/components/returnrate/returnrate.vue","./src/page/index/components/salescomparison/salescomparison.vue","./src/page/index/components/signedclients/signedclients.vue","./src/page/index/components/thismonthbenefits/thismonthbenefits.vue","./src/page/index/components/todaytrend/todaytrend.vue","./src/page/index/components/totalaccountsreceivable/totalaccountsreceivable.vue","./src/page/index/components/tradingalert/tradingalert.vue","./src/page/index/components/trendoftrafficflow/trendoftrafficflow.vue","./src/page/index/components/vehiclemodelstay/vehiclemodelstay.vue","./src/page/index/components/vehiclestayanalysis/vehiclestayanalysis.vue","./src/page/index/components/vehiclesentering/vehiclesentering.vue","./src/page/index/components/modaltitle/modaltitle.vue","./src/page/index/components/newbigtitlebox/newbigtitlebox.vue","./src/page/index/components/noticelistbox/noticelistbox.vue","./src/page/index/components/pagetop/pagetop.vue","./src/page/index/components/smalltitle/smalltitle.vue","./src/page/index/components/supplierlistbox/supplierlistbox.vue"],"version":"5.6.3"}
{"root":["./src/main.ts","./src/shims-vue.d.ts","./src/vite-env.d.ts","./src/options/serveice.ts","./src/page/index/service.ts","./src/request/newrequest.ts","./src/request/request.ts","./src/request/requestcode.ts","./src/request/requestconfig.ts","./src/request/requestlocal.ts","./src/request/requestpos.ts","./src/request/requesttest.ts","./src/router/index.ts","./src/stores/counter.ts","./src/app.vue","./src/page/index/index.vue","./src/page/index/components/accountsreceivablewarning/accountsreceivablewarning.vue","./src/page/index/components/analysisofmember/analysisofmember.vue","./src/page/index/components/announcementtopic/announcementtopic.vue","./src/page/index/components/annualaccountsreceivable/annualaccountsreceivable.vue","./src/page/index/components/assessmentscoring/assessmentscoring.vue","./src/page/index/components/assessmentscoringranking/assessmentscoringranking.vue","./src/page/index/components/basicmessagebox/basicmessagebox.vue","./src/page/index/components/brandconsumptionlevel/brandconsumptionlevel.vue","./src/page/index/components/branddetail/branddetail.vue","./src/page/index/components/brandlisttbox/brandlisttbox.vue","./src/page/index/components/businesscase/businesscase.vue","./src/page/index/components/businessstructure/businessstructure.vue","./src/page/index/components/busytradingranking/busytradingranking.vue","./src/page/index/components/centertitle/centertitle.vue","./src/page/index/components/consumptionconversion/consumptionconversion.vue","./src/page/index/components/consumptionlevel/consumptionlevel.vue","./src/page/index/components/consumptionperiod/consumptionperiod.vue","./src/page/index/components/contractinformation/contractinformation.vue","./src/page/index/components/corebusinessdata/corebusinessdata.vue","./src/page/index/components/corecategory/corecategory.vue","./src/page/index/components/customeragegroup/customeragegroup.vue","./src/page/index/components/customerconsumptionpreferences/customerconsumptionpreferences.vue","./src/page/index/components/customergroup/customergroup.vue","./src/page/index/components/customergroupstay/customergroupstay.vue","./src/page/index/components/dailyinspection/dailyinspection.vue","./src/page/index/components/deductiontype/deductiontype.vue","./src/page/index/components/detailedpayment/detailedpayment.vue","./src/page/index/components/festivalrevenue/festivalrevenue.vue","./src/page/index/components/festivalrevenuesuminfo/festivalrevenuesuminfo.vue","./src/page/index/components/gendercustomergroup/gendercustomergroup.vue","./src/page/index/components/highqualitymerchants/highqualitymerchants.vue","./src/page/index/components/hotproductlist/hotproductlist.vue","./src/page/index/components/mallorderstatistics/mallorderstatistics.vue","./src/page/index/components/membermall/index.vue","./src/page/index/components/merchantcategory/merchantcategory.vue","./src/page/index/components/merchantratingranking/merchantratingranking.vue","./src/page/index/components/multiindustryincome/multiindustryincome.vue","./src/page/index/components/overviewofservicearea/overviewofservicearea.vue","./src/page/index/components/pagemap/pagemap.vue","./src/page/index/components/passengerflowchanges/passengerflowchanges.vue","./src/page/index/components/paymentprogress/paymentprogress.vue","./src/page/index/components/preferencetype/preferencetype.vue","./src/page/index/components/privaterideservice/privaterideservice.vue","./src/page/index/components/regionalrevenue/regionalrevenue.vue","./src/page/index/components/returnrate/returnrate.vue","./src/page/index/components/salescomparison/salescomparison.vue","./src/page/index/components/signedclients/signedclients.vue","./src/page/index/components/thismonthbenefits/thismonthbenefits.vue","./src/page/index/components/todaytrend/todaytrend.vue","./src/page/index/components/totalaccountsreceivable/totalaccountsreceivable.vue","./src/page/index/components/tradingalert/tradingalert.vue","./src/page/index/components/trendoftrafficflow/trendoftrafficflow.vue","./src/page/index/components/vehiclemodelstay/vehiclemodelstay.vue","./src/page/index/components/vehiclestayanalysis/vehiclestayanalysis.vue","./src/page/index/components/vehiclesentering/vehiclesentering.vue","./src/page/index/components/modaltitle/modaltitle.vue","./src/page/index/components/newbigtitlebox/newbigtitlebox.vue","./src/page/index/components/noticelistbox/noticelistbox.vue","./src/page/index/components/pagetop/pagetop.vue","./src/page/index/components/smalltitle/smalltitle.vue","./src/page/index/components/supplierlistbox/supplierlistbox.vue"],"version":"5.6.3"}