update
This commit is contained in:
ylj20011123
parent
499a72203f
commit
76a4951cf0
BIN
src/assets/image/ContractInformationIcon.png
Normal file
BIN
src/assets/image/ContractInformationIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/image/SignedClientsIcon.png
Normal file
BIN
src/assets/image/SignedClientsIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/image/newTitleLongBg.png
Normal file
BIN
src/assets/image/newTitleLongBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/image/otherStBg.png
Normal file
BIN
src/assets/image/otherStBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 413 B |
BIN
src/assets/image/pageBottomBg.png
Normal file
BIN
src/assets/image/pageBottomBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
src/assets/image/smallModalBg.png
Normal file
BIN
src/assets/image/smallModalBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/image/threeStBg.png
Normal file
BIN
src/assets/image/threeStBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 454 B |
@ -44,7 +44,8 @@
|
||||
.AccountsReceivableWarningContent {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 28px 0;
|
||||
// padding: 40px 28px 0;
|
||||
padding: 0 28px 0;
|
||||
|
||||
.AccountsReceivableWarningPie {
|
||||
width: 100%;
|
||||
|
||||
@ -25,6 +25,7 @@ echarts.use([
|
||||
]);
|
||||
|
||||
let myChart: echarts.ECharts;
|
||||
let myChart2: echarts.ECharts;
|
||||
// 自定义颜色列表
|
||||
const colorList = ['#FF307C', '#FF9500', '#00FFB7'];
|
||||
const colorListSecond = ['#FF307C', '#FF9500', '#00FFB7'];
|
||||
@ -43,6 +44,7 @@ let legendList = ref<any>([])
|
||||
|
||||
onMounted(async () => {
|
||||
await handleHaveFirstPie()
|
||||
await handleHaveSecond()
|
||||
})
|
||||
|
||||
// 获取数据
|
||||
@ -81,19 +83,19 @@ const handleGetData = async () => {
|
||||
}
|
||||
|
||||
// 修改选择的tab
|
||||
const handleChangeSelectTab = async (value: number) => {
|
||||
selectTab.value = value
|
||||
if (value === 1) {
|
||||
await handleHaveFirstPie()
|
||||
} else {
|
||||
await handleHaveSecond()
|
||||
}
|
||||
}
|
||||
// const handleChangeSelectTab = async (value: number) => {
|
||||
// selectTab.value = value
|
||||
// if (value === 1) {
|
||||
// await handleHaveFirstPie()
|
||||
// } else {
|
||||
// await handleHaveSecond()
|
||||
// }
|
||||
// }
|
||||
|
||||
// 拿到第一个
|
||||
const handleHaveFirstPie = async () => {
|
||||
const res: any = await handleGetData()
|
||||
const chartDom = document.getElementById('AccountsReceivableWarningPieBox');
|
||||
const chartDom = document.getElementById('AccountsReceivableWarningPieBox1');
|
||||
if (!chartDom) return;
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
@ -195,10 +197,10 @@ const handleGetDataSecond = async () => {
|
||||
// 拿到第二个
|
||||
const handleHaveSecond = async () => {
|
||||
const res: any = await handleGetDataSecond()
|
||||
const chartDom = document.getElementById('AccountsReceivableWarningPieBox');
|
||||
const chartDom = document.getElementById('AccountsReceivableWarningPieBox2');
|
||||
if (!chartDom) return;
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
myChart2 = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
@ -255,18 +257,20 @@ const handleHaveSecond = async () => {
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
myChart2.setOption(option);
|
||||
myChart2.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
myChart2?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
myChart2?.dispose();
|
||||
});
|
||||
|
||||
|
||||
@ -275,15 +279,18 @@ onBeforeUnmount(() => {
|
||||
<template>
|
||||
<div class="AccountsReceivableWarningBox">
|
||||
|
||||
<div class="selectTabBox">
|
||||
<!-- <div class="selectTabBox">
|
||||
<div :class="selectTab === item.value ? 'tabItem selectTabItem' : 'tabItem'"
|
||||
v-for="(item, index) in tabList" :key="index" @click="handleChangeSelectTab(item.value)">{{ item.label
|
||||
}}</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="AccountsReceivableWarningContent">
|
||||
<div class="AccountsReceivableWarningPie" v-if="selectTab === 1">
|
||||
<div class="progressPieLeft" id="AccountsReceivableWarningPieBox"></div>
|
||||
|
||||
<SmallTitle :title="'应收账款预警'" />
|
||||
|
||||
<div class="AccountsReceivableWarningPie" style="margin-top: 25px;">
|
||||
<div class="progressPieLeft" id="AccountsReceivableWarningPieBox1"></div>
|
||||
|
||||
<div class="progressPieRight">
|
||||
<div class="progressPieTop">
|
||||
@ -343,8 +350,10 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="AccountsReceivableWarningPie" v-if="selectTab === 2">
|
||||
<div class="progressPieLeft" id="AccountsReceivableWarningPieBox"></div>
|
||||
<SmallTitle :title="'合同到期预警'" style="margin-top: 21px;" />
|
||||
|
||||
<div class="AccountsReceivableWarningPie" style="margin-top: 25px;">
|
||||
<div class="progressPieLeft" id="AccountsReceivableWarningPieBox2"></div>
|
||||
|
||||
<div class="progressPieRight">
|
||||
<div class="progressPieTop" style="border-bottom: none;">
|
||||
@ -360,9 +369,11 @@ onBeforeUnmount(() => {
|
||||
|
||||
<div class="progressPieBottomSecond">
|
||||
<div class="progressPieBottomItem"
|
||||
v-for="(item, index) in AccountsReceivableWarning.ContractHalfYearListExpired" :key="index">
|
||||
v-for="(item, index) in AccountsReceivableWarning?.ContractHalfYearListExpired"
|
||||
:key="index">
|
||||
<div class="progressPieBottomItemTop">
|
||||
<div class="progressPieBottomItemTopLegend" :style="{ background: colorListSecond[index] }">
|
||||
<div class="progressPieBottomItemTopLegend"
|
||||
:style="{ background: colorListSecond[index] }">
|
||||
</div>
|
||||
<div class="progressPieBottomItemTopLabel">{{ item.Expired_Situation || "" }}</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
.AnnualAccountsReceivableBox {
|
||||
width: 100%;
|
||||
|
||||
.AnnualAccountsReceivableContent {
|
||||
width: 100%;
|
||||
margin-top: 18px;
|
||||
height: 162px;
|
||||
|
||||
.AnnualAccountsReceivableCharts {
|
||||
width: 100%;
|
||||
height: 162px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,163 @@
|
||||
<script setup lang="ts">
|
||||
import SmallTitle from '../smallTitle/smallTitle.vue';
|
||||
import './AnnualAccountsReceivable.less'
|
||||
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 { onBeforeUnmount, onMounted } from 'vue';
|
||||
import { handleGetProjectYearlyArrearageList } from '../../service';
|
||||
|
||||
|
||||
// 注册组件
|
||||
echarts.use([
|
||||
BarChart,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
CanvasRenderer
|
||||
]);
|
||||
|
||||
let myChart: echarts.ECharts;
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
const res = await handleGetData()
|
||||
|
||||
const chartDom = document.getElementById('AnnualAccountsReceivableCharts');
|
||||
if (!chartDom) return;
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
yAxis: { // 改为 yAxis 显示分类数据
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
axisLabel: {
|
||||
width: 80,
|
||||
overflow: 'truncate',
|
||||
ellipsis: '...',
|
||||
interval: 0
|
||||
}
|
||||
},
|
||||
xAxis: { // 改为 xAxis 显示数值
|
||||
type: 'value',
|
||||
name: "万元",
|
||||
splitLine: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: res.seriesData,
|
||||
realData: res.seriesData,
|
||||
type: 'bar',
|
||||
barWidth: '6', // 现在是柱子的高度
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
borderRadius: [0, 4, 4, 0], // 调整圆角方向
|
||||
color: 'rgba(23, 42, 70, 1)'
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: [0, 4, 4, 0], // 调整圆角方向
|
||||
color: function (params: any) {
|
||||
const index = params.dataIndex;
|
||||
if (index > 6) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0, 0, 1, 0, // 渐变方向改为水平
|
||||
[
|
||||
{ offset: 0, color: '#FF4F00' },
|
||||
{ offset: 1, color: '#D3B70E' }
|
||||
]
|
||||
);
|
||||
}
|
||||
else {
|
||||
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0, 0, 1, 0, // 渐变方向改为水平
|
||||
[
|
||||
{ offset: 0, color: '#018FFF' },
|
||||
{ offset: 1, color: '#00F4FF' }
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
left: '0', // 左侧留更多空间给y轴标签
|
||||
right: '10%',
|
||||
bottom: '5%',
|
||||
top: '0',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
formatter: function (params: any) {
|
||||
const data: any = params[0]
|
||||
return `
|
||||
<div style="font-weight:bold">${data?.name || '-'}年</div>
|
||||
<div>已付金额${data?.value || '-'}万元 </div>
|
||||
`;
|
||||
}
|
||||
// + '笔'
|
||||
}
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
// 获取数据的方法
|
||||
const handleGetData = async () => {
|
||||
let category: any = []
|
||||
let seriesData: any = []
|
||||
|
||||
const req: any = {
|
||||
|
||||
}
|
||||
const data = await handleGetProjectYearlyArrearageList(req)
|
||||
console.log('handleGetProjectYearlyArrearageListhandleGetProjectYearlyArrearageListhandleGetProjectYearlyArrearageList', data);
|
||||
|
||||
let list: any = data.ProjectMonthlyCompleteList.slice(0, 5)
|
||||
list.reverse()
|
||||
if (list && list.length > 0) {
|
||||
list.forEach((item: any) => {
|
||||
category.push(item.Business_Year)
|
||||
seriesData.push(item.Payment_Amount)
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
category: category,
|
||||
seriesData: seriesData,
|
||||
}
|
||||
}
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="AnnualAccountsReceivableBox">
|
||||
<SmallTitle title="年度应收总额完成度" />
|
||||
|
||||
<div class="AnnualAccountsReceivableContent">
|
||||
<div class="AnnualAccountsReceivableCharts" id="AnnualAccountsReceivableCharts"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,106 @@
|
||||
.AssessmentScoringRankingBox {
|
||||
width: 100%;
|
||||
|
||||
.AssessmentScoringRankingListBox {
|
||||
|
||||
|
||||
.AssessmentScoringRankingItem {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 11px 10px;
|
||||
background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0.05) 100%);
|
||||
margin-bottom: 10px;
|
||||
|
||||
.AssessmentScoringRankingItemTop {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.AssessmentScoringRankingItemIndex {
|
||||
font-family: Impact, Impact;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #171B2D;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
box-sizing: border-box;
|
||||
padding: 1px 8px 2px 4px;
|
||||
margin-right: 5px;
|
||||
background-image: url('../../../../assets/image/threeStBg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.AssessmentScoringRankingItemIndexAfter {
|
||||
background-image: url('../../../../assets/image/otherStBg.png');
|
||||
}
|
||||
|
||||
.AssessmentScoringRankingItemName {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.AssessmentScoringRankingItemBottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.AssessmentScoringRankingItemBottomItem {
|
||||
width: calc(50% - 5px);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.AssessmentScoringRankingItemBottomItemPosition {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #0094FF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
padding: 5px 7px;
|
||||
background: rgba(0, 148, 255, 0.3);
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.AssessmentScoringRankingItemBottomItemRight {
|
||||
flex: 1;
|
||||
|
||||
.AssessmentScoringRankingItemBottomItemMark {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.AssessmentScoringRankingItemBottomItemProgress {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin-top: 4px;
|
||||
background: rgba(47, 52, 107, 1);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
|
||||
.AssessmentScoringRankingItemBottomItemHaveProgress {
|
||||
height: 100%;
|
||||
background-color: #7D4CD2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import SmallTitle from '../smallTitle/smallTitle.vue';
|
||||
import './AssessmentScoringRanking.less'
|
||||
import { handleGetExamineResultList } from '../../service';
|
||||
|
||||
|
||||
// 考核数据
|
||||
let rankList: any = ref<any>([])
|
||||
|
||||
onMounted(async () => {
|
||||
await handleGetData()
|
||||
})
|
||||
|
||||
|
||||
// 拿到数据的方法
|
||||
const handleGetData = async () => {
|
||||
const req: any = {
|
||||
DataType: 1,
|
||||
StartMonth: "202501",
|
||||
EndMonth: "202501",
|
||||
provinceCode: "340000",
|
||||
}
|
||||
|
||||
const data = await handleGetExamineResultList(req)
|
||||
console.log('fjdisfjoasidfj', data);
|
||||
let list: any = data.slice(0, 5)
|
||||
rankList.value = list
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="AssessmentScoringRankingBox">
|
||||
<SmallTitle title="考核打分排行榜" />
|
||||
|
||||
|
||||
<div class="AssessmentScoringRankingListBox">
|
||||
<div class="AssessmentScoringRankingItem" v-for="(item, index) in rankList" :key="index">
|
||||
<div class="AssessmentScoringRankingItemTop">
|
||||
<div
|
||||
:class="index + 1 > 3 ? 'AssessmentScoringRankingItemIndex AssessmentScoringRankingItemIndexAfter' : 'AssessmentScoringRankingItemIndex '">
|
||||
{{ index + 1 }}</div>
|
||||
<div class="AssessmentScoringRankingItemName">{{ item.SERVERPART_NAME }}</div>
|
||||
</div>
|
||||
|
||||
<div class="AssessmentScoringRankingItemBottom">
|
||||
<div class="AssessmentScoringRankingItemBottomItem" v-for="(subItem, subIndex) in item.list"
|
||||
:key="subIndex">
|
||||
<div class="AssessmentScoringRankingItemBottomItemPosition">{{ subItem.REGION_NAME }}</div>
|
||||
<div class="AssessmentScoringRankingItemBottomItemRight">
|
||||
<div class="AssessmentScoringRankingItemBottomItemMark">{{ subItem.EXAMINE_SCORE }}分</div>
|
||||
<div class="AssessmentScoringRankingItemBottomItemProgress">
|
||||
<div class="AssessmentScoringRankingItemBottomItemHaveProgress"
|
||||
:style="{ width: `${subItem.EXAMINE_SCORE}%` }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
.BrandConsumptionLevel {
|
||||
width: 100%;
|
||||
height: 174px;
|
||||
margin-top: 13px;
|
||||
height: 167px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
@ -52,15 +52,31 @@ onMounted(async () => {
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
type: 'value',
|
||||
splitLine: { show: false } // 隐藏刻度线
|
||||
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: {
|
||||
|
||||
@ -5,6 +5,9 @@
|
||||
width: 100%;
|
||||
display: 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;
|
||||
@ -42,12 +45,13 @@
|
||||
|
||||
.BusinessCaseRevenueYOY {
|
||||
width: 100%;
|
||||
margin-top: 26px;
|
||||
background: linear-gradient(30deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
margin-top: 29px;
|
||||
background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
box-sizing: border-box;
|
||||
padding: 20px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(0, 148, 255, 0.50);
|
||||
|
||||
|
||||
.BusinessCaseLeftItem {
|
||||
@ -144,16 +148,18 @@
|
||||
.featureAnalysis {
|
||||
width: 100%;
|
||||
height: 283px;
|
||||
margin-top: 32px;
|
||||
|
||||
.featureAnalysisBox {
|
||||
width: 100%;
|
||||
height: 283px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.featureAnalysisBottom {
|
||||
width: 100%;
|
||||
height: 283px;
|
||||
margin-top: 23px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -306,7 +306,7 @@ const handleShowBottomData = async (res: any) => {
|
||||
grid: {
|
||||
left: '10', // 增加左侧空间
|
||||
right: '10', // 增加右侧空间
|
||||
bottom: '10',
|
||||
bottom: '0',
|
||||
top: '10',
|
||||
containLabel: true
|
||||
},
|
||||
@ -379,7 +379,7 @@ onBeforeUnmount(() => {
|
||||
|
||||
<template>
|
||||
<div class="BusinessCaseBox">
|
||||
<SmallTitle>
|
||||
<SmallTitle style="padding-left: 0;">
|
||||
<template #extra>
|
||||
<div class="BusinessCaseTabBox">
|
||||
<div :class="selectTab === item.value ? 'BusinessCaseItem selectBusinessCaseItem' : 'BusinessCaseItem'"
|
||||
@ -419,11 +419,11 @@ onBeforeUnmount(() => {
|
||||
|
||||
<!-- 营收特征分析 -->
|
||||
<div class="featureAnalysis">
|
||||
<SmallTitle title="营收特征分析" style="margin-top: 20px;" />
|
||||
<SmallTitle title="营收特征分析" />
|
||||
|
||||
<div class="featureAnalysisBox" id="featureAnalysis"></div>
|
||||
|
||||
<SmallTitle title="营收同比分析" style="margin-top: 20px;" />
|
||||
<SmallTitle title="营收同比分析" style="margin-top: 31px;" />
|
||||
|
||||
<div class="featureAnalysisBottom" id="featureAnalysisBottom"></div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
.BusinessStructureBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 3px 0 0 10px;
|
||||
|
||||
.BusinessStructureCharts {
|
||||
width: 100%;
|
||||
// margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px 30px;
|
||||
|
||||
padding: 22px 0 0 31px;
|
||||
|
||||
.BusinessStructureUnit {
|
||||
font-family: "Microsoft YaHei";
|
||||
@ -19,21 +19,24 @@
|
||||
}
|
||||
|
||||
.BusinessStructure {
|
||||
width: 112px;
|
||||
height: 172px;
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.BusinessStructureDataList {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
width: calc(100% - 162px);
|
||||
height: 132px;
|
||||
margin-left: 30px;
|
||||
|
||||
.BusinessStructureDataBox {
|
||||
// margin-left: 30px;
|
||||
display: flex;
|
||||
padding: 6px 0;
|
||||
|
||||
.BusinessStructureDataLeftBox {
|
||||
box-sizing: border-box;
|
||||
padding-top: 20px;
|
||||
|
||||
.BusinessStructureItem {
|
||||
display: flex;
|
||||
@ -93,7 +96,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -182,25 +182,23 @@ onBeforeUnmount(() => {
|
||||
|
||||
<div class="BusinessStructureCharts">
|
||||
<!-- <div class="BusinessStructureUnit">万元</div> -->
|
||||
<div style="display: flex;margin-top: 30px;align-items: center;">
|
||||
<div class="BusinessStructure" id="BusinessStructure"></div>
|
||||
<div class="BusinessStructure" id="BusinessStructure"></div>
|
||||
|
||||
<div class="BusinessStructureDataList">
|
||||
<div class="BusinessStructureDataBox" v-for="(item, index) in lengedList" :key="index">
|
||||
<div class="BusinessStructureDataLeftBox">
|
||||
<div class="BusinessStructureItem">
|
||||
<div class="BusinessStructureItemLeged" :style="{ background: colorList[index] }"></div>
|
||||
<div class="BusinessStructureItemLabel">{{ item.name }}</div>
|
||||
<div class="BusinessStructureItemLabel" style="margin-left: 8px;">{{ item.percent }}%
|
||||
</div>
|
||||
<!-- <div class="BusinessStructureItemLabel" style="margin-left: 8px;">{{ item.value }}</div> -->
|
||||
<div class="BusinessStructureDataList">
|
||||
<div class="BusinessStructureDataBox" v-for="(item, index) in lengedList" :key="index">
|
||||
<div class="BusinessStructureDataLeftBox">
|
||||
<div class="BusinessStructureItem">
|
||||
<div class="BusinessStructureItemLeged" :style="{ background: colorList[index] }"></div>
|
||||
<div class="BusinessStructureItemLabel">{{ item.name }}</div>
|
||||
<div class="BusinessStructureItemLabel" style="margin-left: 8px;">{{ item.percent }}%
|
||||
</div>
|
||||
<!-- <div class="BusinessStructureItemLabel" style="margin-left: 8px;">{{ item.value }}</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,6 +1,5 @@
|
||||
.BusyTradingRankingBox {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -10,9 +9,12 @@
|
||||
|
||||
.BusyTradingRankingDataList {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
|
||||
|
||||
.BusyTradingRankingItem {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -65,6 +67,7 @@
|
||||
.tradingRankingItemRight {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.tradingRankingItemTOTALPRICE {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
.ConsumptionConversion {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
height: 174px;
|
||||
margin-top: 13px;
|
||||
height: 163px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
@ -36,32 +36,40 @@ onMounted(async () => {
|
||||
|
||||
const option = {
|
||||
legend: {
|
||||
data: ['客单', '车流'], // 对应 series 中的 name
|
||||
top: 0, // 距离容器底部距离
|
||||
right: 0,
|
||||
itemWidth: 20, // 图例标记的图形宽度
|
||||
itemWidth: 30, // 图例标记的图形宽度
|
||||
itemHeight: 10, // 图例标记的图形高度
|
||||
textStyle: {
|
||||
color: '#333' // 图例文字颜色
|
||||
color: '#fff' // 图例文字颜色
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true // 保证刻度线与标签对齐
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '车流量',
|
||||
nameTextStyle: {
|
||||
color: '#00F6FF' // Y轴名称颜色
|
||||
color: '#ffffff' // Y轴名称颜色
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#00F6FF'
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
@ -73,28 +81,27 @@ onMounted(async () => {
|
||||
type: 'value',
|
||||
name: '客单量',
|
||||
nameTextStyle: {
|
||||
color: '#008CFF' // Y轴名称颜色
|
||||
color: '#ffffff' // Y轴名称颜色
|
||||
},
|
||||
splitLine: { show: false },
|
||||
position: 'right',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#008CFF'
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#008CFF',
|
||||
formatter: '{value}' // 添加单位
|
||||
color: '#ffffff',
|
||||
},
|
||||
offset: 0 // 确保Y轴紧贴图表
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
left: '10', // 增加左侧空间
|
||||
left: '20', // 增加左侧空间
|
||||
right: '10', // 增加右侧空间
|
||||
bottom: '10',
|
||||
top: '10',
|
||||
bottom: '0',
|
||||
top: '50',
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
@ -102,7 +109,7 @@ onMounted(async () => {
|
||||
name: '车流量',
|
||||
data: res.carResList.map((value: any, index: any) => ({
|
||||
value: value,
|
||||
symbol: index % 3 === 0 ? 'circle' : 'none',
|
||||
symbol: index % 2 === 0 ? 'circle' : 'none',
|
||||
symbolSize: 6
|
||||
})),
|
||||
type: 'line',
|
||||
@ -120,7 +127,7 @@ onMounted(async () => {
|
||||
name: '客单量',
|
||||
data: res.orderResList.map((value: any, index: any) => ({
|
||||
value: value,
|
||||
symbol: index % 3 === 0 ? 'circle' : 'none',
|
||||
symbol: index % 2 === 0 ? 'circle' : 'none',
|
||||
symbolSize: 6
|
||||
})),
|
||||
type: 'line',
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
|
||||
.ConsumptionLevel {
|
||||
width: 100%;
|
||||
height: 174px;
|
||||
margin-top: 13px;
|
||||
height: 163px;
|
||||
margin-top: 19px;
|
||||
}
|
||||
|
||||
.ConsumptionLevelDesc {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
.ConsumptionPeriod {
|
||||
width: 100%;
|
||||
height: 174px;
|
||||
margin-top: 13px;
|
||||
height: 167px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
@ -43,23 +43,32 @@ onMounted(async () => {
|
||||
interval: 3,
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true // 保证刻度线与标签对齐
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '车流量',
|
||||
name: '客单占比',
|
||||
nameTextStyle: {
|
||||
color: '#00F6FF' // Y轴名称颜色
|
||||
color: '#fff' // Y轴名称颜色
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#00F6FF'
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#00F6FF',
|
||||
color: '#fff',
|
||||
formatter: '{value}' // 添加单位
|
||||
}
|
||||
},
|
||||
@ -67,12 +76,20 @@ onMounted(async () => {
|
||||
left: '10', // 增加左侧空间
|
||||
right: '10', // 增加右侧空间
|
||||
bottom: '10',
|
||||
top: '10',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: res.seriesData,
|
||||
// data: res.seriesData,
|
||||
data: res.seriesData.map((value: any, index: any) => {
|
||||
return {
|
||||
value: value,
|
||||
// 只在显示标签的位置显示symbol
|
||||
symbol: index % 4 === 0 ? 'circle' : 'none',
|
||||
symbolSize: 6
|
||||
}
|
||||
}),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
|
||||
@ -0,0 +1,175 @@
|
||||
.ContractInformationBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 15px;
|
||||
background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
border-bottom: 1px solid rgba(0, 148, 255, 0.50);
|
||||
|
||||
.ContractInformationBigItem {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
|
||||
.ContractInformationBigLeft {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin-right: 10px;
|
||||
|
||||
.ContractInformationBigLeftImg {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.ContractInformationBigRight {
|
||||
width: calc(100% - 56px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.ContractInformationBigRightLeft {
|
||||
.ContractInformationBigRightLabel {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ContractInformationBigRightText {
|
||||
.ContractInformationBigRightSmallLabel {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #7E858A;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ContractInformationBigRightValue {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #00F6FF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ContractInformationBigRightRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ContractInformationBigRightRightValue {
|
||||
font-family: Impact, Impact;
|
||||
font-weight: 400;
|
||||
font-size: 25px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ContractInformationBigRightRightUnit {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #828689;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ContractInformationSmallItem {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
|
||||
.ContractInformationSmallLeft {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
margin-right: 17px;
|
||||
}
|
||||
|
||||
.ContractInformationSmallRight {
|
||||
width: calc(100% - 50px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.ContractInformationSmallRightLeft {
|
||||
.ContractInformationSmallRightLeftTop {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ContractInformationSmallRightLeftBottom {
|
||||
.ContractInformationSmallRightLeftBottomNormalText {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #7B858D;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ContractInformationSmallRightLeftBottomValue {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #7B858D;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.ContractInformationSmallRightRight {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.ContractInformationSmallRightRightValue {
|
||||
font-family: Impact, Impact;
|
||||
font-weight: 400;
|
||||
font-size: 25px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ContractInformationSmallRightRightUnit {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #7B858D;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,225 @@
|
||||
<script setup lang="ts">
|
||||
import './ContractInformation.less'
|
||||
import ContractInformationIcon from '../../../../assets/image/ContractInformationIcon.png'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import { handleGetProjectSummaryInfo } from '../../service';
|
||||
|
||||
import * as echarts from 'echarts/core';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
|
||||
|
||||
// 注册组件
|
||||
echarts.use([
|
||||
PieChart,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
CanvasRenderer
|
||||
]);
|
||||
|
||||
let myChart: echarts.ECharts;
|
||||
let myChart2: echarts.ECharts;
|
||||
|
||||
// 当前的数据
|
||||
let realDataObj = ref<any>()
|
||||
// 合作分成
|
||||
let shareRevenue = ref<any>()
|
||||
// 固定租金
|
||||
let FixedRent = ref<any>()
|
||||
|
||||
onMounted(async () => {
|
||||
await handleGetData()
|
||||
})
|
||||
|
||||
// 拿到数据
|
||||
const handleGetData = async () => {
|
||||
const req: any = {
|
||||
ProvinceCode: '340000'
|
||||
}
|
||||
const data = await handleGetProjectSummaryInfo(req)
|
||||
|
||||
|
||||
console.log('handleGetDatahandleGetDatahandleGetDatahandleGetData', data);
|
||||
realDataObj.value = data
|
||||
|
||||
shareRevenue.value = data.BusinessTypeSummaryList[0]
|
||||
FixedRent.value = data.BusinessTypeSummaryList[1]
|
||||
|
||||
|
||||
|
||||
const chartDom = document.getElementById('ContractInformation1');
|
||||
if (!chartDom) return;
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
|
||||
const chartDom2 = document.getElementById('ContractInformation2');
|
||||
if (!chartDom) return;
|
||||
myChart2 = echarts.init(chartDom2);
|
||||
|
||||
|
||||
const option1 = {
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['80%', '100%'],
|
||||
center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
// 自定义颜色逻辑
|
||||
return params.dataIndex === 0 ? '#00F6FF' : '#0C6370';
|
||||
}
|
||||
},
|
||||
data: [((shareRevenue?.value.Contract_SignCount / realDataObj?.value.Contract_SignCount) * 100), 100 - ((shareRevenue?.value.Contract_SignCount / realDataObj?.value.Contract_SignCount) * 100)]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const option2 = {
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['80%', '100%'],
|
||||
center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
// 自定义颜色逻辑
|
||||
return params.dataIndex === 0 ? '#00F6FF' : '#0C6370';
|
||||
}
|
||||
},
|
||||
data: [((FixedRent?.value.Contract_SignCount / realDataObj?.value.Contract_SignCount) * 100), 100 - ((FixedRent?.value.Contract_SignCount / realDataObj?.value.Contract_SignCount) * 100)]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
myChart.setOption(option1);
|
||||
myChart.resize();
|
||||
|
||||
myChart2.setOption(option2);
|
||||
myChart2.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
|
||||
}
|
||||
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
myChart2?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
myChart2?.dispose();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="ContractInformationBox">
|
||||
<div class="ContractInformationBigItem">
|
||||
<div class="ContractInformationBigLeft">
|
||||
<img :src="ContractInformationIcon" class="ContractInformationBigLeftImg" />
|
||||
</div>
|
||||
|
||||
<div class="ContractInformationBigRight">
|
||||
<div class="ContractInformationBigRightLeft">
|
||||
<div class="ContractInformationBigRightLabel">合同信息</div>
|
||||
<div class="ContractInformationBigRightText">
|
||||
<span class="ContractInformationBigRightSmallLabel">签约合同</span>
|
||||
<span class="ContractInformationBigRightValue">{{ realDataObj?.Contract_SignCount || ''
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ContractInformationBigRightRight">
|
||||
<div class="ContractInformationBigRightRightValue">{{ realDataObj?.Contract_Amount || '' }}
|
||||
</div>
|
||||
<div class="ContractInformationBigRightRightUnit">万元</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ContractInformationSmallItem">
|
||||
<div class="ContractInformationSmallLeft" id="ContractInformation1"></div>
|
||||
<div class="ContractInformationSmallRight">
|
||||
<div class="ContractInformationSmallRightLeft">
|
||||
<div class="ContractInformationSmallRightLeftTop">合作分成</div>
|
||||
<div class="ContractInformationSmallRightLeftBottom">
|
||||
<span class="ContractInformationSmallRightLeftBottomNormalText">合同</span>
|
||||
<span class="ContractInformationSmallRightLeftBottomValue">{{ shareRevenue?.Contract_SignCount
|
||||
|| "" }}</span>
|
||||
<span class="ContractInformationSmallRightLeftBottomNormalText"
|
||||
style="margin-left: 10px;">占比</span>
|
||||
<span class="ContractInformationSmallRightLeftBottomValue">
|
||||
{{ realDataObj?.Contract_SignCount ? ((shareRevenue?.Contract_SignCount /
|
||||
realDataObj?.Contract_SignCount) * 100).toFixed(2) + '%' : '-' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ContractInformationSmallRightRight">
|
||||
<div class="ContractInformationSmallRightRightValue">{{ shareRevenue?.Contract_Amount || '' }}
|
||||
</div>
|
||||
<div class="ContractInformationSmallRightRightUnit">万元</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ContractInformationSmallItem" style="border-bottom: none;padding-bottom: 0;">
|
||||
<div class="ContractInformationSmallLeft" id="ContractInformation2"></div>
|
||||
<div class="ContractInformationSmallRight">
|
||||
<div class="ContractInformationSmallRightLeft">
|
||||
<div class="ContractInformationSmallRightLeftTop">固定租金</div>
|
||||
<div class="ContractInformationSmallRightLeftBottom">
|
||||
<span class="ContractInformationSmallRightLeftBottomNormalText">合同</span>
|
||||
<span class="ContractInformationSmallRightLeftBottomValue">{{ FixedRent?.Contract_SignCount
|
||||
|| "" }}</span>
|
||||
<span class="ContractInformationSmallRightLeftBottomNormalText"
|
||||
style="margin-left: 10px;">占比</span>
|
||||
<span class="ContractInformationSmallRightLeftBottomValue">
|
||||
{{ realDataObj?.Contract_SignCount ? ((FixedRent?.Contract_SignCount /
|
||||
realDataObj?.Contract_SignCount) * 100).toFixed(2) + '%' : '-' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ContractInformationSmallRightRight">
|
||||
<div class="ContractInformationSmallRightRightValue">{{ FixedRent?.Contract_Amount || '' }}
|
||||
</div>
|
||||
<div class="ContractInformationSmallRightRightUnit">万元</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -118,6 +118,9 @@
|
||||
.newCoreBusinessBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(3, 22, 38, 0.2);
|
||||
|
||||
|
||||
.newCoreBusinessItem {
|
||||
box-sizing: border-box;
|
||||
|
||||
@ -1,17 +1,23 @@
|
||||
.CustomerAgeGroupBox {
|
||||
width: 25%;
|
||||
width: calc((100% - 28px) / 3);
|
||||
display: inline-block;
|
||||
height: 210px;
|
||||
|
||||
.CustomerAgeGroupCharts {
|
||||
width: 100%;
|
||||
height: 182px;
|
||||
background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
box-sizing: border-box;
|
||||
padding: 20px 20px 18px;
|
||||
// background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
// box-sizing: border-box;
|
||||
// padding: 20px 20px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// margin-top: 5px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 10px 18px;
|
||||
background-image: url('../../../../assets/image/smallModalBg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.CustomerAgeGroupUnit {
|
||||
font-family: "Microsoft YaHei";
|
||||
@ -26,8 +32,8 @@
|
||||
}
|
||||
|
||||
.CustomerAgeGroup {
|
||||
width: 86px;
|
||||
height: 86px;
|
||||
width: 190px;
|
||||
height: 154px;
|
||||
}
|
||||
|
||||
.legendBox {
|
||||
|
||||
@ -49,34 +49,65 @@ onMounted(async () => {
|
||||
// },
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
return `
|
||||
<div>${res.category[params?.dataIndex]}：${params?.data || ""}万人, 占比：${params?.percent || ''}%</div>
|
||||
<div>${res.category[params?.dataIndex]}：${params?.data || ""}万人, 占比：${res?.percentData[params?.dataIndex] || ''}%</div>
|
||||
`
|
||||
// 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%', '100%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.pieData
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
axisLabel: {
|
||||
interval: 0, // 强制显示所有标签
|
||||
hideOverlap: false, // 禁止自动隐藏重叠标签
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true // 保证刻度线与标签对齐
|
||||
}
|
||||
]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '%',
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '10', // 增加左侧空间
|
||||
right: '10', // 增加右侧空间
|
||||
bottom: '10',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
series: {
|
||||
// data: [120, 200, 150, 80, 70, 110, 130],
|
||||
data: res.seriesData,
|
||||
realData: res.realData,
|
||||
type: 'bar',
|
||||
barWidth: '6',
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
// color: 'rgba(23, 42, 70, 1)'
|
||||
color: 'rgba(0, 148, 255, 0.1)'
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
// 动态返回渐变颜色
|
||||
color: function (params: any) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1, // 渐变方向（垂直）
|
||||
[
|
||||
{ offset: 0, color: '#008CFF' }, // 渐变起始色
|
||||
{ offset: 1, color: '#00F6FF' } // 渐变结束色
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -89,7 +120,7 @@ onMounted(async () => {
|
||||
const handleGetData = async () => {
|
||||
let category: any = []
|
||||
let seriesData: any = []
|
||||
let realData: any = []
|
||||
let percentData: any = []
|
||||
|
||||
const req: any = {
|
||||
provinceCode: '530000',
|
||||
@ -97,17 +128,22 @@ const handleGetData = async () => {
|
||||
}
|
||||
const data = await handleGetCustomerAgeRatio(req)
|
||||
|
||||
|
||||
for (let i = 0; i < 4; i++) {
|
||||
let sum: number = (data[0].data[i] + data[1].data[i]).toFixed(2)
|
||||
seriesData.push(sum)
|
||||
let sum: number = (data[0].data[i] + data[1].data[i])
|
||||
seriesData.push(sum.toFixed(2))
|
||||
percentData.push((sum / 200 * 100).toFixed(2))
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
let res: any = {
|
||||
category: ["25以下", "25-35", "35-45", "45以上"],// x轴的内容
|
||||
pieData: seriesData,// y轴的数据
|
||||
realData: realData// 真实数据
|
||||
seriesData: seriesData,// y轴的数据
|
||||
percentData: percentData// 真实数据
|
||||
}
|
||||
console.log('hfuhdsuafsdjfh', res);
|
||||
return res
|
||||
}
|
||||
|
||||
@ -131,13 +167,13 @@ onBeforeUnmount(() => {
|
||||
<!-- <div class="CustomerAgeGroupUnit">万人</div> -->
|
||||
<div class="CustomerAgeGroup" id="CustomerAgeGroup"></div>
|
||||
|
||||
<div class="legendBox">
|
||||
<!-- <div class="legendBox">
|
||||
<div class="legendItem" v-for="(item, index) in categoryList" :key="index"
|
||||
:style="{ marginBottom: index <= 1 ? '6px' : '' }">
|
||||
<div class="legendIcon" :style="{ background: colorList[index] }"></div>
|
||||
<div class="legendLabel">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -2,13 +2,13 @@
|
||||
width: 100%;
|
||||
|
||||
.CustomerConsumptionPreferencesContent {
|
||||
margin-top: 25px;
|
||||
margin-top: 14px;
|
||||
width: 100%;
|
||||
height: 212px;
|
||||
height: 167px;
|
||||
|
||||
.CustomerConsumptionPreferencesCharts {
|
||||
width: 100%;
|
||||
height: 212px;
|
||||
height: 167px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -65,11 +65,23 @@ const handleGoMounted = async () => {
|
||||
interval: 0 // 强制显示所有标签
|
||||
// rotate: 30, // 标签旋转30度（防止重叠）
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
// data: res.category
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: "万辆",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: { show: false } // 隐藏刻度线
|
||||
},
|
||||
series: [
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
.CustomerGroupBoxContent{
|
||||
width: 100%;
|
||||
height: 173px;
|
||||
margin-top: 20px;
|
||||
height: 163px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
@ -77,7 +77,10 @@ const handleShowCharts = async () => {
|
||||
show: false // 隐藏刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 隐藏轴线
|
||||
show: true, // 隐藏轴线
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 确保网格线隐藏
|
||||
@ -85,29 +88,32 @@ const handleShowCharts = async () => {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '交易金额',
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
formatter: '{value}'
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 隐藏刻度线
|
||||
},
|
||||
axisLine: {
|
||||
show: false // 隐藏轴线
|
||||
show: true,// 隐藏轴线
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false // 确保网格线隐藏
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '用户交易',
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
symbolSize: function (data: any) {
|
||||
return Math.sqrt(data[2]) * 5; // 气泡大小与占比相关
|
||||
},
|
||||
data: res,
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
color: function (params: any) {
|
||||
// 按性别区分颜色
|
||||
const gender = params.data[3]; // 第四项是性别
|
||||
return gender === '男性' ? '#0094FF' : '#FF307C'; // 男性蓝色，女性红色
|
||||
@ -134,7 +140,7 @@ const handleShowCharts = async () => {
|
||||
// 提示框格式化
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
formatter: function (params: any) {
|
||||
const data = params.data;
|
||||
return `
|
||||
年龄: ${data[0]}岁<br>
|
||||
|
||||
@ -0,0 +1,62 @@
|
||||
.DailyInspectionBox {
|
||||
width: 100%;
|
||||
|
||||
.DailyInspectionContent {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 28px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.DailyInspectionCharts {
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
margin-right: 38px;
|
||||
}
|
||||
|
||||
.DailyInspectionRightBox {
|
||||
width: calc(100% - 156px);
|
||||
height: 100%;
|
||||
|
||||
.DailyInspectionRightBoxTop {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #E0E3E4;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.DailyInspectionRightBoxBottom {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.DailyInspectionRightBoxBottomItem {
|
||||
width: 50%;
|
||||
|
||||
.DailyInspectionRightBoxBottomItemValue {
|
||||
font-family: Impact, Impact;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 1px;
|
||||
text-align: left;
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
.DailyInspectionRightBoxBottomItemLabel {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #3D4A54;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
198
src/page/index/components/DailyInspection/DailyInspection.vue
Normal file
198
src/page/index/components/DailyInspection/DailyInspection.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts/core';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GraphicComponent
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
||||
import returnRateBg from '../../../../assets/image/returnRateBg.png'
|
||||
import { handleGetPatrolAnalysis } from '../../service';
|
||||
import moment from 'moment';
|
||||
import SmallTitle from '../smallTitle/smallTitle.vue';
|
||||
import './DailyInspection.less'
|
||||
|
||||
|
||||
// 注册组件
|
||||
echarts.use([
|
||||
PieChart,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
GraphicComponent,
|
||||
CanvasRenderer
|
||||
]);
|
||||
|
||||
let myChart: echarts.ECharts;
|
||||
// 自定义颜色列表
|
||||
const colorList = ['#7D4CD2', '#2E2C5D'];
|
||||
// 日常巡检数据
|
||||
let dailyDetailObj = ref<any>()
|
||||
|
||||
onMounted(async () => {
|
||||
await handleGoMounted()
|
||||
})
|
||||
|
||||
const handleGoMounted = async () => {
|
||||
const res: any = await handleGetData()
|
||||
|
||||
const chartDom = document.getElementById('DailyInspectionCharts');
|
||||
if (!chartDom) return;
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
trigger: 'item', // 触发类型：坐标轴触发
|
||||
axisPointer: { // 坐标轴指示器配置
|
||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||
},
|
||||
formatter: function (params: any) { // 自定义提示框内容
|
||||
return `
|
||||
<div style="font-weight:bold">${params.data.name} ${params?.percent}% ${res.realData[params.dataIndex]}</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
graphic: { // 关键配置：在图表中心添加图片
|
||||
elements: [
|
||||
{
|
||||
type: 'image',
|
||||
style: {
|
||||
image: returnRateBg,
|
||||
width: 83,
|
||||
height: 83
|
||||
},
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
z: 10
|
||||
},
|
||||
{
|
||||
// 中心文字（叠加在图片上）
|
||||
type: 'text',
|
||||
style: {
|
||||
text: `${dailyDetailObj.value.CompleteRate || '-'}`, // 要显示的文字内容
|
||||
font: 'bold 20px Arial', // 字体样式
|
||||
fill: '#FFFFFF', // 文字颜色
|
||||
textAlign: 'center',
|
||||
textVerticalAlign: 'middle'
|
||||
},
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
z: 20 // 层级高于图片
|
||||
}
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['85%', '100%'],
|
||||
center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
||||
avoidLabelOverlap: false,
|
||||
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: res.seriesData
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
}
|
||||
|
||||
// 拿到传入的数据
|
||||
const props = defineProps<{
|
||||
currentService?: any;
|
||||
}>();
|
||||
|
||||
// 监听传入的选中服务区
|
||||
watch(
|
||||
() => props.currentService,
|
||||
(newVal, oldVal) => {
|
||||
handleGoMounted()
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 业态结构占比
|
||||
const handleGetData = async () => {
|
||||
|
||||
const req: any = {
|
||||
StartDate: '2025-01-01',
|
||||
EndDate: '2025-01-01',
|
||||
provinceCode: "340000"
|
||||
}
|
||||
|
||||
const data = await handleGetPatrolAnalysis(req)
|
||||
|
||||
console.log('业态结构占比', data)
|
||||
|
||||
|
||||
dailyDetailObj.value = data
|
||||
|
||||
|
||||
let res: any = {
|
||||
// category: category,// x轴的内容
|
||||
seriesData: [data.CompleteRate, 100 - data.CompleteRate],// y轴的数据
|
||||
// realData: realData// 真实数据
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<div class="DailyInspectionBox">
|
||||
<SmallTitle title="日常巡检" />
|
||||
|
||||
<div class="DailyInspectionContent">
|
||||
<div class="DailyInspectionCharts" id="DailyInspectionCharts"></div>
|
||||
|
||||
<div class="DailyInspectionRightBox">
|
||||
<div class="DailyInspectionRightBoxTop">达标率/全省(%)</div>
|
||||
<div class="DailyInspectionRightBoxBottom">
|
||||
<div class="DailyInspectionRightBoxBottomItem">
|
||||
<div class="DailyInspectionRightBoxBottomItemValue">{{ dailyDetailObj?.RectifyCount || '-' }}
|
||||
</div>
|
||||
<div class="DailyInspectionRightBoxBottomItemLabel">已整改（个）</div>
|
||||
</div>
|
||||
|
||||
<div class="DailyInspectionRightBoxBottomItem">
|
||||
<div class="DailyInspectionRightBoxBottomItemValue">{{ dailyDetailObj?.UnRectifyCount || '-' }}
|
||||
</div>
|
||||
<div class="DailyInspectionRightBoxBottomItemLabel">未整改(个)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,13 @@
|
||||
.DetailedPaymentBox {
|
||||
width: 100%;
|
||||
|
||||
.DetailedPaymentCharts {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
|
||||
.DetailedPayment {
|
||||
width: 100%;
|
||||
height: 145px;
|
||||
}
|
||||
}
|
||||
}
|
||||
166
src/page/index/components/DetailedPayment/DetailedPayment.vue
Normal file
166
src/page/index/components/DetailedPayment/DetailedPayment.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<script setup lang="ts">
|
||||
import SmallTitle from '../smallTitle/smallTitle.vue'
|
||||
import './DetailedPayment.less'
|
||||
import { onMounted, onBeforeUnmount } from 'vue';
|
||||
import * as echarts from 'echarts/core';
|
||||
import { RadarChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import moment from 'moment';
|
||||
import { handleGetBusinessTradeRevenue, handleGetProjectYearlyArrearageList, handleGetSPBayonetList } from '../../service';
|
||||
|
||||
// 注册组件
|
||||
echarts.use([
|
||||
RadarChart,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
CanvasRenderer
|
||||
]);
|
||||
|
||||
let myChart: echarts.ECharts;
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
const res: any = await handleGetSectionFlowCount()
|
||||
|
||||
const chartDom = document.getElementById('DetailedPayment');
|
||||
if (!chartDom) return;
|
||||
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
// tooltip: { // 新增 tooltip 配置
|
||||
// trigger: 'item',
|
||||
// formatter: function (params: any) {
|
||||
// return `
|
||||
// <div style="font-weight:bold">${params.name}</div>
|
||||
// `;
|
||||
// }
|
||||
// },
|
||||
radar: {
|
||||
indicator: res.category,
|
||||
shape: 'circle',
|
||||
splitNumber: 5,
|
||||
radius: '60%', // 调整雷达图大小，留出空间给文字
|
||||
center: ['50%', '60%'], // 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: [
|
||||
{
|
||||
type: 'radar',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
opacity: 0.5
|
||||
},
|
||||
data: res.seriesData,
|
||||
symbol: 'none',
|
||||
itemStyle: {
|
||||
color: '#0289ED'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
// 拿到业态偏好数据
|
||||
const handleGetSectionFlowCount = async () => {
|
||||
|
||||
const req: any = {
|
||||
|
||||
}
|
||||
const data = await handleGetProjectYearlyArrearageList(req)
|
||||
console.log('datadatadatadatadatadata', data);
|
||||
|
||||
let category: any = []
|
||||
let seriesData: any = []
|
||||
let realData: any = []
|
||||
|
||||
let list: any = data.ProjectCompleteDetailList
|
||||
|
||||
let max: number = 0
|
||||
|
||||
if (list && list.length > 0) {
|
||||
list.forEach((item: any) => {
|
||||
let prent: number = Number(((item.Account_Amount > 0 ? item.Payment_Amount / item.Account_Amount : 0) * 100).toFixed(2))
|
||||
if (prent > max) {
|
||||
max = prent
|
||||
}
|
||||
category.push({ name: item.Account_Name, max: max })
|
||||
seriesData.push(prent)
|
||||
// realData.push(item.data)
|
||||
})
|
||||
}
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
seriesData: seriesData,// y轴的数据
|
||||
realData: realData// 真实数据
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<div class="DetailedPaymentBox">
|
||||
<SmallTitle :title="`年详细款项完成进度`"></SmallTitle>
|
||||
|
||||
<div class="DetailedPaymentCharts">
|
||||
<!-- <div class="DetailedPaymentUnit">万元</div> -->
|
||||
<div class="DetailedPaymentChartsContent">
|
||||
<div class="DetailedPayment" id="DetailedPayment"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,10 +1,11 @@
|
||||
.FestivalRevenueBox {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
// height: 250px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 11px 0;
|
||||
// padding: 35px 20px 40px; // 老的
|
||||
padding: 20px 10px 30px;
|
||||
background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
// padding: 20px 10px 30px;
|
||||
// background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
// backdrop-filter: blur(10px);
|
||||
/* 高斯模糊效果 */
|
||||
// -webkit-backdrop-filter: blur(10px);
|
||||
@ -12,6 +13,6 @@
|
||||
|
||||
.FestivalRevenue {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 190px;
|
||||
}
|
||||
}
|
||||
@ -10,7 +10,7 @@ import {
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import { onBeforeUnmount, onMounted, watch } from 'vue';
|
||||
import { handleGetHolidayAnalysis } from '../../service';
|
||||
import { handleGetHolidayAnalysis, handleGetHolidayDailyAnalysis } from '../../service';
|
||||
import moment from 'moment';
|
||||
|
||||
// 注册组件
|
||||
@ -70,8 +70,7 @@ const handleGoMounted = async () => {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '营收',
|
||||
|
||||
name: '万元',
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
@ -81,7 +80,7 @@ const handleGoMounted = async () => {
|
||||
left: '10', // 增加左侧空间
|
||||
right: '10', // 增加右侧空间
|
||||
bottom: '10',
|
||||
top: '10',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
@ -119,8 +118,8 @@ const handleGoMounted = async () => {
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
console.log('djidasjd', params);
|
||||
let str1: string = `${params[0].seriesName}(${res.category[params[0].dataIndex]})：${params[0].value}万元`
|
||||
let str2: string = `${params[1].seriesName}(${res.category[params[0].dataIndex]})：${params[1].value}万元`
|
||||
let str1: string = `${params[0].seriesName}(${res.currentDateList[params[0].dataIndex]})：${res.currentYearReal[params[0].dataIndex].toLocaleString()}元`
|
||||
let str2: string = `${params[1].seriesName}(${res.lastYearDateList[params[0].dataIndex]})：${res.lastYearReal[params[1].dataIndex].toLocaleString()}元`
|
||||
|
||||
return `<div>
|
||||
<div>${str1}</div>
|
||||
@ -139,11 +138,16 @@ const handleGoMounted = async () => {
|
||||
// 拿到数据
|
||||
const handleGetData = async () => {
|
||||
|
||||
let category: any = ["4.29", "4.30", "5.01", "5.2", "5.3", "5.4"]
|
||||
let currentYear: any = [50, 40, 36, 85, 46, 77]
|
||||
let lastYear: any = [33, 23, 56, 12, 45, 44]
|
||||
// let currentYear: any = []
|
||||
// let lastYear: any = []
|
||||
let category: any = []
|
||||
// "4.29", "4.30", "5.01", "5.2", "5.3", "5.4"
|
||||
// let currentYear: any = [50, 40, 36, 85, 46, 77]
|
||||
// let lastYear: any = [33, 23, 56, 12, 45, 44]
|
||||
let currentYear: any = []
|
||||
let currentYearReal: any = []
|
||||
let currentDateList: any = []
|
||||
let lastYear: any = []
|
||||
let lastYearReal: any = []
|
||||
let lastYearDateList: any = []
|
||||
|
||||
const req: any = {
|
||||
// pushProvinceCode: 530000,
|
||||
@ -154,17 +158,30 @@ const handleGetData = async () => {
|
||||
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
|
||||
ServerpartId: props.currentService?.SERVERPART_ID || "",
|
||||
}
|
||||
const data = await handleGetHolidayAnalysis(req)
|
||||
const data = await handleGetHolidayDailyAnalysis(req)
|
||||
console.log('dsijdasijdaiosd', data)
|
||||
if (data.curYearSelfRevenue) {
|
||||
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
if (item.name !== '累计') {
|
||||
category.push(`第${item.name}天`)
|
||||
currentYear.push(Number(item.value) / 10000)
|
||||
currentYearReal.push(Number(item.value))
|
||||
lastYear.push(Number(item.data) / 10000)
|
||||
lastYearReal.push(Number(item.data))
|
||||
currentDateList.push(item.date.split(',')[0])
|
||||
lastYearDateList.push(item.date.split(',')[1])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
currentYear: currentYear,// y轴的数据
|
||||
lastYear: lastYear
|
||||
lastYear: lastYear,
|
||||
currentYearReal: currentYearReal,
|
||||
lastYearReal: lastYearReal,
|
||||
currentDateList: currentDateList,
|
||||
lastYearDateList: lastYearDateList,
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
.GenderCustomerGroupBox {
|
||||
width: 25%;
|
||||
width: calc((100% - 28px) / 3);
|
||||
display: inline-block;
|
||||
height: 210px;
|
||||
|
||||
.GenderCustomerGroupCharts {
|
||||
width: 100%;
|
||||
height: 182px;
|
||||
background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
// background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
background-image: url('../../../../assets/image/smallModalBg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 64px 18px;
|
||||
|
||||
@ -47,6 +50,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.legendIcon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
.HotProductListCharts {
|
||||
width: 100%;
|
||||
height: 366px;
|
||||
height: 196px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 10px 0;
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
.MultiIndustryIncomeBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 3px 0 0 10px;
|
||||
|
||||
.MultiIndustryIncomeCharts {
|
||||
width: 100%;
|
||||
@ -17,7 +19,7 @@
|
||||
|
||||
.MultiIndustryIncome {
|
||||
width: 100%;
|
||||
height: 194px;
|
||||
height: 134px;
|
||||
}
|
||||
|
||||
.YOYBox,
|
||||
|
||||
@ -48,13 +48,14 @@ const handleGoMounted = async () => {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: "万元",
|
||||
splitLine: { show: false } // 隐藏刻度线
|
||||
},
|
||||
grid: {
|
||||
left: '0', // 左侧间距
|
||||
right: '0', // 右侧间距
|
||||
bottom: '0', // 底部间距
|
||||
top: '10', // 顶部间距
|
||||
top: '30', // 顶部间距
|
||||
containLabel: true // 确保坐标轴标签在grid内
|
||||
},
|
||||
series: [
|
||||
@ -63,23 +64,17 @@ const handleGoMounted = async () => {
|
||||
realData: res.realData,
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
showBackground: true,
|
||||
barWidth: '6',
|
||||
backgroundStyle: {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
color: 'rgba(23, 42, 70, 1)'
|
||||
// color: 'rgba(23, 42, 70, 1)'
|
||||
color: 'rgba(0, 148, 255, 0.1)'
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
// 动态返回渐变颜色
|
||||
color: function (params: any) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0, 0, 0, 1,
|
||||
[
|
||||
{ offset: 0, color: '#018FFF' }, // 渐变起始色
|
||||
{ offset: 1, color: '#00F4FF' } // 渐变结束色
|
||||
]
|
||||
);
|
||||
}
|
||||
color: '#69BCFF'
|
||||
}
|
||||
}
|
||||
],
|
||||
@ -144,7 +139,7 @@ const handleGetSectionFlowCount = async () => {
|
||||
if (list && list.length > 0) {
|
||||
list.forEach((item: any) => {
|
||||
category.push(item.name)
|
||||
seriesData.push(Number(item.value))
|
||||
seriesData.push(Number(item.value) / 10000)
|
||||
realData.push(item.data)
|
||||
})
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
.PassengerFlowChanges {
|
||||
width: 100%;
|
||||
height: 134px;
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import SmallTitle from '../smallTitle/smallTitle.vue'
|
||||
import './PassengerFlowChanges.less'
|
||||
import { onMounted, onBeforeUnmount, watch } from 'vue';
|
||||
import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
|
||||
import * as echarts from 'echarts/core';
|
||||
import { LineChart } from 'echarts/charts';
|
||||
import {
|
||||
@ -25,6 +25,8 @@ echarts.use([
|
||||
]);
|
||||
|
||||
let myChart: echarts.ECharts;
|
||||
// 当前查询的时间
|
||||
let searchTime = ref<string>()
|
||||
|
||||
onMounted(async () => {
|
||||
await handleGoMounted()
|
||||
@ -57,7 +59,7 @@ const handleGoMounted = async () => {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
boundaryGap: true,
|
||||
// boundaryGap: true,
|
||||
axisLabel: {
|
||||
interval: 3,
|
||||
showMinLabel: true,
|
||||
@ -68,39 +70,39 @@ const handleGoMounted = async () => {
|
||||
{
|
||||
type: 'value',
|
||||
name: '车流量',
|
||||
nameTextStyle: {
|
||||
color: '#00FFFF' // Y轴名称颜色
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#00FFFF'
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#00FFFF',
|
||||
formatter: '{value}' // 添加单位
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
padding: [0, 0, 0, 30] // 调整单位位置
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '客单量',
|
||||
nameTextStyle: {
|
||||
color: '#FFA500' // Y轴名称颜色
|
||||
},
|
||||
splitLine: { show: false },
|
||||
position: 'right',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#FFA500'
|
||||
color: '#FFFFFF'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#FFA500',
|
||||
formatter: '{value}' // 添加单位
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
padding: [0, 0, 0, 30] // 调整单位位置
|
||||
},
|
||||
offset: 0 // 确保Y轴紧贴图表
|
||||
}
|
||||
],
|
||||
@ -108,7 +110,7 @@ const handleGoMounted = async () => {
|
||||
left: '10', // 增加左侧空间
|
||||
right: '10', // 增加右侧空间
|
||||
bottom: '10',
|
||||
top: '10',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
@ -120,7 +122,7 @@ const handleGoMounted = async () => {
|
||||
symbolSize: 6
|
||||
})),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#00FFFF'
|
||||
@ -138,7 +140,7 @@ const handleGoMounted = async () => {
|
||||
symbolSize: 6
|
||||
})),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#FFA500' // 改为橙色
|
||||
@ -182,8 +184,11 @@ const handleGetData = async () => {
|
||||
TimeSpan: 1
|
||||
}
|
||||
|
||||
searchTime.value = moment(req.Statistics_Date).format('MM')
|
||||
|
||||
const data = await handleGetTransactionConvert(req)
|
||||
|
||||
console.log('fhdusyfusahfjsdh', data);
|
||||
|
||||
// 客单数据
|
||||
let customerOrder = data.TransactionList
|
||||
@ -222,6 +227,10 @@ const handleGetData = async () => {
|
||||
customerOrderRealList: customerOrderRealList
|
||||
// realData: realData// 真实数据
|
||||
}
|
||||
|
||||
console.log('fjioadhgasdhnfjks', res);
|
||||
|
||||
|
||||
return res
|
||||
|
||||
|
||||
@ -262,13 +271,14 @@ onBeforeUnmount(() => {
|
||||
|
||||
<template>
|
||||
<div class="PassengerFlowChangesBox">
|
||||
<SmallTitle :title="'客流变化'"></SmallTitle>
|
||||
<SmallTitle :title="`客流变化${searchTime ? `(${searchTime}月)` : ''}`"></SmallTitle>
|
||||
|
||||
<div class="PassengerFlowChangesCharts">
|
||||
<div class="PassengerFlowChangesUnit" style="display: flex;align-items: center;justify-content: space-between;">
|
||||
<span>单</span>
|
||||
<div class="PassengerFlowChangesCharts" style="margin-top:15px">
|
||||
<!-- <div class="PassengerFlowChangesUnit"
|
||||
style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
|
||||
<span>辆</span>
|
||||
</div>
|
||||
<span>单</span>
|
||||
</div> -->
|
||||
<div class="PassengerFlowChanges" id="PassengerFlowChanges"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30px;
|
||||
padding: 0 0 0 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -109,7 +109,7 @@
|
||||
}
|
||||
|
||||
.progressPieRight {
|
||||
flex: 1;
|
||||
width: calc(100% - 172px);
|
||||
|
||||
.progressPieItem {
|
||||
width: 100%;
|
||||
@ -135,6 +135,7 @@
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,17 @@
|
||||
.PreferenceTypeBox {
|
||||
width: 25%;
|
||||
// width: 50%;
|
||||
width: calc((100% - 28px) / 3 * 2);
|
||||
display: inline-block;
|
||||
height: 210px;
|
||||
|
||||
|
||||
.PreferenceTypeCharts {
|
||||
width: 100%;
|
||||
height: 182px;
|
||||
background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
// background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
background-image: url('../../../../assets/image/smallModalBg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 11px 20px 16px;
|
||||
|
||||
|
||||
@ -49,7 +49,8 @@ onMounted(async () => {
|
||||
indicator: res.category,
|
||||
shape: 'circle',
|
||||
splitNumber: 5,
|
||||
radius: '70%', // 调整雷达图大小，留出空间给文字
|
||||
radius: '60%', // 调整雷达图大小，留出空间给文字
|
||||
center: ['50%', '60%'], // 2. 确保居中
|
||||
axisName: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
padding: 10
|
||||
|
||||
@ -1,15 +1,61 @@
|
||||
.RegionalRevenueBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 3px 0 0 10px;
|
||||
|
||||
|
||||
.RegionalRevenueSelect {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.RegionalRevenueItem {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
padding: 2px 5px 4px 6px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.RegionalRevenueItemLeft {
|
||||
border-radius: 4px 0px 0px 4px;
|
||||
}
|
||||
|
||||
.RegionalRevenueItemRight {
|
||||
border-radius: 0px 4px 4px 0px;
|
||||
}
|
||||
|
||||
.selectRegionalRevenueItem {
|
||||
border-color: #2366D8;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #2366D8;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
padding: 2px 5px 4px 6px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.RegionalRevenueCharts {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 30px;
|
||||
// padding: 30px;
|
||||
padding: 25px 26px 20px 31px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.RegionalRevenueChartsContent {
|
||||
width: 100%;
|
||||
height: 132px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -19,7 +65,8 @@
|
||||
}
|
||||
|
||||
.RegionalRevenueDataBoxList {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
width: calc(100% - 162px);
|
||||
margin-left: 30px;
|
||||
|
||||
.RegionalRevenueDataBox {
|
||||
|
||||
@ -31,6 +31,10 @@ let allServiceId: string = '1143,1144,1186,1188,1189,1190,1191,1192,1193,979,999
|
||||
|
||||
// 图例数据
|
||||
let lengedList = ref<any>([])
|
||||
// 选择的是日 还是 月 1 为 日 2为月
|
||||
let selectDataType = ref<number>(1)
|
||||
// 是否显示图表
|
||||
let showCharts = ref<boolean>(true)
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
@ -102,12 +106,14 @@ const handleGoMounted = async () => {
|
||||
// 拿到数据
|
||||
const handleGetData = async () => {
|
||||
const req: any = {
|
||||
DataType: 1,
|
||||
DataType: selectDataType.value,
|
||||
ServerpartIds: props.currentService?.SERVERPART_ID || allServiceId,
|
||||
DataSourceType: 1,
|
||||
}
|
||||
const data = await handleGetRevenueReport(req)
|
||||
|
||||
showCharts.value = true
|
||||
|
||||
let category: string[] = []
|
||||
let seriesData: number[] = []
|
||||
let realData: number[] = []
|
||||
@ -141,6 +147,13 @@ const handleGetData = async () => {
|
||||
return res
|
||||
}
|
||||
|
||||
// 改变类型
|
||||
const handleChangeDataType = async (value: number) => {
|
||||
showCharts.value = false
|
||||
selectDataType.value = value
|
||||
await handleGoMounted()
|
||||
}
|
||||
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
@ -158,25 +171,38 @@ onBeforeUnmount(() => {
|
||||
|
||||
<template>
|
||||
<div class="RegionalRevenueBox">
|
||||
<SmallTitle :title="'区域营收占比'"></SmallTitle>
|
||||
<SmallTitle :title="'区域营收占比'">
|
||||
<template #extra>
|
||||
<div class="RegionalRevenueSelect">
|
||||
<div :class="selectDataType === 1 ? 'RegionalRevenueItem RegionalRevenueItemLeft selectRegionalRevenueItem' : 'RegionalRevenueItem RegionalRevenueItemLeft'"
|
||||
@click="handleChangeDataType(1)">
|
||||
日</div>
|
||||
<div :class="selectDataType === 2 ? 'RegionalRevenueItem RegionalRevenueItemRight selectRegionalRevenueItem' : 'RegionalRevenueItem RegionalRevenueItemRight'"
|
||||
@click="handleChangeDataType(2)">
|
||||
月</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</SmallTitle>
|
||||
|
||||
<div class="RegionalRevenueCharts">
|
||||
<!-- <div class="RegionalRevenueUnit">万元</div> -->
|
||||
<div class="RegionalRevenueChartsContent">
|
||||
<div class="RegionalRevenue" id="RegionalRevenue"></div>
|
||||
<div class="RegionalRevenue" id="RegionalRevenue" v-if="showCharts"></div>
|
||||
|
||||
|
||||
<div class="RegionalRevenueDataBoxList" v-if="lengedList && lengedList.length > 0">
|
||||
<div class="RegionalRevenueDataBox" v-for="(item, index) in lengedList" :key="index">
|
||||
<div class="RegionalRevenueDataLeftBox">
|
||||
<div class="RegionalRevenueItem">
|
||||
<div class="RegionalRevenueItemLeged" :style="{ background: colorList[index] }"></div>
|
||||
<div class="RegionalRevenueItemLabel">{{ item.name }}</div>
|
||||
<div class="RegionalRevenueItemValue">{{ item.value }}</div>
|
||||
<div class="RegionalRevenueItemUnit">元</div>
|
||||
<template v-if="showCharts">
|
||||
<div class="RegionalRevenueDataBoxList" v-if="lengedList && lengedList.length > 0">
|
||||
<div class="RegionalRevenueDataBox" v-for="(item, index) in lengedList" :key="index">
|
||||
<div class="RegionalRevenueDataLeftBox">
|
||||
<div class="RegionalRevenueItem">
|
||||
<div class="RegionalRevenueItemLeged" :style="{ background: colorList[index] }">
|
||||
</div>
|
||||
<div class="RegionalRevenueItemLabel">{{ item.name }}</div>
|
||||
<div class="RegionalRevenueItemValue">{{ item.value }}</div>
|
||||
<div class="RegionalRevenueItemUnit">元</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="RegionalRevenueDataRightBox">
|
||||
<!-- <div class="RegionalRevenueDataRightBox">
|
||||
<div class="RegionalRevenueDataYOY">
|
||||
<div class="RegionalRevenueYOYTitle">环比</div>
|
||||
<div class="RegionalRevenueYOYValue">
|
||||
@ -185,8 +211,10 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
<div class="RegionalRevenueDataQOQ"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
175
src/page/index/components/SignedClients/SignedClients.less
Normal file
175
src/page/index/components/SignedClients/SignedClients.less
Normal file
@ -0,0 +1,175 @@
|
||||
.SignedClientsBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 15px;
|
||||
background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
border-bottom: 1px solid rgba(0, 148, 255, 0.50);
|
||||
|
||||
.SignedClientsBigItem {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
|
||||
.SignedClientsBigLeft {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin-right: 10px;
|
||||
|
||||
.SignedClientsBigLeftImg {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.SignedClientsBigRight {
|
||||
width: calc(100% - 56px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.SignedClientsBigRightLeft {
|
||||
.SignedClientsBigRightLabel {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.SignedClientsBigRightText {
|
||||
.SignedClientsBigRightSmallLabel {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #7E858A;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.SignedClientsBigRightValue {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #00F6FF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.SignedClientsBigRightRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.SignedClientsBigRightRightValue {
|
||||
font-family: Impact, Impact;
|
||||
font-weight: 400;
|
||||
font-size: 25px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.SignedClientsBigRightRightUnit {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #828689;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.SignedClientsSmallItem {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 5px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
|
||||
.SignedClientsSmallLeft {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
margin-right: 17px;
|
||||
}
|
||||
|
||||
.SignedClientsSmallRight {
|
||||
width: calc(100% - 50px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.SignedClientsSmallRightLeft {
|
||||
.SignedClientsSmallRightLeftTop {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.SignedClientsSmallRightLeftBottom {
|
||||
.SignedClientsSmallRightLeftBottomNormalText {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #7B858D;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.SignedClientsSmallRightLeftBottomValue {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #7B858D;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.SignedClientsSmallRightRight {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.SignedClientsSmallRightRightValue {
|
||||
font-family: Impact, Impact;
|
||||
font-weight: 400;
|
||||
font-size: 25px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2px;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.SignedClientsSmallRightRightUnit {
|
||||
font-family: Inter, Inter;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #7B858D;
|
||||
text-align: right;
|
||||
font-style: normal;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
225
src/page/index/components/SignedClients/SignedClients.vue
Normal file
225
src/page/index/components/SignedClients/SignedClients.vue
Normal file
@ -0,0 +1,225 @@
|
||||
<script setup lang="ts">
|
||||
import './SignedClients.less'
|
||||
import SignedClientsIcon from '../../../../assets/image/SignedClientsIcon.png'
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import { handleGetProjectSummaryInfo } from '../../service';
|
||||
|
||||
import * as echarts from 'echarts/core';
|
||||
import { PieChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
|
||||
|
||||
// 注册组件
|
||||
echarts.use([
|
||||
PieChart,
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
CanvasRenderer
|
||||
]);
|
||||
|
||||
let myChart: echarts.ECharts;
|
||||
let myChart2: echarts.ECharts;
|
||||
|
||||
// 当前的数据
|
||||
let realDataObj = ref<any>()
|
||||
// 合作分成
|
||||
let shareRevenue = ref<any>()
|
||||
// 固定租金
|
||||
let FixedRent = ref<any>()
|
||||
|
||||
onMounted(async () => {
|
||||
await handleGetData()
|
||||
})
|
||||
|
||||
// 拿到数据
|
||||
const handleGetData = async () => {
|
||||
const req: any = {
|
||||
ProvinceCode: '340000'
|
||||
}
|
||||
const data = await handleGetProjectSummaryInfo(req)
|
||||
|
||||
|
||||
console.log('handleGetDatahandleGetDatahandleGetDatahandleGetData', data);
|
||||
realDataObj.value = data
|
||||
|
||||
shareRevenue.value = data.BusinessTypeSummaryList[0]
|
||||
FixedRent.value = data.BusinessTypeSummaryList[1]
|
||||
|
||||
|
||||
|
||||
const chartDom = document.getElementById('SignedClients1');
|
||||
if (!chartDom) return;
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
|
||||
const chartDom2 = document.getElementById('SignedClients2');
|
||||
if (!chartDom) return;
|
||||
myChart2 = echarts.init(chartDom2);
|
||||
|
||||
|
||||
const option1 = {
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['80%', '100%'],
|
||||
center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
// 自定义颜色逻辑
|
||||
return params.dataIndex === 0 ? '#FF9500' : '#634B24';
|
||||
}
|
||||
},
|
||||
data: [((shareRevenue?.value.ArrearageMerchant_Count / realDataObj?.value.Contract_SignCount) * 100), 100 - ((shareRevenue?.value.ArrearageMerchant_Count / realDataObj?.value.Contract_SignCount) * 100)]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const option2 = {
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['80%', '100%'],
|
||||
center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
emphasis: false,
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
color: function (params: any) {
|
||||
// 自定义颜色逻辑
|
||||
return params.dataIndex === 0 ? '#FF9500' : '#634B24';
|
||||
}
|
||||
},
|
||||
data: [((FixedRent?.value.ArrearageMerchant_Count / realDataObj?.value.Contract_SignCount) * 100), 100 - ((FixedRent?.value.ArrearageMerchant_Count / realDataObj?.value.Contract_SignCount) * 100)]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
myChart.setOption(option1);
|
||||
myChart.resize();
|
||||
|
||||
myChart2.setOption(option2);
|
||||
myChart2.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
|
||||
}
|
||||
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
myChart2?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
myChart2?.dispose();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="SignedClientsBox">
|
||||
<div class="SignedClientsBigItem">
|
||||
<div class="SignedClientsBigLeft">
|
||||
<img :src="SignedClientsIcon" class="SignedClientsBigLeftImg" />
|
||||
</div>
|
||||
|
||||
<div class="SignedClientsBigRight">
|
||||
<div class="SignedClientsBigRightLeft">
|
||||
<div class="SignedClientsBigRightLabel">签约客户</div>
|
||||
<div class="SignedClientsBigRightText">
|
||||
<span class="SignedClientsBigRightSmallLabel">欠款商户</span>
|
||||
<span class="SignedClientsBigRightValue" style="color: #FF9500;">{{
|
||||
realDataObj?.ArrearageMerchant_Count || ''
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="SignedClientsBigRightRight">
|
||||
<div class="SignedClientsBigRightRightValue">{{ realDataObj?.ArrearageMerchant_Count || '' }}
|
||||
</div>
|
||||
<div class="SignedClientsBigRightRightUnit">个</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="SignedClientsSmallItem">
|
||||
<div class="SignedClientsSmallLeft" id="SignedClients1"></div>
|
||||
<div class="SignedClientsSmallRight">
|
||||
<div class="SignedClientsSmallRightLeft">
|
||||
<div class="SignedClientsSmallRightLeftTop">合作分成</div>
|
||||
<div class="SignedClientsSmallRightLeftBottom">
|
||||
<span class="SignedClientsSmallRightLeftBottomNormalText">欠款商户</span>
|
||||
<span class="SignedClientsSmallRightLeftBottomValue">{{
|
||||
shareRevenue?.ArrearageMerchant_Count
|
||||
|| "" }}</span>
|
||||
<span class="SignedClientsSmallRightLeftBottomNormalText" style="margin-left: 10px;">欠款占比</span>
|
||||
<span class="SignedClientsSmallRightLeftBottomValue">
|
||||
{{ realDataObj?.ArrearageMerchant_Count ? ((shareRevenue?.ArrearageMerchant_Count /
|
||||
realDataObj?.ArrearageMerchant_Count) * 100).toFixed(2) + '%' : '-' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="SignedClientsSmallRightRight">
|
||||
<div class="SignedClientsSmallRightRightValue">{{ shareRevenue?.ArrearageMerchant_Count || '' }}
|
||||
</div>
|
||||
<div class="SignedClientsSmallRightRightUnit">个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="SignedClientsSmallItem" style="border-bottom: none;padding-bottom: 0;">
|
||||
<div class="SignedClientsSmallLeft" id="SignedClients2"></div>
|
||||
<div class="SignedClientsSmallRight">
|
||||
<div class="SignedClientsSmallRightLeft">
|
||||
<div class="SignedClientsSmallRightLeftTop">固定租金</div>
|
||||
<div class="SignedClientsSmallRightLeftBottom">
|
||||
<span class="SignedClientsSmallRightLeftBottomNormalText">欠款商户</span>
|
||||
<span class="SignedClientsSmallRightLeftBottomValue">{{ FixedRent?.ArrearageMerchant_Count
|
||||
|| "" }}</span>
|
||||
<span class="SignedClientsSmallRightLeftBottomNormalText" style="margin-left: 10px;">欠款占比</span>
|
||||
<span class="SignedClientsSmallRightLeftBottomValue">
|
||||
{{ realDataObj?.ArrearageMerchant_Count ? ((FixedRent?.ArrearageMerchant_Count /
|
||||
realDataObj?.ArrearageMerchant_Count) * 100).toFixed(2) + '%' : '-' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="SignedClientsSmallRightRight">
|
||||
<div class="SignedClientsSmallRightRightValue">{{ FixedRent?.ArrearageMerchant_Count || '' }}
|
||||
</div>
|
||||
<div class="SignedClientsSmallRightRightUnit">个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,7 +1,7 @@
|
||||
.TodayTrendBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 20px 0;
|
||||
// padding: 20px 20px 0;
|
||||
|
||||
.TodayTrendUnit {
|
||||
width: 100%;
|
||||
@ -21,6 +21,7 @@
|
||||
|
||||
.TodayTrendContent {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
|
||||
.TodayTrend {
|
||||
width: 100%;
|
||||
|
||||
@ -45,161 +45,162 @@ let myChart: echarts.ECharts;
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
handleGetOnlineData()
|
||||
// handleGetOnlineData()
|
||||
|
||||
// const res: any = await handleGetData()
|
||||
const res: any = await handleGetData()
|
||||
|
||||
// const chartDom = document.getElementById('TodayTrend');
|
||||
// if (!chartDom) return;
|
||||
const chartDom = document.getElementById('TodayTrend');
|
||||
if (!chartDom) return;
|
||||
|
||||
// myChart = echarts.init(chartDom);
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
// const option = {
|
||||
// xAxis: {
|
||||
// type: 'category',
|
||||
// data: res.category,
|
||||
// // boundaryGap: true,
|
||||
// axisLabel: {
|
||||
// interval: 3,
|
||||
// showMinLabel: true,
|
||||
// showMaxLabel: true
|
||||
// }
|
||||
// },
|
||||
// yAxis: [
|
||||
// {
|
||||
// type: 'value',
|
||||
// name: '营收',
|
||||
// nameTextStyle: {
|
||||
// color: '#00FFFF'
|
||||
// },
|
||||
// splitLine: { show: false },
|
||||
// axisLine: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// color: '#00FFFF'
|
||||
// }
|
||||
// },
|
||||
// axisLabel: {
|
||||
// color: '#00FFFF',
|
||||
// formatter: '{value}'
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// type: 'value',
|
||||
// name: '客单',
|
||||
// nameTextStyle: {
|
||||
// color: '#FFA500'
|
||||
// },
|
||||
// splitLine: { show: false },
|
||||
// position: 'right',
|
||||
// axisLine: {
|
||||
// show: true,
|
||||
// lineStyle: {
|
||||
// color: '#FFA500'
|
||||
// }
|
||||
// },
|
||||
// axisLabel: {
|
||||
// color: '#FFA500',
|
||||
// formatter: '{value}'
|
||||
// },
|
||||
// offset: 0
|
||||
// }
|
||||
// ],
|
||||
// grid: {
|
||||
// left: '10',
|
||||
// right: '10',
|
||||
// bottom: '10',
|
||||
// top: '10',
|
||||
// containLabel: true
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: '营收',
|
||||
// data: res.seriesData.map((value: any, index: any) => ({
|
||||
// value: value,
|
||||
// symbol: index % 3 === 0 ? 'circle' : 'none',
|
||||
// symbolSize: 6
|
||||
// })),
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// lineStyle: {
|
||||
// width: 2,
|
||||
// color: '#00FFFF'
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: '#00FFFF'
|
||||
// },
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: 'rgba(0, 255, 255, 0.3)'
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: 'rgba(0, 255, 255, 0.1)'
|
||||
// }
|
||||
// ])
|
||||
// },
|
||||
// yAxisIndex: 0
|
||||
// },
|
||||
// {
|
||||
// name: '客单',
|
||||
// data: res.seriesDataSecond.map((value: any, index: any) => ({
|
||||
// value: value,
|
||||
// symbol: index % 3 === 0 ? 'circle' : 'none',
|
||||
// symbolSize: 6
|
||||
// })),
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// lineStyle: {
|
||||
// width: 2,
|
||||
// color: '#FFA500'
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: '#FFA500'
|
||||
// },
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: 'rgba(255, 165, 0, 0.3)'
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: 'rgba(255, 165, 0, 0.1)'
|
||||
// }
|
||||
// ])
|
||||
// },
|
||||
// yAxisIndex: 1
|
||||
// }
|
||||
// ],
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'line',
|
||||
// snap: true, // 关键点：启用吸附
|
||||
// lineStyle: {
|
||||
// color: '#FFF', // 可选：调整竖线颜色
|
||||
// width: 1
|
||||
// }
|
||||
// },
|
||||
// formatter: function (params: any) {
|
||||
// let tip = `<div style="font-weight:bold">${params[0].name}</div>`;
|
||||
// params.forEach((param: any) => {
|
||||
// const unit = param.seriesName === '营收' ? '元' : '单';
|
||||
// let value = param.seriesName === '营收' ? res.seriesData[param.dataIndex] : res.seriesDataSecond[param.dataIndex]
|
||||
// tip += `<div>${param.seriesName}: ${value ? value.toLocaleString() : ''}${unit}</div>`;
|
||||
// });
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
// boundaryGap: true,
|
||||
axisLabel: {
|
||||
interval: 3,
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true // 保证刻度线与标签对齐
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '营收',
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '客单',
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: { show: false },
|
||||
position: 'right',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
offset: 0
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
left: '10',
|
||||
right: '10',
|
||||
bottom: '10',
|
||||
top: '10',
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '营收',
|
||||
data: res.seriesData.map((value: any, index: any) => ({
|
||||
value: value,
|
||||
symbol: index % 3 === 0 ? 'circle' : 'none',
|
||||
symbolSize: 6
|
||||
})),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#00FFFF'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#00FFFF'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 255, 255, 0.3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 255, 255, 0.1)'
|
||||
}
|
||||
])
|
||||
},
|
||||
yAxisIndex: 0
|
||||
},
|
||||
{
|
||||
name: '客单',
|
||||
data: res.seriesDataSecond.map((value: any, index: any) => ({
|
||||
value: value,
|
||||
symbol: index % 3 === 0 ? 'circle' : 'none',
|
||||
symbolSize: 6
|
||||
})),
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#FFA500'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FFA500'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 165, 0, 0.3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 165, 0, 0.1)'
|
||||
}
|
||||
])
|
||||
},
|
||||
yAxisIndex: 1
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
snap: true, // 关键点：启用吸附
|
||||
lineStyle: {
|
||||
color: '#FFF', // 可选：调整竖线颜色
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
let tip = `<div style="font-weight:bold">${params[0].name}</div>`;
|
||||
params.forEach((param: any) => {
|
||||
const unit = param.seriesName === '营收' ? '元' : '单';
|
||||
let value = param.seriesName === '营收' ? res.seriesData[param.dataIndex] : res.seriesDataSecond[param.dataIndex]
|
||||
tip += `<div>${param.seriesName}: ${value ? value.toLocaleString() : ''}${unit}</div>`;
|
||||
});
|
||||
|
||||
// return tip
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
return tip
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// myChart.setOption(option);
|
||||
// myChart.resize();
|
||||
// window.addEventListener('resize', resizeChart);
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
})
|
||||
|
||||
// 修改选择的季月年
|
||||
@ -276,31 +277,31 @@ const handleGetOnlineData = async () => {
|
||||
onlineCashRegisterValue.value = handleGetFiveNumber(res.MACHINECOUNT)
|
||||
}
|
||||
|
||||
// const resizeChart = () => {
|
||||
// myChart?.resize();
|
||||
// };
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
// onBeforeUnmount(() => {
|
||||
// window.removeEventListener('resize', resizeChart);
|
||||
// myChart?.dispose();
|
||||
// });
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="TodayTrendBox">
|
||||
<!-- <SmallTitle :title="'今日走势图'"></SmallTitle> -->
|
||||
<SmallTitle :title="'今日走势图'" style="margin-top: 13px;"></SmallTitle>
|
||||
|
||||
<!-- <div class="TodayTrendUnit">
|
||||
<span>元</span>
|
||||
<span>单</span>
|
||||
</div> -->
|
||||
<!-- <div class="TodayTrendContent">
|
||||
<div class="TodayTrendContent">
|
||||
<div class="TodayTrend" id="TodayTrend"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="onlineServiceBox">
|
||||
<!-- <div class="onlineServiceBox">
|
||||
<div class="onlineServiceItem">
|
||||
<div class="onlineServiceItemLeft">
|
||||
<img class="onlineServiceItemImg" :src="onlineService" />
|
||||
@ -334,8 +335,6 @@ const handleGetOnlineData = async () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
.TotalAccountsReceivable {
|
||||
width: 100%;
|
||||
height: 243px;
|
||||
height: 162px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -45,6 +45,13 @@ onMounted(async () => {
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '0', // 增加左侧空间
|
||||
right: '0', // 增加右侧空间
|
||||
bottom: '0',
|
||||
top: '30',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: { show: true, readOnly: false },
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
.TradingAlertBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
margin-top: 20px;
|
||||
// padding: 0 20px;
|
||||
// margin-top: 20px;
|
||||
|
||||
|
||||
.TradingAlertListBox {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
margin-top: 8px;
|
||||
height: 120px;
|
||||
margin-top: 12px;
|
||||
|
||||
.TradingAlertItem {
|
||||
width: 100%;
|
||||
|
||||
@ -30,7 +30,7 @@ const handleGetData = async () => {
|
||||
|
||||
|
||||
if (data && data.length > 0) {
|
||||
let list = data.slice(0, 10)
|
||||
let list = data.slice(0, 5)
|
||||
|
||||
TradingAlertList.length = 0;
|
||||
list && list.forEach((item: any) => TradingAlertList.push(item));
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
|
||||
.TrendOfTrafficFlow {
|
||||
width: 100%;
|
||||
height: 133px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -70,8 +70,15 @@ const handleGoMounted = async () => {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: "万辆",
|
||||
splitLine: { show: false } // 隐藏刻度线
|
||||
name: '万辆', // 仅在此处显示单位
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
padding: [0, 30, 0, 0] // 调整单位位置
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}' // 刻度值保持纯数字
|
||||
},
|
||||
splitLine: { show: false }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
@ -120,7 +127,7 @@ const handleGoMounted = async () => {
|
||||
left: '0', // 左侧间距
|
||||
right: '0', // 右侧间距
|
||||
bottom: '0', // 底部间距
|
||||
top: '10', // 顶部间距
|
||||
top: '30', // 顶部间距
|
||||
containLabel: true // 确保坐标轴标签在grid内
|
||||
},
|
||||
tooltip: { // 新增 tooltip 配置
|
||||
@ -193,7 +200,6 @@ onBeforeUnmount(() => {
|
||||
<SmallTitle :title="`车流断面趋势(04月)`" />
|
||||
|
||||
<div class="TrendOfTrafficFlowCharts">
|
||||
<div class="trafficFlowCarUnit">辆</div>
|
||||
<div class="TrendOfTrafficFlow" id="TrendOfTrafficFlow"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
.VehicleModelStayBox {
|
||||
width: 100%;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.VehicleModelStay {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
247
src/page/index/components/VehicleModelStay/VehicleModelStay.vue
Normal file
247
src/page/index/components/VehicleModelStay/VehicleModelStay.vue
Normal file
@ -0,0 +1,247 @@
|
||||
<script setup lang="ts">
|
||||
import SmallTitle from '../smallTitle/smallTitle.vue'
|
||||
import './VehicleModelStay.less'
|
||||
import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
|
||||
import * as echarts from 'echarts/core';
|
||||
import { LineChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import moment from 'moment';
|
||||
import { handleGetBayonetSTAnalysis, handleGetTransactionConvert, handleGetTransactionTimeAnalysis } from '../../service';
|
||||
|
||||
// 注册组件
|
||||
echarts.use([
|
||||
LineChart,
|
||||
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('VehicleModelStay');
|
||||
if (!chartDom) return;
|
||||
|
||||
myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: res.category,
|
||||
axisLabel: {
|
||||
interval: 1, // 改为隔1个显示1个（原为3）
|
||||
showMinLabel: true,
|
||||
showMaxLabel: true
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '停留时长',
|
||||
splitLine: { show: false },
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}' // 添加单位
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
left: '10', // 增加左侧空间
|
||||
right: '10', // 增加右侧空间
|
||||
bottom: '10',
|
||||
top: '50',
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '小型车',
|
||||
data: res?.smallCarData && res?.smallCarData.map((value, index) => ({
|
||||
value: value,
|
||||
symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: '#0094FF', // 纯色填充
|
||||
borderWidth: 0 // 无边框
|
||||
}
|
||||
})),
|
||||
type: 'line',
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#0094FF'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '中型车',
|
||||
data: res?.middleCarData && res?.middleCarData.map((value, index) => ({
|
||||
value: value,
|
||||
symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: '#7D4CD2', // 纯色填充
|
||||
borderWidth: 0 // 无边框
|
||||
}
|
||||
})),
|
||||
type: 'line',
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#7D4CD2'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '大型车',
|
||||
data: res?.bigCarData && res?.bigCarData.map((value, index) => ({
|
||||
value: value,
|
||||
symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: '#00FFB7', // 纯色填充
|
||||
borderWidth: 0 // 无边框
|
||||
}
|
||||
})),
|
||||
type: 'line',
|
||||
// smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#00FFB7'
|
||||
},
|
||||
}
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line' // 改为线条指示器
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['小型车', '中型车', '大型车'], // 确保图例显示
|
||||
textStyle: { color: '#fff' }, // 图例文字颜色
|
||||
right: '0', // 距离右侧4%的位置
|
||||
top: '0',
|
||||
}
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
window.addEventListener('resize', resizeChart);
|
||||
|
||||
}
|
||||
|
||||
// 拿到数据的方法
|
||||
const handleGetData = async () => {
|
||||
let category: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
|
||||
// let seriesData: number[] = []
|
||||
// let realData: string[] = []
|
||||
let smallCarData: number[] = []
|
||||
let middleCarData: number[] = []
|
||||
let bigCarData: number[] = []
|
||||
|
||||
const req: any = {
|
||||
StartMonth: moment().subtract(1, 'd').format('YYYYMM'),
|
||||
EndMonth: moment().subtract(1, 'd').format('YYYYMM'),
|
||||
Province_Code: '340000',
|
||||
TimeSpan: 1,
|
||||
}
|
||||
console.log('reqreqreqreqreq', req);
|
||||
|
||||
searchTime.value = moment(req.StartMonth).format('MM')
|
||||
const data = await handleGetBayonetSTAnalysis(req)
|
||||
|
||||
console.log('fdsjifjasifjdsnafsdvbhcav', data);
|
||||
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
if (item.name === '小型车') {
|
||||
if (item.data && item.data.length > 0) {
|
||||
item.data.forEach((subItem: any) => {
|
||||
smallCarData.push(subItem[1])
|
||||
})
|
||||
}
|
||||
} else if (item.name === '中型车') {
|
||||
if (item.data && item.data.length > 0) {
|
||||
item.data.forEach((subItem: any) => {
|
||||
middleCarData.push(subItem[1])
|
||||
})
|
||||
}
|
||||
} else if (item.name === '大型车') {
|
||||
if (item.data && item.data.length > 0) {
|
||||
item.data.forEach((subItem: any) => {
|
||||
bigCarData.push(subItem[1])
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let res: any = {
|
||||
category: category,// x轴的内容
|
||||
// seriesData: seriesData,// y轴的数据
|
||||
// realData: realData// 真实数据
|
||||
smallCarData: smallCarData,
|
||||
middleCarData: middleCarData,
|
||||
bigCarData: bigCarData,
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
|
||||
const resizeChart = () => {
|
||||
myChart?.resize();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart);
|
||||
myChart?.dispose();
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="VehicleModelStayBox">
|
||||
<SmallTitle :title="`车型停留分析/日均${searchTime ? `(${searchTime}月)` : ''}`"></SmallTitle>
|
||||
|
||||
<div class="VehicleModelStayCharts" style="margin-top:15px">
|
||||
<div class="VehicleModelStay" id="VehicleModelStay"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -21,7 +21,7 @@
|
||||
.VehiclesEntering {
|
||||
width: 100%;
|
||||
// height: 134px;
|
||||
height: 167px;
|
||||
height: 190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -79,7 +79,7 @@ const handleGoMounted = async () => {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '30%',
|
||||
top: '40%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
@ -95,28 +95,33 @@ const handleGoMounted = async () => {
|
||||
type: 'value',
|
||||
name: '车流量(万辆)',
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
padding: [0, 30, 0, 0] // 调整单位位置
|
||||
},
|
||||
splitNumber: 4
|
||||
splitNumber: 4,
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '交易金额(万元)',
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
padding: [0, 0, 0, 30] // 调整单位位置
|
||||
},
|
||||
splitNumber: 4
|
||||
splitNumber: 4,
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: `${res.currentYear}年车流量`,
|
||||
type: 'bar',
|
||||
barWidth: '6',
|
||||
barWidth: 5,
|
||||
data: res.seriesDataCar,
|
||||
yAxisIndex: 0
|
||||
yAxisIndex: 0,
|
||||
itemStyle: {
|
||||
borderRadius: [3, 3, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: `${res.yesYear}年车流量`,
|
||||
@ -124,9 +129,9 @@ const handleGoMounted = async () => {
|
||||
smooth: true,
|
||||
data: res.yesSeriesDataCar,
|
||||
yAxisIndex: 0,
|
||||
barWidth: '6',
|
||||
lineStyle: {
|
||||
width: 3
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
borderRadius: [3, 3, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -135,7 +140,10 @@ const handleGoMounted = async () => {
|
||||
data: res.seriesDataRevenue,
|
||||
yAxisIndex: 1,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
name: `${res.yesYear}年交易额`,
|
||||
@ -143,7 +151,10 @@ const handleGoMounted = async () => {
|
||||
data: res.yesSeriesDataRevenue,
|
||||
yAxisIndex: 1,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
],
|
||||
color: ['#008CFF', '#69BCFF', '#FF5E5E', '#FF9500'] // Custom colors for each series
|
||||
@ -224,6 +235,11 @@ const handleGetSectionFlowCount = async () => {
|
||||
currentYear: moment().format('YYYY'), // 当前年份
|
||||
yesYear: moment().subtract(1, 'y').format('YYYY')// 去年年份
|
||||
}
|
||||
|
||||
console.log('fdshufahsudifhasdjkfh', res);
|
||||
|
||||
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
|
||||
@ -14,3 +14,8 @@
|
||||
box-sizing: border-box;
|
||||
padding-left: 38px;
|
||||
}
|
||||
|
||||
.newBigTitleBoxLong {
|
||||
background-image: url(../../../../assets/image/newTitleLongBg.png);
|
||||
|
||||
}
|
||||
@ -6,13 +6,14 @@ import './newBigTitleBox.less'
|
||||
// 拿到传入的数据
|
||||
const props = defineProps<{
|
||||
title?: string;
|
||||
type?: number;// 1 为默认长度 2为两倍长度
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="newBigTitleBox">
|
||||
<div :class="type === 2 ? 'newBigTitleBox newBigTitleBoxLong' : 'newBigTitleBox'">
|
||||
{{ props?.title || "" }}
|
||||
|
||||
</div>
|
||||
|
||||
@ -162,86 +162,91 @@
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
.pageTop169 {
|
||||
.bigPageTop {
|
||||
width: 100vw;
|
||||
// height: 48px;
|
||||
height: 86px;
|
||||
// background: linear-gradient(180deg, #182950 0%, #18223F 100%);
|
||||
// border-bottom: 1px solid #0E789A;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
justify-content: space-between;
|
||||
background-image: url('../../../../assets/image/allPageTopBg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// padding: 0 30px;
|
||||
background: linear-gradient(180deg, rgba(3, 22, 38, 0.7) 0%, rgba(3, 22, 38, 0) 100%);
|
||||
|
||||
.centerBox {
|
||||
width: 40%;
|
||||
height: 80px;
|
||||
// background-image: url('../../../../assets//image/pageTitle.png');
|
||||
// background-image: url('../../../../assets/image/newPageTitle.png');
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.pageTop169 {
|
||||
width: 100vw;
|
||||
// height: 48px;
|
||||
height: 86px;
|
||||
// background: linear-gradient(180deg, #182950 0%, #18223F 100%);
|
||||
// border-bottom: 1px solid #0E789A;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.pageLogo {
|
||||
width: 46px;
|
||||
height: 38px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
.pageTitle {
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.leftTabBox {
|
||||
width: 30%;
|
||||
// height: 100%;
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 30px;
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
justify-content: space-between;
|
||||
background-image: url('../../../../assets/image/allPageTopBg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// padding: 0 30px;
|
||||
|
||||
.pageTopTabItem {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
.centerBox {
|
||||
width: 40%;
|
||||
height: 80px;
|
||||
// background-image: url('../../../../assets//image/pageTitle.png');
|
||||
// background-image: url('../../../../assets/image/newPageTitle.png');
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.pageLogo {
|
||||
width: 46px;
|
||||
height: 38px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
.pageTitle {
|
||||
font-weight: 400;
|
||||
font-size: 40px;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.selectPageTopTabItem {
|
||||
color: #4CA9EF;
|
||||
background-image: url('../../../../assets//image/newSelectPageTop.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.leftTabBox {
|
||||
width: 30%;
|
||||
// height: 100%;
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 30px;
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
|
||||
.pageTopTabItem {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selectPageTopTabItem {
|
||||
color: #4CA9EF;
|
||||
background-image: url('../../../../assets//image/newSelectPageTop.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -148,18 +148,19 @@ onBeforeUnmount(() => {
|
||||
|
||||
<template>
|
||||
<!-- <div class="pageTop"> -->
|
||||
<div class="pageTop169">
|
||||
<div class="bigPageTop">
|
||||
<div class="pageTop169">
|
||||
|
||||
<!-- 新版的顶部分区的方法 -->
|
||||
<div class="leftTabBox">
|
||||
<div :class="selectPageTab === 1 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
|
||||
@click="handleChangePageTab(1)">分区一</div>
|
||||
<div :class="selectPageTab === 2 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
|
||||
@click="handleChangePageTab(2)">分区二</div>
|
||||
</div>
|
||||
<!-- 新版的顶部分区的方法 -->
|
||||
<div class="leftTabBox">
|
||||
<div :class="selectPageTab === 1 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
|
||||
@click="handleChangePageTab(1)">综合运维</div>
|
||||
<div :class="selectPageTab === 2 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
|
||||
@click="handleChangePageTab(2)">流量洞察</div>
|
||||
</div>
|
||||
|
||||
<!-- 最初版的内容 -->
|
||||
<!-- <div :class="props.pageType === 'left' ? 'leftBox leftCenter' : 'leftBox'">
|
||||
<!-- 最初版的内容 -->
|
||||
<!-- <div :class="props.pageType === 'left' ? 'leftBox leftCenter' : 'leftBox'">
|
||||
<img class="noticeIcon" :src="noticeIcon" />
|
||||
<div class="noticeListBox"
|
||||
:style="{ width: props.pageType === 'left' ? '' : `calc(50% - ${393}px - 28px - 50px)` }">
|
||||
@ -183,15 +184,15 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div :class="props.pageType === 'left' ? 'centerBox leftBgBox' : 'centerBox'"
|
||||
:style="{ left: props.pageType === 'left' ? '0' : '50%', transform: props.pageType === 'left' ? 'translateX(-50px)' : 'translateX(-50%)' }">
|
||||
<!-- @click="handleChangePageType" -->
|
||||
<!-- <img class="pageLogo" :src="cyyLogo" /> -->
|
||||
<!-- <span class="pageTitle">云南高速服务区智慧数智大屏</span> -->
|
||||
</div>
|
||||
<div :class="props.pageType === 'left' ? 'centerBox leftBgBox' : 'centerBox'"
|
||||
:style="{ left: props.pageType === 'left' ? '0' : '50%', transform: props.pageType === 'left' ? 'translateX(-50px)' : 'translateX(-50%)' }">
|
||||
<!-- @click="handleChangePageType" -->
|
||||
<!-- <img class="pageLogo" :src="cyyLogo" /> -->
|
||||
<!-- <span class="pageTitle">云南高速服务区智慧数智大屏</span> -->
|
||||
</div>
|
||||
|
||||
<!-- 最初版的内容 -->
|
||||
<!-- <div class="rightBox" :style="{ width: `calc(50% - ${393}px - 28px - 50px)` }">
|
||||
<!-- 最初版的内容 -->
|
||||
<!-- <div class="rightBox" :style="{ width: `calc(50% - ${393}px - 28px - 50px)` }">
|
||||
<span class="nowTime">{{ nowTime || "" }}</span>
|
||||
<div class="weatherBox">
|
||||
<img class="weatherIcon" :src="weatherInfo?.CUR_WEATHER_PIC" />
|
||||
@ -202,12 +203,13 @@ onBeforeUnmount(() => {
|
||||
</div> -->
|
||||
|
||||
|
||||
<div class="leftTabBox">
|
||||
<div :class="selectPageTab === 3 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
|
||||
@click="handleChangePageTab(3)">分区三</div>
|
||||
<div :class="selectPageTab === 4 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
|
||||
@click="handleChangePageTab(4)">分区四</div>
|
||||
</div>
|
||||
<div class="leftTabBox">
|
||||
<div :class="selectPageTab === 3 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
|
||||
@click="handleChangePageTab(3)">财约枢纽</div>
|
||||
<div :class="selectPageTab === 4 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
|
||||
@click="handleChangePageTab(4)">彩云驿出行</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -47,14 +47,23 @@
|
||||
height: 28px;
|
||||
box-sizing: border-box;
|
||||
padding: 4px 10px;
|
||||
font-family: "Microsoft YaHei";
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
background-image: url('../../../../assets//image/smallTitleBg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// font-family: "Microsoft YaHei";
|
||||
// font-weight: 400;
|
||||
// font-size: 16px;
|
||||
// color: #FFFFFF;
|
||||
// text-align: center;
|
||||
// font-style: normal;
|
||||
|
||||
// background-image: url('../../../../assets//image/smallTitleBg.png');
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// background: linear-gradient(90deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
.title {
|
||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
@ -50,6 +50,14 @@ import BrandDetail from './components/BrandDetail/BrandDetail.vue'
|
||||
import AssessmentScoring from './components/AssessmentScoring/AssessmentScoring.vue';
|
||||
import OverviewOfServiceArea from './components/OverviewOfServiceArea/OverviewOfServiceArea.vue'
|
||||
import NewBigTitleBox from './components/newBigTitleBox/newBigTitleBox.vue'
|
||||
import VehicleModelStay from './components/VehicleModelStay/VehicleModelStay.vue';
|
||||
import ContractInformation from './components/ContractInformation/ContractInformation.vue'
|
||||
import SignedClients from './components/SignedClients/SignedClients.vue'
|
||||
import AnnualAccountsReceivable from './components/AnnualAccountsReceivable/AnnualAccountsReceivable.vue';
|
||||
import DetailedPayment from './components/DetailedPayment/DetailedPayment.vue';
|
||||
import DailyInspection from './components/DailyInspection/DailyInspection.vue';
|
||||
import AssessmentScoringRanking from './components/AssessmentScoringRanking/AssessmentScoringRanking.vue';
|
||||
|
||||
|
||||
// 页面样式
|
||||
let pageType = ref<string>("center")
|
||||
@ -95,34 +103,54 @@ const handleChangePageTab = (value: number) => {
|
||||
</div>
|
||||
|
||||
<!-- 分区一 -->
|
||||
<div class="content169" v-if="selectPageTab === 1">
|
||||
<div class="content169" v-if="selectPageTab === 1 || selectPageTab === 3">
|
||||
<div class="content169Left">
|
||||
<!-- 消息轮播框 -->
|
||||
<NoticeListBox :currentService="currentService" />
|
||||
|
||||
<!-- <modalTitle :title="'流量趋势'" style="margin-top: 20px;" /> -->
|
||||
<NewBigTitleBox title="流量趋势" style="margin-top: 37px;" />
|
||||
<template v-if="selectPageTab === 1">
|
||||
<!-- <modalTitle :title="'流量趋势'" style="margin-top: 20px;" /> -->
|
||||
<div class="content169LeftContent">
|
||||
<!-- 服务区概况 -->
|
||||
<OverviewOfServiceArea />
|
||||
|
||||
<div class="content169LeftContent">
|
||||
<div class="leftContentBoxItem">
|
||||
<!-- 车流断面趋势 -->
|
||||
<TrendOfTrafficFlow :currentService="currentService" />
|
||||
<NewBigTitleBox :title="'管理运营监控'" style="margin-top: 13px;" />
|
||||
|
||||
<!-- 今日走势图 -->
|
||||
<TodayTrend />
|
||||
|
||||
<!-- 服务区繁忙排行 交易排行 -->
|
||||
<BusyTradingRanking style="margin-top: 11px;" />
|
||||
|
||||
<!-- 交易预警 -->
|
||||
<TradingAlert style="margin-top: 11px;" />
|
||||
</div>
|
||||
|
||||
<div class="leftContentBoxItem" style="margin-top: 30px;">
|
||||
<!-- 入区车辆趋势 -->
|
||||
<VehiclesEntering :currentService="currentService" />
|
||||
</template>
|
||||
|
||||
<template v-if="selectPageTab === 3">
|
||||
<NewBigTitleBox title="应收账款" style="margin-top: 20px;" />
|
||||
|
||||
<div style="width: 100%;box-sizing: border-box;padding: 20px 11px;">
|
||||
|
||||
<!-- 合同信息 -->
|
||||
<ContractInformation />
|
||||
|
||||
<!-- 收款完成进度 -->
|
||||
<PaymentProgress style="margin-top: 24px;" />
|
||||
|
||||
<!-- 收款预警 -->
|
||||
<AccountsReceivableWarning style="margin-top: 24px;" />
|
||||
</div>
|
||||
|
||||
<div class="leftContentBoxItem" style="margin-top: 20px;">
|
||||
<!-- 客流变化 -->
|
||||
<PassengerFlowChanges :currentService="currentService" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<modalTitle :title="'节假日营收分析'" style="margin-top: 20px;">
|
||||
|
||||
|
||||
<!-- <modalTitle :title="'节假日营收分析'" style="margin-top: 20px;">
|
||||
<template #extra>
|
||||
<div class="FestivalBox">
|
||||
<el-select class="festivalSelect" v-model="FestivalValue" placeholder="Select"
|
||||
@ -132,9 +160,9 @@ const handleChangePageTab = (value: number) => {
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
</modalTitle>
|
||||
</modalTitle> -->
|
||||
<!-- 节假日营收分析 -->
|
||||
<FestivalRevenue :currentService="currentService" />
|
||||
<!-- <FestivalRevenue :currentService="currentService" /> -->
|
||||
</div>
|
||||
|
||||
<div class="content169Center">
|
||||
@ -152,31 +180,61 @@ const handleChangePageTab = (value: number) => {
|
||||
<div class="content169Right">
|
||||
<!-- 时间天气等内容 -->
|
||||
<BasicMessageBox :currentService="currentService" />
|
||||
<modalTitle :title="'经营业态月度情况'" style="margin-top: 20px;" />
|
||||
<div class="rightContentBox">
|
||||
<!-- 多业态收入 -->
|
||||
<MultiIndustryIncome style="margin-top: 20px;" :currentService="currentService" />
|
||||
|
||||
<!-- 区域营收占比 -->
|
||||
<RegionalRevenue :currentService="currentService" style="margin-top: 90px;" />
|
||||
<template v-if="selectPageTab === 1">
|
||||
<NewBigTitleBox :title="'经营业态月度情况'" style="margin-top: 20px;" />
|
||||
<div class="rightContentBox">
|
||||
<!-- 区域营收占比 -->
|
||||
<RegionalRevenue :currentService="currentService" style="margin-top: 20px;" />
|
||||
|
||||
<!-- 多业态收入 -->
|
||||
<MultiIndustryIncome style="margin-top: 34px;" :currentService="currentService" />
|
||||
|
||||
<!-- 业态结构占比 -->
|
||||
<BusinessStructure :currentService="currentService" style="margin-top: 22px;" />
|
||||
</div>
|
||||
|
||||
<NewBigTitleBox :title="'节假日营收分析'" style="margin-top: 22px;" />
|
||||
<!-- 节假日营收分析 -->
|
||||
<FestivalRevenue :currentService="currentService" />
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="selectPageTab === 3">
|
||||
<NewBigTitleBox :title="'应收账款'" style="margin-top: 20px;" />
|
||||
<div style="width: 100%;box-sizing: border-box;padding: 16px 11px 0;">
|
||||
<!-- 签约客户 -->
|
||||
<SignedClients />
|
||||
|
||||
<!-- 应收总额完成度 -->
|
||||
<TotalAccountsReceivable style="margin-top: 35px;" />
|
||||
|
||||
<!-- 年度应收总额完成度 -->
|
||||
<AnnualAccountsReceivable style="margin-top: 35px;" />
|
||||
|
||||
<!-- 详细款项完成进度 -->
|
||||
<DetailedPayment style="margin-top: 35px;" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 业态结构占比 -->
|
||||
<BusinessStructure :currentService="currentService" style="margin-top: 30px;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pageBottom" v-if="selectPageTab === 1 || selectPageTab === 3">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 分区二 -->
|
||||
<div class="content1692st" v-if="selectPageTab === 2">
|
||||
<div class="content1692stLeft">
|
||||
<!-- 消息轮播框 -->
|
||||
<NoticeListBox style="margin-top: 20px;" />
|
||||
<NoticeListBox style="margin-top: 20px;width: 50%;" />
|
||||
<!-- 核心经营数据 -->
|
||||
<modalTitle :title="'核心经营数据'" style="margin-top: 20px;" />
|
||||
<CoreBusinessData style="position: relative;z-index: 9;" :noTitle="true" />
|
||||
<!-- <modalTitle :title="'核心经营数据'" style="margin-top: 20px;" /> -->
|
||||
<!-- <CoreBusinessData style="position: relative;z-index: 9;" :noTitle="true" /> -->
|
||||
|
||||
<!-- 客群画像分析 -->
|
||||
<modalTitle :title="'客群画像分析'" style="margin-top: 20px;" />
|
||||
<NewBigTitleBox :title="'客群画像分析'" :type="2" style="margin-top: 20px" />
|
||||
|
||||
<div class="leftBottomContent">
|
||||
<!-- 年龄 -->
|
||||
@ -186,7 +244,7 @@ const handleChangePageTab = (value: number) => {
|
||||
<GenderCustomerGroup style="margin-left: 20px;margin-top: 20px;" />
|
||||
|
||||
<!-- 停留时长 -->
|
||||
<CustomerGroupStay style="margin-left: 20px;margin-top: 20px;" />
|
||||
<!-- <CustomerGroupStay style="margin-left: 20px;margin-top: 20px;" /> -->
|
||||
|
||||
<!-- 偏好类型 -->
|
||||
<PreferenceType style="margin-left: 20px;margin-top: 20px;" />
|
||||
@ -204,60 +262,105 @@ const handleChangePageTab = (value: number) => {
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 品牌消费水平 -->
|
||||
<BrandConsumptionLevel style="margin-top: 20px;" />
|
||||
<!-- 消费时段分析 -->
|
||||
<ConsumptionPeriod style="margin-top: 11px;" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 消费时段分析 -->
|
||||
<ConsumptionPeriod style="margin-top: 20px;" />
|
||||
<!-- 品牌消费水平 -->
|
||||
<BrandConsumptionLevel style="margin-top: 11px;" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 客群特征分析 -->
|
||||
<CustomerGroup style="margin-top: 15px;" />
|
||||
</div>
|
||||
|
||||
<div class="left3stBottomItem">
|
||||
<!-- 客群消费偏好 -->
|
||||
<CustomerConsumptionPreferences style="margin-top: 15px;" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="content1692stCenter">
|
||||
<modalTitle :title="'应收账款'" />
|
||||
<div class="left4stContent">
|
||||
<!-- 收款完成进度 -->
|
||||
<PaymentProgress />
|
||||
<NewBigTitleBox :title="'月度经营情况'" />
|
||||
|
||||
<!-- 应收总额完成度 -->
|
||||
<TotalAccountsReceivable style="margin-top: 33px;" />
|
||||
|
||||
<!-- 收款预警 -->
|
||||
<AccountsReceivableWarning style="margin-top: 44px;" />
|
||||
<div style="width: 100%;box-sizing: border-box;padding: 20px 11px 0;">
|
||||
<!-- 经营数据同比分析 -->
|
||||
<BusinessCase :currentService="currentService" />
|
||||
</div>
|
||||
<!-- <modalTitle :title="'应收账款'" /> -->
|
||||
<!-- <div class="left4stContent"> -->
|
||||
<!-- 收款完成进度 -->
|
||||
<!-- <PaymentProgress /> -->
|
||||
|
||||
<!-- 应收总额完成度 -->
|
||||
<!-- <TotalAccountsReceivable style="margin-top: 33px;" /> -->
|
||||
|
||||
<!-- 收款预警 -->
|
||||
<!-- <AccountsReceivableWarning style="margin-top: 44px;" /> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="content1692stRight">
|
||||
<!-- 时间天气等内容 -->
|
||||
<BasicMessageBox style="margin-top: 19px;" />
|
||||
<!-- 电商模块 -->
|
||||
<modalTitle :title="'电商模块'" style="margin-top: 20px;" />
|
||||
|
||||
<div class="left5stContent">
|
||||
<div class="left5stCenter">
|
||||
<!-- 线上线下销售额对比 -->
|
||||
<SalesComparison />
|
||||
<!-- 退货率 -->
|
||||
<ReturnRate />
|
||||
<NewBigTitleBox title="流量趋势" style="margin-top: 24px;" />
|
||||
|
||||
<div class="content169LeftContent" style="margin-top: 21px;">
|
||||
<div class="leftContentBoxItem">
|
||||
<!-- 车流断面趋势 -->
|
||||
<TrendOfTrafficFlow :currentService="currentService" />
|
||||
</div>
|
||||
|
||||
<!-- 热门商品榜单 -->
|
||||
<HotProductList style="margin-top: 30px;" :pageType="pageType" />
|
||||
<div class="leftContentBoxItem" style="margin-top: 23px;">
|
||||
<!-- 入区车辆趋势 -->
|
||||
<VehiclesEntering :currentService="currentService" />
|
||||
</div>
|
||||
|
||||
<!-- 服务区繁忙排行 交易排行 -->
|
||||
<BusyTradingRanking style="margin-top: 24px;" />
|
||||
<div class="leftContentBoxItem" style="margin-top: 30px;">
|
||||
<!-- 客流变化 -->
|
||||
<PassengerFlowChanges :currentService="currentService" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="leftContentBoxItem" style="margin-top: 33px;">
|
||||
<!-- 车型停留分析 / 日均 -->
|
||||
<VehicleModelStay />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 电商模块 -->
|
||||
<!-- <modalTitle :title="'电商模块'" style="margin-top: 20px;" /> -->
|
||||
|
||||
<!-- <div class="left5stContent"> -->
|
||||
<!-- <div class="left5stCenter"> -->
|
||||
<!-- 线上线下销售额对比 -->
|
||||
<!-- <SalesComparison /> -->
|
||||
<!-- 退货率 -->
|
||||
<!-- <ReturnRate /> -->
|
||||
<!-- </div> -->
|
||||
<!-- 热门商品榜单 -->
|
||||
<!-- <HotProductList style="margin-top: 30px;" :pageType="pageType" /> -->
|
||||
|
||||
<!-- 服务区繁忙排行 交易排行 -->
|
||||
<!-- <BusyTradingRanking style="margin-top: 24px;" /> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分区三 -->
|
||||
<div class="content1693st" v-if="selectPageTab === 3">
|
||||
<div class="content1693st" v-if="selectPageTab === 99">
|
||||
<div class="content1693stItem">
|
||||
<!-- 消息轮播框 -->
|
||||
<NoticeListBox />
|
||||
<modalTitle :title="'供应商'" style="margin-top: 20px;" />
|
||||
|
||||
<SupplierListBox />
|
||||
|
||||
<!-- 品牌 -->
|
||||
@ -301,44 +404,86 @@ const handleChangePageTab = (value: number) => {
|
||||
</div>
|
||||
|
||||
<div class="content1693stItem">
|
||||
<!-- 经营数据同比分析 -->
|
||||
<BusinessCase :currentService="currentService" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分区四 -->
|
||||
<div class="content1694st" v-if="selectPageTab === 4">
|
||||
<div class="content1694stItem">
|
||||
<!-- 消息轮播框 -->
|
||||
<NoticeListBox style="margin-top: 20px;" />
|
||||
|
||||
<NewBigTitleBox :title="'管理运营监控'" style="margin-top: 29px;" />
|
||||
|
||||
<div style="width: 100%;box-sizing: border-box;padding: 20px 11px 0;">
|
||||
<!-- 日常巡检(蓝湖的设备完好率) -->
|
||||
<DailyInspection />
|
||||
|
||||
<!-- 考核打分排行榜 -->
|
||||
<AssessmentScoringRanking style="margin-top: 19px;" />
|
||||
|
||||
<!-- 热门商品榜单 -->
|
||||
<HotProductList style="margin-top: 20px;" :pageType="'left'" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 客群特征分析 -->
|
||||
<CustomerGroup />
|
||||
<!-- <CustomerGroup /> -->
|
||||
|
||||
<!-- 客群消费偏好 -->
|
||||
<CustomerConsumptionPreferences style="margin-top: 140px;" />
|
||||
<!-- <CustomerConsumptionPreferences style="margin-top: 140px;" /> -->
|
||||
|
||||
<!-- 车型停留分析/日均 -->
|
||||
<VehicleStayAnalysis style="margin-top: 130px;" />
|
||||
<!-- <VehicleStayAnalysis style="margin-top: 130px;" /> -->
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content1694stItem">
|
||||
<NewBigTitleBox :title="'品牌'" style="margin-top: 74px;" />
|
||||
|
||||
<!-- 商户类别比例图 和 下面的列表 -->
|
||||
<BrandDetail />
|
||||
</div>
|
||||
|
||||
<div class="content1694stItem">
|
||||
<NewBigTitleBox :title="'供应商'" style="margin-top: 74px;" />
|
||||
<SupplierListBox />
|
||||
<!-- 在线服务区和在线收银机 -->
|
||||
<TodayTrend />
|
||||
<!-- <TodayTrend /> -->
|
||||
|
||||
<!-- 交易预警 -->
|
||||
<TradingAlert />
|
||||
<!-- <TradingAlert /> -->
|
||||
|
||||
<!-- 考核打分排行榜 -->
|
||||
<AssessmentScoring style="margin-top: 130px;" />
|
||||
<!-- <AssessmentScoring style="margin-top: 130px;" /> -->
|
||||
</div>
|
||||
<div class="content1694stItem">
|
||||
<!-- 时间天气等内容 -->
|
||||
<BasicMessageBox style="margin-top: 19px;" />
|
||||
|
||||
<!-- 服务区概况 -->
|
||||
<OverviewOfServiceArea />
|
||||
<NewBigTitleBox :title="'电商模块'" style="margin-top: 28px;" />
|
||||
|
||||
<!-- 商城订单统计 -->
|
||||
<MallOrderStatistics style="margin-top: 20px;" />
|
||||
|
||||
<NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />
|
||||
|
||||
<!-- 本月福利金发送额度 -->
|
||||
<ThisMonthBenefits style="margin-top: 10px;" />
|
||||
|
||||
<!-- 核心品类占比 -->
|
||||
<CoreCategory style="margin-top: 10px;" />
|
||||
|
||||
<NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />
|
||||
|
||||
<!-- 商户评分排行榜 -->
|
||||
<MerchantRatingRanking style="margin-top: 16px;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -377,3 +377,51 @@ export async function handleGetMonthAnalysis(params: any) {
|
||||
}
|
||||
return data.Result_Data.List
|
||||
}
|
||||
|
||||
// 车流停留分析/日均
|
||||
export async function handleGetBayonetSTAnalysis(params: any) {
|
||||
const data: any = await requestCode.get('/Revenue/GetBayonetSTAnalysis', params)
|
||||
if (data.Result_Code !== 100) {
|
||||
return data
|
||||
}
|
||||
return data.Result_Data.List
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取节假日各类项目所有天数对客分析/日均
|
||||
export async function handleGetHolidayDailyAnalysis(params: any) {
|
||||
const data: any = await requestCode.get('/Revenue/GetHolidayDailyAnalysis', params)
|
||||
if (data.Result_Code !== 100) {
|
||||
return data
|
||||
}
|
||||
return data.Result_Data.List
|
||||
}
|
||||
|
||||
|
||||
// 获取年度应收总额完成度
|
||||
export async function handleGetProjectYearlyArrearageList(params: any) {
|
||||
const data: any = await request.get('/Contract/GetProjectYearlyArrearageList', params)
|
||||
if (data.Result_Code !== 100) {
|
||||
return data
|
||||
}
|
||||
return data.Result_Data
|
||||
}
|
||||
|
||||
// 获取日常巡检的数据
|
||||
export async function handleGetPatrolAnalysis(params: any) {
|
||||
const data: any = await requestCode.get('/Examine/GetPatrolAnalysis', params)
|
||||
if (data.Result_Code !== 100) {
|
||||
return data
|
||||
}
|
||||
return data.Result_Data
|
||||
}
|
||||
|
||||
// 考核考评的数据
|
||||
export async function handleGetExamineResultList(params: any) {
|
||||
const data: any = await requestCode.get('/Examine/GetExamineResultList', params)
|
||||
if (data.Result_Code !== 100) {
|
||||
return data
|
||||
}
|
||||
return data.Result_Data.List
|
||||
}
|
||||
|
||||
@ -255,23 +255,27 @@
|
||||
}
|
||||
|
||||
.content169 {
|
||||
width: 100%;
|
||||
// height: calc(100% - 48px);
|
||||
height: calc(100% - 86px);
|
||||
// width: 100%;
|
||||
// height: calc(100% - 86px);
|
||||
width: 100vw;
|
||||
height: calc(100vh - 48px);
|
||||
|
||||
box-sizing: border-box;
|
||||
// padding: 0 20px 35px;
|
||||
padding: 0 35px;
|
||||
// padding: 0 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.content169Left {
|
||||
width: calc((100% - 105px) / 4);
|
||||
width: calc((100% - 90px) / 4);
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
box-sizing: border-box;
|
||||
padding-top: 21px;
|
||||
padding-left: 35px;
|
||||
background: linear-gradient(90deg, rgba(3, 22, 38, 0.7) 0%, rgba(3, 22, 38, 0) 100%);
|
||||
// padding-top: 20px;
|
||||
|
||||
.content169LeftContent {
|
||||
@ -309,7 +313,7 @@
|
||||
}
|
||||
|
||||
.content169Center {
|
||||
width: calc((100% - 105px) / 4 * 2 + 35px);
|
||||
width: calc((100% - 90px) / 4 * 2 + 30px);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-top: 66px;
|
||||
@ -318,18 +322,20 @@
|
||||
}
|
||||
|
||||
.content169Right {
|
||||
width: calc((100% - 105px) / 4);
|
||||
width: calc((100% - 90px) / 4);
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
box-sizing: border-box;
|
||||
padding-top: 21px;
|
||||
padding-right: 35px;
|
||||
background: linear-gradient(270deg, rgba(3, 22, 38, 0.7) 0%, rgba(3, 22, 38, 0) 100%);
|
||||
|
||||
.rightContentBox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 11px 0;
|
||||
background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
padding: 0 11px 0;
|
||||
// background: linear-gradient(0deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
|
||||
// backdrop-filter: blur(10px);
|
||||
/* 高斯模糊效果 */
|
||||
// -webkit-backdrop-filter: blur(10px);
|
||||
@ -340,6 +346,18 @@
|
||||
|
||||
}
|
||||
|
||||
.pageBottom {
|
||||
width: 100vw;
|
||||
height: 72px;
|
||||
// background: linear-gradient(0deg, rgba(3, 22, 38, 0.7) 0%, rgba(3, 22, 38, 0) 100%);
|
||||
background-image: url('../../assets/image/pageBottomBg.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
transform: translateY(-72px);
|
||||
}
|
||||
|
||||
.content1692st {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
@ -350,7 +368,8 @@
|
||||
justify-content: space-between;
|
||||
|
||||
.content1692stLeft {
|
||||
width: 47%;
|
||||
// width: 47%;
|
||||
width: calc((100% - 90px) / 4 * 2 + 30px);
|
||||
height: 100%;
|
||||
|
||||
.leftBottomContent {
|
||||
@ -447,9 +466,9 @@
|
||||
justify-content: space-between;
|
||||
|
||||
.content1694stItem {
|
||||
width: 22%;
|
||||
width: calc((100% - 90px) / 4);
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -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/basicmessagebox/basicmessagebox.vue","./src/page/index/components/brandconsumptionlevel/brandconsumptionlevel.vue","./src/page/index/components/brandlisttbox/brandlisttbox.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/corebusinessdata/corebusinessdata.vue","./src/page/index/components/corecategory/corecategory.vue","./src/page/index/components/customeragegroup/customeragegroup.vue","./src/page/index/components/customergroupstay/customergroupstay.vue","./src/page/index/components/deductiontype/deductiontype.vue","./src/page/index/components/festivalrevenue/festivalrevenue.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/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/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/vehiclesentering/vehiclesentering.vue","./src/page/index/components/modaltitle/modaltitle.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/announcementtopic/announcementtopic.vue","./src/page/index/components/assessmentscoring/assessmentscoring.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/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/deductiontype/deductiontype.vue","./src/page/index/components/festivalrevenue/festivalrevenue.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/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/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"}
|
||||
Loading…
x
Reference in New Issue
Block a user