This commit is contained in:
ylj20011123 2025-06-11 19:18:32 +08:00
parent 76a4951cf0
commit 77aa9d2251
46 changed files with 774 additions and 386 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -2,7 +2,8 @@
width: 100%; width: 100%;
.AssessmentScoringRankingListBox { .AssessmentScoringRankingListBox {
width: 100%;
margin-top: 15px;
.AssessmentScoringRankingItem { .AssessmentScoringRankingItem {
width: 100%; width: 100%;

View File

@ -6,7 +6,7 @@ import { handleGetExamineResultList } from '../../service';
// //
let rankList: any = ref<any>([]) let rankList: any = ref<any>([{}, {}, {}, {}, {}])
onMounted(async () => { onMounted(async () => {
await handleGetData() await handleGetData()

View File

@ -12,8 +12,8 @@
// justify-content: flex-end; // justify-content: flex-end;
.nowTime { .nowTime {
font-weight: 400; font-weight: 600;
font-size: 20px; font-size: 16px;
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -33,9 +33,9 @@
} }
.weatherText { .weatherText {
font-weight: 400; font-weight: 600;
font-size: 19px; font-size: 16px;
line-height: 19px; line-height: 16px;
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
@ -43,8 +43,8 @@
} }
.nowDay { .nowDay {
font-weight: 400; font-weight: 600;
font-size: 20px; font-size: 16px;
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
font-style: normal; font-style: normal;

View File

@ -21,16 +21,23 @@
.tabBox { .tabBox {
width: 100%; width: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 3px 10px;
// overflow-x: auto;
// overflow-y: hidden;
background: linear-gradient(90deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
.tabItem { .tabItem {
font-family: Microsoft YaHei, Microsoft YaHei; font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400; font-weight: bold;
font-size: 15px; font-size: 15px;
color: #89929E; color: #8B969F;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
margin: 0 20px; padding: 0 10px;
display: inline-block; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
@ -56,19 +63,23 @@
} }
} }
.brandListBox { .brandListBox {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 20px 11px; padding: 20px 11px 0;
.brandItem { .brandItem {
width: 100%; width: 100%;
height: 86px;
margin-bottom: 10px; margin-bottom: 10px;
background-color: #0F1625; background-color: #0F1625;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 8px;
.brandLeft { .brandLeft {
width: 66px; width: 66px;
@ -91,6 +102,9 @@
.brandRightTop { .brandRightTop {
width: 100%; width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.brandRightTopLeft { .brandRightTopLeft {
font-family: Microsoft YaHei, Microsoft YaHei; font-family: Microsoft YaHei, Microsoft YaHei;

View File

@ -11,7 +11,9 @@ import {
} from 'echarts/components'; } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers'; import { CanvasRenderer } from 'echarts/renderers';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'; import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { handleGetBusinessTradeTree, handleGetCombineBrandList, handleGetFieldEnumTree } from '../../service'; import { handleGetBrandStructureAnalysis, handleGetBusinessTradeTree, handleGetCombineBrandList, handleGetFieldEnumTree } from '../../service';
import defaultImg from '../../../../assets/image/defaultImg.png'
import brandTotalIcon from '../../../../assets/image/brandTotalIcon.png'
// //
echarts.use([ echarts.use([
@ -25,12 +27,13 @@ echarts.use([
let myChart: echarts.ECharts; let myChart: echarts.ECharts;
// //
const colorList = ['#FF9500', '#0094FF', '#7D4CD2']; const colorList = ['#FF9500', '#0094FF', '#7D4CD2', '#00FFB7'];
// tab // tab
let tabList = ref<any>([ let tabList = ref<any>([])
])
// tab // tab
let selectTab = ref<number>(1) let selectTab = ref<number>(1)
//
let allBrandList = ref<any>([])
// //
let brandListData = ref<any>([]) let brandListData = ref<any>([])
@ -81,25 +84,25 @@ const handleGoMounted = async () => {
}, },
// //
formatter: function (name: string) { formatter: function (name: string) {
//
const dataItem = res.pieData.find((item: any) => item.name === name);
//
return `${name} ${dataItem?.value}%`;
return `1111`
// //
// const dataItem = res.pieData.find((item: any) => item.name === name);
// //
// return `{name|${name}} {value|${dataItem?.value}}`;
} }
}, },
// tooltip: { // tooltip tooltip: { // tooltip
// trigger: 'item', // trigger: 'item', //
// axisPointer: { // axisPointer: { //
// type: 'shadow' // type: 'shadow' //
// }, },
// formatter: function (params: any) { // formatter: function (params: any) { //
// return ` return `
// <div style="font-weight:bold">${params.data.name} ${params?.percent}% ${res.realData[params.dataIndex].toLocaleString()}</div> <div style="font-weight:bold">${params.name} ${params?.percent}% </div>
// `; `;
// } }
// }, },
series: [ series: [
{ {
name: 'Access From', name: 'Access From',
@ -139,42 +142,83 @@ const handleGetData = async () => {
}) })
console.log('enumDataenumDataenumDataenumData', enumData); console.log('enumDataenumDataenumDataenumData', enumData);
let req: any = {
let category: any = ["全国品牌", "地方连锁", "本地个体"]
let pieData: any = [
{ name: "全国品牌", value: 33.3 },
{ name: "地方连锁", value: 33.3 },
{ name: "本地个体", value: 33.3 }
]
let realData: any = []
const req: any = {
ProvinceCode: "530000" ProvinceCode: "530000"
} }
const data = await handleGetBusinessTradeTree(req) const data = await handleGetBrandStructureAnalysis(req)
console.log('datadatadatadatadata', data);
let category: any = []
let pieData: any = []
if (data && data.length > 0) {
data.forEach((item: any) => {
category.push(item.name)
pieData.push({ name: item.name, value: Number(item.value) })
})
}
const listData = await handleGetCombineBrandList({
// let category: any = ["", "", ""]
// let pieData: any = [
// { name: "", value: 33.3 },
// { name: "", value: 33.3 },
// { name: "", value: 33.3 }
// ]
// let realData: any = []
// const req: any = {
// ProvinceCode: "530000"
// }
// const data = await handleGetBusinessTradeTree(req)
const listData = await handleGetBusinessTradeTree({
PROVINCE_CODE: "530000", PROVINCE_CODE: "530000",
BRAND_STATE: 1, PageIndex: 1
SERVERPART_IDS: props.currentService?.SERVERPART_ID || "" // BRAND_STATE: 1,
// SERVERPART_IDS: props.currentService?.SERVERPART_ID || ""
}) })
console.log('dksjaihudvbujscjsalda', data);
console.log('listDatalistDatalistData', listData); console.log('listDatalistDatalistData', listData);
let tableList: any = []
if (listData && listData.length > 0) {
listData.forEach((item: any) => {
tableList.push({ label: item.AUTOSTATISTICS_NAME, value: item.AUTOSTATISTICS_ID })
})
}
tabList.value = tableList
await handleGetTableData(tableList[0].value)
let res: any = { let res: any = {
category: category,// x category: category,// x
pieData: pieData,// y pieData: pieData,// y
realData: realData// // realData: realData//
} }
return res return res
} }
//
const handleGetTableData = async (BRAND_INDUSTRY: number) => {
const req: any = {
PROVINCE_CODE: "530000",
BRAND_STATE: 1,
BRAND_INDUSTRY: BRAND_INDUSTRY
// SERVERPART_IDS:""
}
const data = await handleGetCombineBrandList(req)
console.log('tableDatasadasd', data);
brandListData.value = data.slice(0, 6)
}
// tab // tab
const handleChangeTab = (value: number) => { const handleChangeTab = async (value: number) => {
brandListData.value = []
selectTab.value = value selectTab.value = value
await handleGetTableData(tabList.value[value - 1].value)
} }
@ -202,39 +246,36 @@ onBeforeUnmount(() => {
</div> </div>
<div class="brandList"> <div class="brandList">
<SmallTitle> <div class="tabBox">
<template #extra> <div :class="selectTab === index + 1 ? 'tabItem selectTab' : 'tabItem'" v-for="(item, index) in tabList"
<div class="tabBox"> :key="index" @click="handleChangeTab(index + 1)">
<div :class="selectTab === item.value ? 'tabItem selectTab' : 'tabItem'" {{ item.label }}
v-for="(item, index) in tabList" :key="index" @click="handleChangeTab(item.value)"> </div>
{{ item.label }} </div>
</div>
<div class="brandListBox">
<div class="brandItem" v-for="(item, index) in brandListData" :key="index"
:style="{ marginBottom: index + 1 === brandListData.length ? '0' : '' }">
<div class="brandLeft">
<img class="brandIcon" :src="item.BRAND_INTRO || defaultImg" />
</div> </div>
<div class="brandListBox"> <div class="brandRight">
<div class="brandItem" v-for="(item, index) in brandListData" :key="index"> <div class="brandRightTop">
<div class="brandLeft"> <div class="brandRightTopLeft">{{ item.BRAND_NAME }}</div>
<img class="brandIcon" /> <div class="brandRightTopRight">
</div> <img class="brandRightTopRightIcon" :src="brandTotalIcon" />
<div class="brandRightTopRightValue">{{ item.ServerpartList.length || 0 }}</div>
<div class="brandRight"> <div class="brandRightTopRightUnit"></div>
<div class="brandRightTop">
<div class="brandRightTopLeft"></div>
<div class="brandRightTopRight">
<img class="brandRightTopRightIcon" />
<div class="brandRightTopRightValue"></div>
<div class="brandRightTopRightUnit"></div>
</div>
</div>
<div class="brandRightBottom">
<div class="brandRightBottomItem"></div>
</div>
</div> </div>
</div> </div>
<div class="brandRightBottom">
<div class="brandRightBottomItem">{{ item.BRAND_TYPENAME }}</div>
</div>
</div> </div>
</template> </div>
</SmallTitle> </div>
</div> </div>
</div> </div>
</template> </template>

View File

@ -5,8 +5,9 @@
.BusinessStructureCharts { .BusinessStructureCharts {
width: 100%; width: 100%;
height: 210px;
box-sizing: border-box; box-sizing: border-box;
padding: 22px 0 0 31px; padding: 42px 0 0 31px;
.BusinessStructureUnit { .BusinessStructureUnit {
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
@ -19,7 +20,9 @@
} }
.BusinessStructure { .BusinessStructure {
width: 132px;
width: 100%;
// width: 132px;
height: 132px; height: 132px;
display: inline-block; display: inline-block;
} }

View File

@ -48,6 +48,7 @@ const handleGoMounted = async () => {
myChart = echarts.init(chartDom); myChart = echarts.init(chartDom);
const option = { const option = {
tooltip: { // tooltip tooltip: { // tooltip
trigger: 'item', // trigger: 'item', //
axisPointer: { // axisPointer: { //
@ -68,8 +69,8 @@ const handleGoMounted = async () => {
width: 83, width: 83,
height: 83 height: 83
}, },
left: 'center', left: 31,
top: 'center', top: 24,
z: 10 z: 10
} }
] ]
@ -79,9 +80,8 @@ const handleGoMounted = async () => {
name: 'Access From', name: 'Access From',
type: 'pie', type: 'pie',
radius: ['85%', '100%'], radius: ['85%', '100%'],
center: ['50%', '50%'], // [, ] center: ['20%', '50%'], //
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
color: function (params: any) { color: function (params: any) {
return colorList[params.dataIndex]; return colorList[params.dataIndex];
@ -96,7 +96,36 @@ const handleGoMounted = async () => {
}, },
data: res.seriesData data: res.seriesData
} }
] ],
legend: {
orient: 'vertical',
left: 160,
top: 'center',
align: 'left',
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
color: '#fff',
rich: {
name: {
width: 90, //
align: 'left',
padding: [0, 10, 0, 0]
},
percent: {
width: 50, //
align: 'right',
padding: [0, 10, 0, 0]
}
}
},
formatter: function (name: any) {
let percentData: any = res.lengedData.filter((item: any) => item.name === name)
return `{name|${name}}{percent|${percentData[0].value}%}`; // 使rich
}
}
}; };
myChart.setOption(option); myChart.setOption(option);
@ -138,6 +167,7 @@ const handleGetData = async () => {
let realData: any = [] let realData: any = []
let category: any = [] let category: any = []
let lengedLists: any = [] let lengedLists: any = []
let lengedData: any = []
if (list && list.length > 0) { if (list && list.length > 0) {
list.forEach((item: any) => { list.forEach((item: any) => {
seriesData.push({ value: Number(item.value), name: item.name }) seriesData.push({ value: Number(item.value), name: item.name })
@ -148,6 +178,10 @@ const handleGetData = async () => {
percent: Number(item.value), percent: Number(item.value),
value: item.data value: item.data
}) })
lengedData.push({
name: item.name,
value: item.value
})
}) })
} }
@ -155,7 +189,8 @@ const handleGetData = async () => {
let res: any = { let res: any = {
category: category,// x category: category,// x
seriesData: seriesData,// y seriesData: seriesData,// y
realData: realData// realData: realData,//
lengedData: lengedData
} }
lengedList.value = lengedLists lengedList.value = lengedLists
return res return res
@ -184,7 +219,7 @@ onBeforeUnmount(() => {
<!-- <div class="BusinessStructureUnit">万元</div> --> <!-- <div class="BusinessStructureUnit">万元</div> -->
<div class="BusinessStructure" id="BusinessStructure"></div> <div class="BusinessStructure" id="BusinessStructure"></div>
<div class="BusinessStructureDataList"> <!-- <div class="BusinessStructureDataList">
<div class="BusinessStructureDataBox" v-for="(item, index) in lengedList" :key="index"> <div class="BusinessStructureDataBox" v-for="(item, index) in lengedList" :key="index">
<div class="BusinessStructureDataLeftBox"> <div class="BusinessStructureDataLeftBox">
<div class="BusinessStructureItem"> <div class="BusinessStructureItem">
@ -192,12 +227,11 @@ onBeforeUnmount(() => {
<div class="BusinessStructureItemLabel">{{ item.name }}</div> <div class="BusinessStructureItemLabel">{{ item.name }}</div>
<div class="BusinessStructureItemLabel" style="margin-left: 8px;">{{ item.percent }}% <div class="BusinessStructureItemLabel" style="margin-left: 8px;">{{ item.percent }}%
</div> </div>
<!-- <div class="BusinessStructureItemLabel" style="margin-left: 8px;">{{ item.value }}</div> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>

View File

@ -5,11 +5,15 @@
justify-content: space-between; justify-content: space-between;
.BusyTradingRankingContentItem { .BusyTradingRankingContentItem {
width: calc((100% - 20px) /2); // width: calc((100% - 20px) /2);
width: 100%;
box-sizing: border-box;
padding: 0 15px;
.BusyTradingRankingDataList { .BusyTradingRankingDataList {
width: 100%; width: 100%;
height: 120px; height: 120px;
margin-top: 10px;
.BusyTradingRankingItem { .BusyTradingRankingItem {
@ -18,6 +22,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box;
padding: 0 10px;
.BusyTradingRankingItemLeft { .BusyTradingRankingItemLeft {
width: 80%; width: 80%;

View File

@ -14,7 +14,7 @@ const transactionList = ref<any>([])
onMounted(async () => { onMounted(async () => {
// //
await handleGetServiceBusyData() await handleGetServiceBusyData()
}) })
// //
@ -30,7 +30,7 @@ const handleGetServiceBusyData = async () => {
// const data = await handleGetCurHalfCollect(req) // const data = await handleGetCurHalfCollect(req)
const data = await handleGetCurBusyRank(req) const data = await handleGetCurBusyRank(req)
console.log('服务区繁忙度数据:', data); console.log('服务区繁忙度数据:', data);
let list: any = data.List
// //
const revenueReq: any = { const revenueReq: any = {
ProvinceCode: '530000', ProvinceCode: '530000',
@ -39,7 +39,7 @@ const handleGetServiceBusyData = async () => {
} }
const revenueData = await handleGetCurBusyRank(revenueReq) const revenueData = await handleGetCurBusyRank(revenueReq)
// busyRankList.value = data.CollectionObject.slice(0, 5) // busyRankList.value = data.CollectionObject.slice(0, 5)
busyRankList.value = data.slice(0, 5) busyRankList.value = list.slice(0, 5)
transactionList.value = revenueData.slice(0, 5) transactionList.value = revenueData.slice(0, 5)
} }
@ -50,11 +50,11 @@ const handleGetServiceBusyData = async () => {
<div class="BusyTradingRankingBox"> <div class="BusyTradingRankingBox">
<div class="BusyTradingRankingContentItem"> <div class="BusyTradingRankingContentItem">
<SmallTitle :pageType="'center'" :title="'服务区繁忙排行'" /> <SmallTitle :title="'服务区繁忙排行'" />
<div class="BusyTradingRankingDataList"> <div class="BusyTradingRankingDataList">
<div class="BusyTradingRankingItem" v-for="(item, index) in busyRankList" :key="index" :style="{ <div class="BusyTradingRankingItem" v-for="(item, index) in busyRankList" :key="index" :style="{
background: index % 2 === 0 ? '#121C2F' : '#0E1725' background: index % 2 === 0 ? 'rgba(22, 28, 47, 1)' : 'rgba(0, 0, 0, 0.2)'
}"> }">
<div class="BusyTradingRankingItemLeft"> <div class="BusyTradingRankingItemLeft">
<div class="BusyTradingRankingIndex" :style="{ color: index >= 3 ? '#008CFF' : '#FF9500' }">{{ <div class="BusyTradingRankingIndex" :style="{ color: index >= 3 ? '#008CFF' : '#FF9500' }">{{
@ -73,12 +73,12 @@ const handleGetServiceBusyData = async () => {
</div> </div>
<div class="BusyTradingRankingContentItem"> <div class="BusyTradingRankingContentItem" v-if="false">
<SmallTitle :pageType="'center'" :title="'服务区交易排行'" /> <SmallTitle :pageType="'center'" :title="'服务区交易排行'" />
<div class="BusyTradingRankingDataList"> <div class="BusyTradingRankingDataList">
<div class="BusyTradingRankingItem" v-for="(item, index) in transactionList" :key="index" :style="{ <div class="BusyTradingRankingItem" v-for="(item, index) in transactionList" :key="index" :style="{
background: index % 2 === 0 ? '#121C2F' : '#0E1725' background: index % 2 === 0 ? 'rgba(22, 28, 47, 1)' : 'rgba(0, 0, 0, 0.2)'
}"> }">
<div class="BusyTradingRankingItemLeft" style="width: 70%;"> <div class="BusyTradingRankingItemLeft" style="width: 70%;">
<div class="BusyTradingRankingIndex" :style="{ color: index >= 3 ? '#008CFF' : '#FF9500' }">{{ <div class="BusyTradingRankingIndex" :style="{ color: index >= 3 ? '#008CFF' : '#FF9500' }">{{

View File

@ -54,6 +54,7 @@ onMounted(async () => {
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name: "%",
splitLine: { show: false } // 线 splitLine: { show: false } // 线
}, },
xAxis: { xAxis: {
@ -139,7 +140,7 @@ onBeforeUnmount(() => {
</script> </script>
<template> <template>
<div class="ConsumptionLevelBox"> <div class="ConsumptionLevelBox">
<SmallTitle :title="'消费水平'"> <SmallTitle :title="'消费水平'">
<template #extra> <template #extra>
<div class="ConsumptionLevelDesc">低消费30 30普通消费60 高消费60</div> <div class="ConsumptionLevelDesc">低消费30 30普通消费60 高消费60</div>

View File

@ -56,7 +56,7 @@ onMounted(async () => {
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name: '客单占比', name: '客单占比(%)',
nameTextStyle: { nameTextStyle: {
color: '#fff' // Y color: '#fff' // Y
}, },

View File

@ -42,7 +42,7 @@ onMounted(async () => {
// //
const handleGetData = async () => { const handleGetData = async () => {
const req: any = { const req: any = {
ProvinceCode: '340000' ProvinceCode: '530000'
} }
const data = await handleGetProjectSummaryInfo(req) const data = await handleGetProjectSummaryInfo(req)
@ -161,7 +161,8 @@ onBeforeUnmount(() => {
</div> </div>
<div class="ContractInformationBigRightRight"> <div class="ContractInformationBigRightRight">
<div class="ContractInformationBigRightRightValue">{{ realDataObj?.Contract_Amount || '' }} <div class="ContractInformationBigRightRightValue">{{
realDataObj?.Contract_Amount ? realDataObj?.Contract_Amount.toLocaleString() : '' }}
</div> </div>
<div class="ContractInformationBigRightRightUnit">万元</div> <div class="ContractInformationBigRightRightUnit">万元</div>
</div> </div>
@ -174,7 +175,7 @@ onBeforeUnmount(() => {
<div class="ContractInformationSmallLeft" id="ContractInformation1"></div> <div class="ContractInformationSmallLeft" id="ContractInformation1"></div>
<div class="ContractInformationSmallRight"> <div class="ContractInformationSmallRight">
<div class="ContractInformationSmallRightLeft"> <div class="ContractInformationSmallRightLeft">
<div class="ContractInformationSmallRightLeftTop">合作分成</div> <div class="ContractInformationSmallRightLeftTop">联合经营</div>
<div class="ContractInformationSmallRightLeftBottom"> <div class="ContractInformationSmallRightLeftBottom">
<span class="ContractInformationSmallRightLeftBottomNormalText">合同</span> <span class="ContractInformationSmallRightLeftBottomNormalText">合同</span>
<span class="ContractInformationSmallRightLeftBottomValue">{{ shareRevenue?.Contract_SignCount <span class="ContractInformationSmallRightLeftBottomValue">{{ shareRevenue?.Contract_SignCount
@ -189,7 +190,8 @@ onBeforeUnmount(() => {
</div> </div>
<div class="ContractInformationSmallRightRight"> <div class="ContractInformationSmallRightRight">
<div class="ContractInformationSmallRightRightValue">{{ shareRevenue?.Contract_Amount || '' }} <div class="ContractInformationSmallRightRightValue">{{
shareRevenue?.Contract_Amount ? shareRevenue?.Contract_Amount.toLocaleString() : '' }}
</div> </div>
<div class="ContractInformationSmallRightRightUnit">万元</div> <div class="ContractInformationSmallRightRightUnit">万元</div>
</div> </div>
@ -200,7 +202,7 @@ onBeforeUnmount(() => {
<div class="ContractInformationSmallLeft" id="ContractInformation2"></div> <div class="ContractInformationSmallLeft" id="ContractInformation2"></div>
<div class="ContractInformationSmallRight"> <div class="ContractInformationSmallRight">
<div class="ContractInformationSmallRightLeft"> <div class="ContractInformationSmallRightLeft">
<div class="ContractInformationSmallRightLeftTop">固定租金</div> <div class="ContractInformationSmallRightLeftTop">委托运营管理</div>
<div class="ContractInformationSmallRightLeftBottom"> <div class="ContractInformationSmallRightLeftBottom">
<span class="ContractInformationSmallRightLeftBottomNormalText">合同</span> <span class="ContractInformationSmallRightLeftBottomNormalText">合同</span>
<span class="ContractInformationSmallRightLeftBottomValue">{{ FixedRent?.Contract_SignCount <span class="ContractInformationSmallRightLeftBottomValue">{{ FixedRent?.Contract_SignCount
@ -215,7 +217,8 @@ onBeforeUnmount(() => {
</div> </div>
<div class="ContractInformationSmallRightRight"> <div class="ContractInformationSmallRightRight">
<div class="ContractInformationSmallRightRightValue">{{ FixedRent?.Contract_Amount || '' }} <div class="ContractInformationSmallRightRightValue">{{ FixedRent?.Contract_Amount ?
FixedRent?.Contract_Amount.toLocaleString() : '' }}
</div> </div>
<div class="ContractInformationSmallRightRightUnit">万元</div> <div class="ContractInformationSmallRightRightUnit">万元</div>
</div> </div>

View File

@ -135,15 +135,34 @@
font-style: normal; font-style: normal;
} }
.newCoreBusinessItemValue { .newCoreBusinessItemValueBox {
font-family: Bahnschrift, Bahnschrift; margin-top: 5px;
font-weight: 400; display: flex;
font-size: 25px; align-items: flex-end;
color: #48A9F6;
text-align: center; .newCoreBusinessItemValue {
font-style: normal; font-family: Bahnschrift, Bahnschrift;
font-weight: 400;
font-size: 25px;
line-height: 30px;
color: #48A9F6;
text-align: center;
font-style: normal;
}
.newCoreBusinessItemUnit {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 12px;
line-height: 28px;
color: #C1ECF7;
text-align: center;
font-style: normal;
margin-left: 5px;
}
} }
.newCoreBusinessItemCompare { .newCoreBusinessItemCompare {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -144,8 +144,12 @@ const handleGetPonitFixed = (str: string) => {
<div class="newCoreBusinessBox"> <div class="newCoreBusinessBox">
<div class="newCoreBusinessItem"> <div class="newCoreBusinessItem">
<div class="newCoreBusinessItemLabel">营收/{{ revenueAmonut.unit }}</div> <div class="newCoreBusinessItemLabel">今日营收</div>
<div class="newCoreBusinessItemValue">{{ revenueAmonut.value }}</div> <div class="newCoreBusinessItemValueBox">
<div class="newCoreBusinessItemValue">{{ revenueAmonut.value }}</div>
<div class="newCoreBusinessItemUnit">{{ revenueAmonut.unit }}</div>
</div>
<!-- <div class="newCoreBusinessItemCompare"> <!-- <div class="newCoreBusinessItemCompare">
<div class="newCoreBusinessItemText"></div> <div class="newCoreBusinessItemText"></div>
<img class="newCoreBusinessItemAddIcon" /> <img class="newCoreBusinessItemAddIcon" />
@ -154,8 +158,11 @@ const handleGetPonitFixed = (str: string) => {
</div> </div>
<div class="newCoreBusinessItem"> <div class="newCoreBusinessItem">
<div class="newCoreBusinessItemLabel">油品消耗/{{ oilConsumption.unit }}</div> <div class="newCoreBusinessItemLabel">今日油品</div>
<div class="newCoreBusinessItemValue">{{ oilConsumption.value }}</div> <div class="newCoreBusinessItemValueBox">
<div class="newCoreBusinessItemValue">{{ oilConsumption.value }}</div>
<div class="newCoreBusinessItemUnit">{{ oilConsumption.unit }}</div>
</div>
<!-- <div class="newCoreBusinessItemCompare"> <!-- <div class="newCoreBusinessItemCompare">
<div class="newCoreBusinessItemText"></div> <div class="newCoreBusinessItemText"></div>
<img class="newCoreBusinessItemAddIcon" /> <img class="newCoreBusinessItemAddIcon" />
@ -164,8 +171,11 @@ const handleGetPonitFixed = (str: string) => {
</div> </div>
<div class="newCoreBusinessItem"> <div class="newCoreBusinessItem">
<div class="newCoreBusinessItemLabel">加水量/{{ waterAddition.unit }}</div> <div class="newCoreBusinessItemLabel">今日加水</div>
<div class="newCoreBusinessItemValue">{{ waterAddition.value }}</div> <div class="newCoreBusinessItemValueBox">
<div class="newCoreBusinessItemValue">{{ waterAddition.value }}</div>
<div class="newCoreBusinessItemUnit">{{ waterAddition.unit }}</div>
</div>
<!-- <div class="newCoreBusinessItemCompare"> <!-- <div class="newCoreBusinessItemCompare">
<div class="newCoreBusinessItemText"></div> <div class="newCoreBusinessItemText"></div>
<img class="newCoreBusinessItemAddIcon" /> <img class="newCoreBusinessItemAddIcon" />
@ -174,8 +184,11 @@ const handleGetPonitFixed = (str: string) => {
</div> </div>
<div class="newCoreBusinessItem"> <div class="newCoreBusinessItem">
<div class="newCoreBusinessItemLabel">尿素/{{ urea.unit }}</div> <div class="newCoreBusinessItemLabel">今日尿素</div>
<div class="newCoreBusinessItemValue">{{ urea.value }}</div> <div class="newCoreBusinessItemValueBox">
<div class="newCoreBusinessItemValue">{{ urea.value }}</div>
<div class="newCoreBusinessItemUnit">{{ urea.unit }}</div>
</div>
<!-- <div class="newCoreBusinessItemCompare"> <!-- <div class="newCoreBusinessItemCompare">
<div class="newCoreBusinessItemText"></div> <div class="newCoreBusinessItemText"></div>
<img class="newCoreBusinessItemAddIcon" /> <img class="newCoreBusinessItemAddIcon" />
@ -184,8 +197,11 @@ const handleGetPonitFixed = (str: string) => {
</div> </div>
<div class="newCoreBusinessItem"> <div class="newCoreBusinessItem">
<div class="newCoreBusinessItemLabel">充电次数/{{ chargingCycles.unit }}</div> <div class="newCoreBusinessItemLabel">今日充电</div>
<div class="newCoreBusinessItemValue">{{ chargingCycles.value }}</div> <div class="newCoreBusinessItemValueBox">
<div class="newCoreBusinessItemValue">{{ chargingCycles.value }}</div>
<div class="newCoreBusinessItemUnit">{{ chargingCycles.unit }}</div>
</div>
<!-- <div class="newCoreBusinessItemCompare"> <!-- <div class="newCoreBusinessItemCompare">
<div class="newCoreBusinessItemText"></div> <div class="newCoreBusinessItemText"></div>
<img class="newCoreBusinessItemAddIcon" /> <img class="newCoreBusinessItemAddIcon" />

View File

@ -48,9 +48,12 @@ onMounted(async () => {
// type: 'shadow' // // type: 'shadow' //
// }, // },
formatter: function (params: any) { // formatter: function (params: any) { //
return ` console.log('params', params);
<div>${res.category[params?.dataIndex]}${params?.data || ""}万人, 占比${res?.percentData[params?.dataIndex] || ''}%</div>
` return `<div>
<div>男性${res.seriesDataMan[params.dataIndex]}%</div>
<div>女性${res.seriesDataWoman[params.dataIndex]}%</div>
</div>`
// return ` // return `
// <div style="font-weight:bold">${params.data.name} ${params?.percent}% ${res.realData[params.dataIndex].toLocaleString()}</div> // <div style="font-weight:bold">${params.data.name} ${params?.percent}% ${res.realData[params.dataIndex].toLocaleString()}</div>
// `; // `;
@ -73,39 +76,84 @@ onMounted(async () => {
splitLine: { show: false }, splitLine: { show: false },
axisLine: { axisLine: {
show: true, show: true,
} },
splitNumber: 4
}, },
grid: { grid: {
left: '10', // left: '10', //
right: '10', // right: '10', //
bottom: '10', bottom: '30',
top: '30', top: '30',
containLabel: true containLabel: true
}, },
series: { series: [
// data: [120, 200, 150, 80, 70, 110, 130], {
data: res.seriesData, // data: [120, 200, 150, 80, 70, 110, 130],
realData: res.realData, data: res.seriesDataMan,
type: 'bar', name: '男性',
barWidth: '6', // realData: res.realData,
showBackground: true, type: 'bar',
backgroundStyle: { barWidth: '6',
borderRadius: [4, 4, 0, 0], showBackground: true,
// color: 'rgba(23, 42, 70, 1)' backgroundStyle: {
color: 'rgba(0, 148, 255, 0.1)' borderRadius: [4, 4, 0, 0],
}, // color: 'rgba(23, 42, 70, 1)'
itemStyle: { color: 'rgba(0, 148, 255, 0.1)'
borderRadius: [4, 4, 0, 0], },
// itemStyle: {
color: function (params: any) { borderRadius: [4, 4, 0, 0],
return new echarts.graphic.LinearGradient( color: '#0094FF'
0, 0, 0, 1, // //
[ // color: function (params: any) {
{ offset: 0, color: '#008CFF' }, // // return new echarts.graphic.LinearGradient(
{ offset: 1, color: '#00F6FF' } // // 0, 0, 0, 1, //
] // [
); // { offset: 0, color: '#008CFF' }, //
// { offset: 1, color: '#00F6FF' } //
// ]
// );
// }
} }
},
{
// data: [120, 200, 150, 80, 70, 110, 130],
data: res.seriesDataWoman,
name: '女性',
// 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: '#FF5E5E'
//
// color: function (params: any) {
// return new echarts.graphic.LinearGradient(
// 0, 0, 0, 1, //
// [
// { offset: 0, color: '#008CFF' }, //
// { offset: 1, color: '#00F6FF' } //
// ]
// );
// }
}
},
],
legend: {
data: ['男性', '女性'], // seriesname
bottom: 0, // 10px
left: 'center', //
itemWidth: 12, //
itemHeight: 12, //
itemGap: 20, //
textStyle: {
color: '#fff' //
} }
}, },
}; };
@ -128,22 +176,35 @@ const handleGetData = async () => {
} }
const data = await handleGetCustomerAgeRatio(req) const data = await handleGetCustomerAgeRatio(req)
console.log('fdisfsauifhdsaj', data);
for (let i = 0; i < 4; i++) { // for (let i = 0; i < 4; i++) {
let sum: number = (data[0].data[i] + data[1].data[i]) // let sum: number = (data[0].data[i] + data[1].data[i])
seriesData.push(sum.toFixed(2)) // seriesData.push(sum.toFixed(2))
percentData.push((sum / 200 * 100).toFixed(2)) // percentData.push((sum / 200 * 100).toFixed(2))
// }
//
let seriesDataMan: number[] = []
//
let seriesDataWoman: number[] = []
if (data && data.length > 0) {
data.forEach((item: any) => {
if (item.name === '男性') {
seriesDataMan = item.data
} else if (item.name === '女性') {
seriesDataWoman = item.data
}
})
} }
let res: any = { let res: any = {
category: ["25以下", "25-35", "35-45", "45以上"],// x category: ["25以下", "25-35", "35-45", "45以上"],// x
seriesData: seriesData,// y seriesDataMan: seriesDataMan,//
percentData: percentData// seriesDataWoman: seriesDataWoman//
} }
console.log('hfuhdsuafsdjfh', res);
return res return res
} }

View File

@ -70,6 +70,7 @@ const handleShowCharts = async () => {
name: '年龄', name: '年龄',
nameLocation: 'middle', nameLocation: 'middle',
nameGap: 25, nameGap: 25,
min: 20,
axisLabel: { axisLabel: {
formatter: '{value}岁' formatter: '{value}岁'
}, },

View File

@ -13,6 +13,7 @@
.FestivalRevenue { .FestivalRevenue {
width: 100%; width: 100%;
height: 190px; height: 220px;
margin-top: 20px;
} }
} }

View File

@ -32,6 +32,7 @@ onMounted(async () => {
// //
const props = defineProps<{ const props = defineProps<{
currentService?: any; currentService?: any;
FestivalValue?: number
}>(); }>();
// //
@ -117,7 +118,6 @@ const handleGoMounted = async () => {
type: 'line' // 线 type: 'line' // 线
}, },
formatter: function (params: any) { formatter: function (params: any) {
console.log('djidasjd', params);
let str1: string = `${params[0].seriesName}(${res.currentDateList[params[0].dataIndex]})${res.currentYearReal[params[0].dataIndex].toLocaleString()}` 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()}` let str2: string = `${params[1].seriesName}(${res.lastYearDateList[params[0].dataIndex]})${res.lastYearReal[params[1].dataIndex].toLocaleString()}`
@ -154,7 +154,7 @@ const handleGetData = async () => {
pushProvinceCode: 340000, pushProvinceCode: 340000,
curYear: moment().format('YYYY'), curYear: moment().format('YYYY'),
compareYear: moment().subtract(1, 'y').format('YYYY'), compareYear: moment().subtract(1, 'y').format('YYYY'),
HolidayType: 4, HolidayType: props?.FestivalValue || 5,
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'), StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
ServerpartId: props.currentService?.SERVERPART_ID || "", ServerpartId: props.currentService?.SERVERPART_ID || "",
} }

View File

@ -15,6 +15,7 @@
.OverviewOfServiceAreaContentTopItem { .OverviewOfServiceAreaContentTopItem {
width: calc((100% - 20px) / 2); width: calc((100% - 20px) / 2);
// width: 100%;
min-height: 56px; min-height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -100,7 +101,7 @@
width: calc((100% - 10px) / 2); width: calc((100% - 10px) / 2);
background: linear-gradient(0, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%); background: linear-gradient(0, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
box-sizing: border-box; box-sizing: border-box;
padding: 10px 15px; padding: 5px 15px;
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -2,7 +2,8 @@
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import NewBigTitleBox from '../newBigTitleBox/newBigTitleBox.vue'; import NewBigTitleBox from '../newBigTitleBox/newBigTitleBox.vue';
import './OverviewOfServiceArea.less' import './OverviewOfServiceArea.less'
import { handleGetCurBusyRank, handleGetServerpartList } from '../../service'; import { handleGetCurBusyRank, handleGetServerpartList, handleGetServerpartServiceSummary } from '../../service';
import SmallTitle from '../smallTitle/smallTitle.vue';
onMounted(async () => { onMounted(async () => {
@ -17,80 +18,93 @@ const businessInfo = ref<any>()
// //
const handleGetData = async () => { const handleGetData = async () => {
const req: any = { const req: any = {
Province_Code: "530000", ProvinceCode: "530000",
ShowService: true
} }
const data = await handleGetServerpartList(req) const data = await handleGetServerpartServiceSummary(req)
console.log('fhdushgsu9dgvuisdvgsudvhnjldsfas', data); console.log('fhdushgsu9dgvuisdvgsudvhnjldsfas', data);
//
// //
let serviceAllTotal: number = 0 let serviceAllTotal: number = data.ServerpartCount
// //
let HASPILOTLOUNGETotal: number = 0 let HASPILOTLOUNGETotal: number = data.DriverRoomCount
// //
let REFUELINGGUNTotal: number = 0 let REFUELINGGUNTotal: number = data.GasStationCount
// //
let ChargingStationTotal: number = 0 let ChargingStationTotal: number = data.ChargeStationCount
// //
let ParkingSpaceTotal: number = 0 let ParkingSpaceTotal: number = data.ParkingLotCount
// //
let toiletTotal: number = 0 let toiletTotal: number = data.ToiletCount
// //
let NursingRoomTotal: number = 0 let NursingRoomTotal: number = data.NursingRoomCount
// 尿 // 尿
let URECOUNTTotal: number = 0 let URECOUNTTotal: number = data.UreaCount
//
if (data && data.length > 0) { let WaterStationCount: number = data.WaterStationCount
data.forEach((item: any) => { //
serviceAllTotal += 1 let ViewingDeckCount: number = data.ViewingDeckCount
//
if (item.RegionInfo && item.RegionInfo.length > 0) { let ParkingServiceCount: number = data.ParkingServiceCount
item.RegionInfo.forEach((subItem: any) => { //
if (subItem.HASPILOTLOUNGE > 0) { let WaterCount: number = data.WaterCount
HASPILOTLOUNGETotal += 1 //
} let RestAreaCount: number = data.RestAreaCount
//
if (subItem.STATEGRIDCHARGE > 0 || subItem.LIAUTOCHARGE > 0 || subItem.GACENERGYCHARGE > 0 || subItem.OTHERCHARGE > 0) { let ServerpartTotalCount: number = data.ServerpartTotalCount
ChargingStationTotal += (subItem.STATEGRIDCHARGE || 0)
ChargingStationTotal += (subItem.LIAUTOCHARGE || 0)
ChargingStationTotal += (subItem.GACENERGYCHARGE || 0)
ChargingStationTotal += (subItem.OTHERCHARGE || 0)
}
if (subItem.REFUELINGGUN98 > 0 || subItem.REFUELINGGUN92 > 0 || subItem.REFUELINGGUN95 > 0 || subItem.REFUELINGGUN0 > 0) { // if (data && data.length > 0) {
REFUELINGGUNTotal += (subItem.REFUELINGGUN98 || 0) // data.forEach((item: any) => {
REFUELINGGUNTotal += (subItem.REFUELINGGUN92 || 0) // serviceAllTotal += 1
REFUELINGGUNTotal += (subItem.REFUELINGGUN95 || 0)
REFUELINGGUNTotal += (subItem.REFUELINGGUN0 || 0)
}
if (subItem.SMALLPARKING > 0 || subItem.PACKING > 0 || subItem.TRUCKPACKING > 0 || subItem.LONGPACKING > 0 || subItem.DANPACKING > 0 || subItem.LIVESTOCKPACKING > 0) { // if (item.RegionInfo && item.RegionInfo.length > 0) {
ParkingSpaceTotal += (subItem.SMALLPARKING || 0) // item.RegionInfo.forEach((subItem: any) => {
ParkingSpaceTotal += (subItem.PACKING || 0) // if (subItem.HASPILOTLOUNGE > 0) {
ParkingSpaceTotal += (subItem.TRUCKPACKING || 0) // HASPILOTLOUNGETotal += 1
ParkingSpaceTotal += (subItem.LONGPACKING || 0) // }
ParkingSpaceTotal += (subItem.DANPACKING || 0)
ParkingSpaceTotal += (subItem.LIVESTOCKPACKING || 0)
}
if (subItem.TOILETCOUNT > 0 || subItem.HASWIFI > 0 || subItem.HASPANTRY > 0) { // if (subItem.STATEGRIDCHARGE > 0 || subItem.LIAUTOCHARGE > 0 || subItem.GACENERGYCHARGE > 0 || subItem.OTHERCHARGE > 0) {
toiletTotal += (subItem.TOILETCOUNT || 0) // ChargingStationTotal += (subItem.STATEGRIDCHARGE || 0)
toiletTotal += (subItem.HASWIFI || 0) // ChargingStationTotal += (subItem.LIAUTOCHARGE || 0)
toiletTotal += (subItem.HASPANTRY || 0) // ChargingStationTotal += (subItem.GACENERGYCHARGE || 0)
} // ChargingStationTotal += (subItem.OTHERCHARGE || 0)
if (subItem.HASMOTHER) { // }
NursingRoomTotal += 1
}
if (subItem.UREA_COUNT > 0) { // if (subItem.REFUELINGGUN98 > 0 || subItem.REFUELINGGUN92 > 0 || subItem.REFUELINGGUN95 > 0 || subItem.REFUELINGGUN0 > 0) {
URECOUNTTotal += (subItem.UREA_COUNT || 0) // REFUELINGGUNTotal += (subItem.REFUELINGGUN98 || 0)
} // REFUELINGGUNTotal += (subItem.REFUELINGGUN92 || 0)
}) // REFUELINGGUNTotal += (subItem.REFUELINGGUN95 || 0)
} // REFUELINGGUNTotal += (subItem.REFUELINGGUN0 || 0)
}) // }
}
// if (subItem.SMALLPARKING > 0 || subItem.PACKING > 0 || subItem.TRUCKPACKING > 0 || subItem.LONGPACKING > 0 || subItem.DANPACKING > 0 || subItem.LIVESTOCKPACKING > 0) {
// ParkingSpaceTotal += (subItem.SMALLPARKING || 0)
// ParkingSpaceTotal += (subItem.PACKING || 0)
// ParkingSpaceTotal += (subItem.TRUCKPACKING || 0)
// ParkingSpaceTotal += (subItem.LONGPACKING || 0)
// ParkingSpaceTotal += (subItem.DANPACKING || 0)
// ParkingSpaceTotal += (subItem.LIVESTOCKPACKING || 0)
// }
// if (subItem.TOILETCOUNT > 0 || subItem.HASWIFI > 0 || subItem.HASPANTRY > 0) {
// toiletTotal += (subItem.TOILETCOUNT || 0)
// toiletTotal += (subItem.HASWIFI || 0)
// toiletTotal += (subItem.HASPANTRY || 0)
// }
// if (subItem.HASMOTHER) {
// NursingRoomTotal += 1
// }
// if (subItem.UREA_COUNT > 0) {
// URECOUNTTotal += (subItem.UREA_COUNT || 0)
// }
// })
// }
// })
// }
let res: any = { let res: any = {
serviceAllTotal: serviceAllTotal, serviceAllTotal: serviceAllTotal,
@ -101,6 +115,12 @@ const handleGetData = async () => {
toiletTotal: toiletTotal, toiletTotal: toiletTotal,
NursingRoomTotal: NursingRoomTotal, NursingRoomTotal: NursingRoomTotal,
URECOUNTTotal: URECOUNTTotal, URECOUNTTotal: URECOUNTTotal,
WaterStationCount: WaterStationCount,
ViewingDeckCount: ViewingDeckCount,
ParkingServiceCount: ParkingServiceCount,
WaterCount: WaterCount,
ServerpartTotalCount: ServerpartTotalCount,
RestAreaCount: RestAreaCount
} }
console.log('fdjsifjasjfs', res); console.log('fdjsifjasjfs', res);
@ -119,22 +139,24 @@ const handleGetData = async () => {
const businessData = await handleGetCurBusyRank(businessReq) const businessData = await handleGetCurBusyRank(businessReq)
console.log('服务区繁忙度数据:', businessData); console.log('服务区繁忙度数据:', businessData);
// let businessRes: any = businessData.OtherData
let businessTotal: number = 0
// // //
let noramlTotal: number = 0 // let businessTotal: number = 0
if (businessData && businessData.length > 0) { // //
businessData.forEach((item: any) => { // let noramlTotal: number = 0
if (item.TicketCount > 30) { // if (businessData && businessData.length > 0) {
businessTotal += 1 // businessData.forEach((item: any) => {
} else { // if (item.TicketCount > 30) {
noramlTotal += 1 // businessTotal += 1
} // } else {
}) // noramlTotal += 1
} // }
// })
// }
businessInfo.value = { businessInfo.value = {
businessTotal: businessTotal, businessTotal: businessRes.value,
noramlTotal: noramlTotal, noramlTotal: businessRes.data,
} }
} }
@ -146,58 +168,93 @@ const handleGetData = async () => {
<div class="OverviewOfServiceAreaBox"> <div class="OverviewOfServiceAreaBox">
<NewBigTitleBox title="服务区概况" /> <NewBigTitleBox title="服务区概况" />
<div class="OverviewOfServiceAreaContent"> <div class="OverviewOfServiceAreaContent">
<div class="OverviewOfServiceAreaContentTop">
<div class="OverviewOfServiceAreaContentTopItem" style="width: 100%;">
<div class="OverviewOfServiceAreaContentTopItemLabel">管理站点/</div>
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #56BCE6;">{{
serviceInfo?.ServerpartTotalCount || "0" }}</div>
</div>
</div>
<div class="OverviewOfServiceAreaContentTop"> <div class="OverviewOfServiceAreaContentTop">
<div class="OverviewOfServiceAreaContentTopItem"> <div class="OverviewOfServiceAreaContentTopItem">
<div class="OverviewOfServiceAreaContentTopItemLabel">服务区总数/</div> <div class="OverviewOfServiceAreaContentTopItemLabel">服务区/</div>
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #56BCE6;">{{ <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #56BCE6;">{{
serviceInfo?.serviceAllTotal || "0" }}</div> serviceInfo?.serviceAllTotal || "0" }}</div>
</div> </div>
<div class="OverviewOfServiceAreaContentTopItem"> <div class="OverviewOfServiceAreaContentTopItem">
<div class="OverviewOfServiceAreaContentTopItemLabel">司机之家/</div> <div class="OverviewOfServiceAreaContentTopItemLabel">停车区/</div>
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #5ABE89;">{{ <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #ef5a0d;">{{
serviceInfo?.HASPILOTLOUNGETotal || "0" }}</div> serviceInfo?.ParkingServiceCount || "0" }}</div>
</div> </div>
</div> </div>
<div class="OverviewOfServiceAreaContentBottom"> <div class="OverviewOfServiceAreaContentTop">
<div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
<div class="OverviewOfServiceAreaContentTopItemLabel">加水站/</div>
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #1aba80;">{{
serviceInfo?.WaterStationCount || "0" }}</div>
</div>
<div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
<div class="OverviewOfServiceAreaContentTopItemLabel">观景台/</div>
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #f41a09;">{{
serviceInfo?.ViewingDeckCount || "0" }}</div>
</div>
<div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
<div class="OverviewOfServiceAreaContentTopItemLabel">休息区/</div>
<div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #b5ebf7;">{{
serviceInfo?.RestAreaCount || "0" }}</div>
</div>
</div>
<SmallTitle title="设备设施" style="margin-top: 10px;" />
<div class="OverviewOfServiceAreaContentBottom" style="margin-top: 10px;">
<div class="OverviewOfServiceAreaContentBottomItem"> <div class="OverviewOfServiceAreaContentBottomItem">
<div class="OverviewOfServiceAreaContentBottomItemLabel">加油站/</div> <div class="OverviewOfServiceAreaContentBottomItemLabel">加油站/</div>
<div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.REFUELINGGUNTotal || "0" <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.REFUELINGGUNTotal || "0"
}}</div> }}</div>
</div> </div>
<div class="OverviewOfServiceAreaContentBottomItem"> <div class="OverviewOfServiceAreaContentBottomItem">
<div class="OverviewOfServiceAreaContentBottomItemLabel">充电桩/</div> <div class="OverviewOfServiceAreaContentBottomItemLabel">充电桩/</div>
<div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.ChargingStationTotal || "0" <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.ChargingStationTotal || "0"
}}</div> }}</div>
</div> </div>
<div class="OverviewOfServiceAreaContentBottomItem"> <!-- <div class="OverviewOfServiceAreaContentBottomItem">
<div class="OverviewOfServiceAreaContentBottomItemLabel">停车位/</div> <div class="OverviewOfServiceAreaContentBottomItemLabel">停车位/</div>
<div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.ParkingSpaceTotal || "0" <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.ParkingSpaceTotal || "0"
}}</div> }}</div>
</div> -->
<div class="OverviewOfServiceAreaContentBottomItem">
<div class="OverviewOfServiceAreaContentBottomItemLabel">司机之家/</div>
<div class="OverviewOfServiceAreaContentBottomItemValue">{{
serviceInfo?.HASPILOTLOUNGETotal || "0" }}</div>
</div> </div>
<div class="OverviewOfServiceAreaContentBottomItem"> <div class="OverviewOfServiceAreaContentBottomItem">
<div class="OverviewOfServiceAreaContentBottomItemLabel">卫生间/</div> <div class="OverviewOfServiceAreaContentBottomItemLabel">母婴室/</div>
<div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.toiletTotal || "0"
}}</div>
</div>
<div class="OverviewOfServiceAreaContentBottomItem">
<div class="OverviewOfServiceAreaContentBottomItemLabel">母婴室/</div>
<div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.NursingRoomTotal || "0" <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.NursingRoomTotal || "0"
}}</div> }}</div>
</div> </div>
<div class="OverviewOfServiceAreaContentBottomItem"> <div class="OverviewOfServiceAreaContentBottomItem">
<div class="OverviewOfServiceAreaContentBottomItemLabel">尿素/</div> <div class="OverviewOfServiceAreaContentBottomItemLabel">尿素/</div>
<div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.URECOUNTTotal || "0" <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.URECOUNTTotal || "0"
}}</div> }}</div>
</div>
<div class="OverviewOfServiceAreaContentBottomItem">
<div class="OverviewOfServiceAreaContentBottomItemLabel">加水/</div>
<div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.WaterCount || "0"
}}</div>
</div> </div>
</div> </div>
</div> </div>
<NewBigTitleBox title="服务承载" style="margin-top: 23px;" /> <NewBigTitleBox title="服务承载" style="margin-top: 5px;" />
<!-- <SmallTitle title="服务承载"/> -->
<div class="OverviewOfServiceAreaBusyContent"> <div class="OverviewOfServiceAreaBusyContent">
<div class="OverviewOfServiceAreaBusyContentItem"> <div class="OverviewOfServiceAreaBusyContentItem">
@ -211,7 +268,7 @@ const handleGetData = async () => {
<div class="OverviewOfServiceAreaBusyContentItemRightValueBox"> <div class="OverviewOfServiceAreaBusyContentItemRightValueBox">
<div class="OverviewOfServiceAreaBusyContentItemRightNumber">{{ businessInfo?.businessTotal }} <div class="OverviewOfServiceAreaBusyContentItemRightNumber">{{ businessInfo?.businessTotal }}
</div> </div>
<div class="OverviewOfServiceAreaBusyContentItemRightUnit"></div> <div class="OverviewOfServiceAreaBusyContentItemRightUnit"></div>
</div> </div>
</div> </div>
</div> </div>
@ -227,7 +284,7 @@ const handleGetData = async () => {
<div class="OverviewOfServiceAreaBusyContentItemRightValueBox"> <div class="OverviewOfServiceAreaBusyContentItemRightValueBox">
<div class="OverviewOfServiceAreaBusyContentItemRightNumber" style="color: #fff;"> <div class="OverviewOfServiceAreaBusyContentItemRightNumber" style="color: #fff;">
{{ businessInfo?.noramlTotal }}</div> {{ businessInfo?.noramlTotal }}</div>
<div class="OverviewOfServiceAreaBusyContentItemRightUnit"></div> <div class="OverviewOfServiceAreaBusyContentItemRightUnit"></div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -40,8 +40,9 @@ onMounted(async () => {
// tooltip: { // tooltip // tooltip: { // tooltip
// trigger: 'item', // trigger: 'item',
// formatter: function (params: any) { // formatter: function (params: any) {
// return ` // console.log('params', params);
// <div style="font-weight:bold">${params.name}</div>
// return `<div>${params.name} ${params.value}</div>
// `; // `;
// } // }
// }, // },
@ -117,7 +118,7 @@ const handleGetSectionFlowCount = async () => {
let list: any = data.BusinessTradeRank let list: any = data.BusinessTradeRank
if (list && list.length > 0) { if (list && list.length > 0) {
list.forEach((item: any) => { list.forEach((item: any) => {
category.push({ name: item.name, max: 100 }) category.push({ name: `${item.name}${item.value}%`, max: 100 })
seriesData.push(Number(item.value)) seriesData.push(Number(item.value))
realData.push(item.data) realData.push(item.data)
}) })

View File

@ -55,12 +55,15 @@
.RegionalRevenueChartsContent { .RegionalRevenueChartsContent {
width: 100%; width: 100%;
height: 132px; // height: 132px;
height: 210px;
display: flex; display: flex;
align-items: center; align-items: center;
.RegionalRevenue { .RegionalRevenue {
width: 132px; // width: 132px;
width: 100%;
height: 132px; height: 132px;
} }

View File

@ -62,6 +62,7 @@ const handleGoMounted = async () => {
if (!chartDom) return; if (!chartDom) return;
myChart = echarts.init(chartDom); myChart = echarts.init(chartDom);
const option = { const option = {
tooltip: { // tooltip tooltip: { // tooltip
trigger: 'item', // trigger: 'item', //
@ -79,6 +80,7 @@ const handleGoMounted = async () => {
name: 'Access From', name: 'Access From',
type: 'pie', type: 'pie',
radius: ['0%', '100%'], radius: ['0%', '100%'],
center: ['20%', '50%'], //
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
color: function (params: any) { color: function (params: any) {
@ -94,7 +96,36 @@ const handleGoMounted = async () => {
}, },
data: res.pieData data: res.pieData
} }
] ],
legend: {
orient: 'vertical',
left: 160,
top: 'center',
align: 'left',
itemGap: 10,
itemWidth: 12,
itemHeight: 12,
textStyle: {
color: '#fff',
rich: {
name: {
width: 90, //
align: 'left',
padding: [0, 10, 0, 0]
},
percent: {
width: 50, //
align: 'right',
padding: [0, 10, 0, 0]
}
}
},
formatter: function (name: any) {
let percentData: any = res.lengedData.filter((item: any) => item.name === name)
return `{name|${name}}{percent|${percentData[0].value}%}`; // 使rich
}
}
}; };
myChart.setOption(option); myChart.setOption(option);
@ -106,6 +137,8 @@ const handleGoMounted = async () => {
// //
const handleGetData = async () => { const handleGetData = async () => {
const req: any = { const req: any = {
StartDate: "2025-04-01",
EndDate: "2025-04-30",
DataType: selectDataType.value, DataType: selectDataType.value,
ServerpartIds: props.currentService?.SERVERPART_ID || allServiceId, ServerpartIds: props.currentService?.SERVERPART_ID || allServiceId,
DataSourceType: 1, DataSourceType: 1,
@ -125,12 +158,21 @@ const handleGetData = async () => {
if (data && data.length > 0) { if (data && data.length > 0) {
data.forEach((item: any) => { data.forEach((item: any) => {
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
let sum: number = 0
item.children.forEach((subItem: any) => {
sum += subItem.TotalRevenue.Revenue_Amount
})
item.children.forEach((subItem: any) => { item.children.forEach((subItem: any) => {
category.push(subItem.Serverpart_Name) category.push(subItem.Serverpart_Name)
seriesData.push(Number((subItem.TotalRevenue.Revenue_Amount / 10000).toFixed(2))) seriesData.push(Number((subItem.TotalRevenue.Revenue_Amount / 10000).toFixed(2)))
realData.push(subItem.TotalRevenue.Revenue_Amount) realData.push(subItem.TotalRevenue.Revenue_Amount)
pieData.push({ value: Number((subItem.TotalRevenue.Revenue_Amount / 10000).toFixed(2)), name: subItem.Serverpart_Name }) pieData.push({ value: Number((subItem.TotalRevenue.Revenue_Amount / 10000).toFixed(2)), name: subItem.Serverpart_Name })
lengedData.push({ name: subItem.Serverpart_Name, value: subItem.TotalRevenue.Revenue_Amount.toLocaleString() }) // lengedData.push({ name: subItem.Serverpart_Name, value: subItem.TotalRevenue.Revenue_Amount.toLocaleString() })
lengedData.push({ name: subItem.Serverpart_Name, value: Number(((subItem.TotalRevenue.Revenue_Amount / sum) * 100).toFixed(2)) })
}) })
} }
@ -141,7 +183,8 @@ const handleGetData = async () => {
category: category,// x category: category,// x
seriesData: seriesData,// y seriesData: seriesData,// y
realData: realData,// realData: realData,//
pieData: pieData pieData: pieData,
lengedData: lengedData
} }
lengedList.value = lengedData lengedList.value = lengedData
return res return res
@ -172,7 +215,7 @@ onBeforeUnmount(() => {
<template> <template>
<div class="RegionalRevenueBox"> <div class="RegionalRevenueBox">
<SmallTitle :title="'区域营收占比'"> <SmallTitle :title="'区域营收占比'">
<template #extra> <!-- <template #extra>
<div class="RegionalRevenueSelect"> <div class="RegionalRevenueSelect">
<div :class="selectDataType === 1 ? 'RegionalRevenueItem RegionalRevenueItemLeft selectRegionalRevenueItem' : 'RegionalRevenueItem RegionalRevenueItemLeft'" <div :class="selectDataType === 1 ? 'RegionalRevenueItem RegionalRevenueItemLeft selectRegionalRevenueItem' : 'RegionalRevenueItem RegionalRevenueItemLeft'"
@click="handleChangeDataType(1)"> @click="handleChangeDataType(1)">
@ -182,7 +225,7 @@ onBeforeUnmount(() => {
</div> </div>
</div> </div>
</template> </template> -->
</SmallTitle> </SmallTitle>
<div class="RegionalRevenueCharts"> <div class="RegionalRevenueCharts">
@ -190,7 +233,7 @@ onBeforeUnmount(() => {
<div class="RegionalRevenueChartsContent"> <div class="RegionalRevenueChartsContent">
<div class="RegionalRevenue" id="RegionalRevenue" v-if="showCharts"></div> <div class="RegionalRevenue" id="RegionalRevenue" v-if="showCharts"></div>
<template v-if="showCharts"> <!-- <template v-if="showCharts">
<div class="RegionalRevenueDataBoxList" v-if="lengedList && lengedList.length > 0"> <div class="RegionalRevenueDataBoxList" v-if="lengedList && lengedList.length > 0">
<div class="RegionalRevenueDataBox" v-for="(item, index) in lengedList" :key="index"> <div class="RegionalRevenueDataBox" v-for="(item, index) in lengedList" :key="index">
<div class="RegionalRevenueDataLeftBox"> <div class="RegionalRevenueDataLeftBox">
@ -202,18 +245,9 @@ onBeforeUnmount(() => {
<div class="RegionalRevenueItemUnit"></div> <div class="RegionalRevenueItemUnit"></div>
</div> </div>
</div> </div>
<!-- <div class="RegionalRevenueDataRightBox">
<div class="RegionalRevenueDataYOY">
<div class="RegionalRevenueYOYTitle">环比</div>
<div class="RegionalRevenueYOYValue">
<div class="RegionalRevenueYOYNumber">+5%</div>
</div>
</div>
<div class="RegionalRevenueDataQOQ"></div>
</div> -->
</div> </div>
</div> </div>
</template> </template> -->
</div> </div>
</div> </div>

View File

@ -42,7 +42,7 @@ onMounted(async () => {
// //
const handleGetData = async () => { const handleGetData = async () => {
const req: any = { const req: any = {
ProvinceCode: '340000' ProvinceCode: '530000'
} }
const data = await handleGetProjectSummaryInfo(req) const data = await handleGetProjectSummaryInfo(req)
@ -162,7 +162,7 @@ onBeforeUnmount(() => {
</div> </div>
<div class="SignedClientsBigRightRight"> <div class="SignedClientsBigRightRight">
<div class="SignedClientsBigRightRightValue">{{ realDataObj?.ArrearageMerchant_Count || '' }} <div class="SignedClientsBigRightRightValue">{{ realDataObj?.Contractor_Count || '' }}
</div> </div>
<div class="SignedClientsBigRightRightUnit"></div> <div class="SignedClientsBigRightRightUnit"></div>
</div> </div>
@ -190,7 +190,7 @@ onBeforeUnmount(() => {
</div> </div>
<div class="SignedClientsSmallRightRight"> <div class="SignedClientsSmallRightRight">
<div class="SignedClientsSmallRightRightValue">{{ shareRevenue?.ArrearageMerchant_Count || '' }} <div class="SignedClientsSmallRightRightValue">{{ shareRevenue?.Contractor_Count || '' }}
</div> </div>
<div class="SignedClientsSmallRightRightUnit"></div> <div class="SignedClientsSmallRightRightUnit"></div>
</div> </div>
@ -215,7 +215,7 @@ onBeforeUnmount(() => {
</div> </div>
<div class="SignedClientsSmallRightRight"> <div class="SignedClientsSmallRightRight">
<div class="SignedClientsSmallRightRightValue">{{ FixedRent?.ArrearageMerchant_Count || '' }} <div class="SignedClientsSmallRightRightValue">{{ FixedRent?.Contractor_Count || '' }}
</div> </div>
<div class="SignedClientsSmallRightRightUnit"></div> <div class="SignedClientsSmallRightRightUnit"></div>
</div> </div>

View File

@ -21,11 +21,11 @@
.TodayTrendContent { .TodayTrendContent {
width: 100%; width: 100%;
margin-top: 15px; margin-top: 5px;
.TodayTrend { .TodayTrend {
width: 100%; width: 100%;
height: 154px; height: 170px;
} }
} }

View File

@ -55,6 +55,13 @@ onMounted(async () => {
myChart = echarts.init(chartDom); myChart = echarts.init(chartDom);
const option = { const option = {
legend: {
textStyle: {
color: '#fff' //
},
top: 0, //
right: 0
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: res.category, data: res.category,
@ -77,9 +84,11 @@ onMounted(async () => {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: '营收', name: '营收(元)',
nameTextStyle: { nameTextStyle: {
color: '#fff' color: '#fff',
padding: [0, 30, 0, 0] //
}, },
splitLine: { show: false }, splitLine: { show: false },
axisLine: { axisLine: {
@ -91,9 +100,10 @@ onMounted(async () => {
}, },
{ {
type: 'value', type: 'value',
name: '客单', name: '客单(笔)',
nameTextStyle: { nameTextStyle: {
color: '#fff' color: '#fff',
padding: [0, 0, 0, 10] //
}, },
splitLine: { show: false }, splitLine: { show: false },
position: 'right', position: 'right',
@ -103,14 +113,13 @@ onMounted(async () => {
color: '#fff' color: '#fff'
} }
}, },
offset: 0
} }
], ],
grid: { grid: {
left: '10', left: '10',
right: '10', right: '10',
bottom: '10', bottom: '10',
top: '10', top: '50',
containLabel: true containLabel: true
}, },
series: [ series: [
@ -291,7 +300,7 @@ onBeforeUnmount(() => {
<template> <template>
<div class="TodayTrendBox"> <div class="TodayTrendBox">
<SmallTitle :title="'今日走势图'" style="margin-top: 13px;"></SmallTitle> <SmallTitle :title="`今日走势图(${moment().format('YYYY-MM-DD')})`" style="margin-top: 13px;"></SmallTitle>
<!-- <div class="TodayTrendUnit"> <!-- <div class="TodayTrendUnit">
<span></span> <span></span>

View File

@ -60,7 +60,6 @@ const handleGoMounted = async () => {
type: 'category', type: 'category',
data: res.category, data: res.category,
axisLabel: { axisLabel: {
width: 40, // 60px
overflow: 'truncate', // overflow: 'truncate', //
ellipsis: '...', // ellipsis: '...', //
interval: 0 // interval: 0 //
@ -164,7 +163,7 @@ const handleGetSectionFlowCount = async () => {
} }
let data = await handleGetProvinceMonthAnalysis(req) let data = await handleGetProvinceMonthAnalysis(req)
let list = data.slice(0, 10) let list = data.slice(0, 5)
let category: string[] = [] let category: string[] = []
let seriesData: number[] = [] let seriesData: number[] = []
let realData: string[] = [] let realData: string[] = []

View File

@ -21,7 +21,7 @@
.VehicleModelStay { .VehicleModelStay {
width: 100%; width: 100%;
height: 150px; height: 170px;
} }
} }
} }

View File

@ -91,7 +91,7 @@ const handleGoMounted = async () => {
series: [ series: [
{ {
name: '小型车', name: '小型车',
data: res?.smallCarData && res?.smallCarData.map((value, index) => ({ data: res?.smallCarData && res?.smallCarData.map((value: any, index: any) => ({
value: value, value: value,
symbol: index % 2 === 0 ? 'circle' : 'none', // symbol: index % 2 === 0 ? 'circle' : 'none', //
symbolSize: 6, symbolSize: 6,
@ -109,7 +109,7 @@ const handleGoMounted = async () => {
}, },
{ {
name: '中型车', name: '中型车',
data: res?.middleCarData && res?.middleCarData.map((value, index) => ({ data: res?.middleCarData && res?.middleCarData.map((value: any, index: any) => ({
value: value, value: value,
symbol: index % 2 === 0 ? 'circle' : 'none', // symbol: index % 2 === 0 ? 'circle' : 'none', //
symbolSize: 6, symbolSize: 6,
@ -127,7 +127,7 @@ const handleGoMounted = async () => {
}, },
{ {
name: '大型车', name: '大型车',
data: res?.bigCarData && res?.bigCarData.map((value, index) => ({ data: res?.bigCarData && res?.bigCarData.map((value: any, index: any) => ({
value: value, value: value,
symbol: index % 2 === 0 ? 'circle' : 'none', // symbol: index % 2 === 0 ? 'circle' : 'none', //
symbolSize: 6, symbolSize: 6,

View File

@ -63,7 +63,6 @@ const handleGoMounted = async () => {
} }
} }
}, },
legend: { legend: {
data: [`${res.currentYear}年车流量`, `${res.yesYear}年车流量`, `${res.currentYear}年交易额`, `${res.yesYear}年交易额`], data: [`${res.currentYear}年车流量`, `${res.yesYear}年车流量`, `${res.currentYear}年交易额`, `${res.yesYear}年交易额`],
textStyle: { textStyle: {
@ -199,9 +198,9 @@ const handleGetSectionFlowCount = async () => {
if (data && data.length > 0) { if (data && data.length > 0) {
data.forEach((item: any) => { data.forEach((item: any) => {
category.push(`${item.Statistics_Month < 10 ? '0' + item.Statistics_Month : item.Statistics_Month}`) category.push(`${item.Statistics_Month < 10 ? '0' + item.Statistics_Month : item.Statistics_Month}`)
seriesDataCar.push(item.Vehicle_Count / 10000) seriesDataCar.push(Number((item.Vehicle_Count / 10000).toFixed(2)))
realDataCar.push(item.Vehicle_Count) realDataCar.push(item.Vehicle_Count)
seriesDataRevenue.push(item.RevenueAmount / 10000) seriesDataRevenue.push(Number((item.RevenueAmount / 10000).toFixed(2)))
realDataRevenue.push(item.RevenueAmount) realDataRevenue.push(item.RevenueAmount)
}) })
} }
@ -213,8 +212,8 @@ const handleGetSectionFlowCount = async () => {
if (yesData && yesData.length > 0) { if (yesData && yesData.length > 0) {
yesData.forEach((item: any) => { yesData.forEach((item: any) => {
yesSeriesDataCar.push(item.Vehicle_Count / 10000) yesSeriesDataCar.push(Number((item.Vehicle_Count / 10000).toFixed(2)))
yesSeriesDataRevenue.push(item.RevenueAmount / 10000) yesSeriesDataRevenue.push(Number((item.RevenueAmount / 10000).toFixed(2)))
yesRealDataCar.push(item.Vehicle_Count) yesRealDataCar.push(item.Vehicle_Count)
yesRealDataRevenue.push(item.RevenueAmount) yesRealDataRevenue.push(item.RevenueAmount)
}) })

View File

@ -13,6 +13,9 @@
font-style: normal; font-style: normal;
box-sizing: border-box; box-sizing: border-box;
padding-left: 38px; padding-left: 38px;
display: flex;
align-items: center;
justify-content: space-between;
} }
.newBigTitleBoxLong { .newBigTitleBoxLong {

View File

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

View File

@ -41,9 +41,9 @@
.contentMessage { .contentMessage {
font-family: Microsoft YaHei, Microsoft YaHei; font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400; font-weight: 600;
font-size: 19px; font-size: 16px;
line-height: 19px; line-height: 16px;
color: #FFFFFF; color: #FFFFFF;
text-align: left; text-align: left;
font-style: normal; font-style: normal;

View File

@ -154,9 +154,9 @@ onBeforeUnmount(() => {
<!-- 新版的顶部分区的方法 --> <!-- 新版的顶部分区的方法 -->
<div class="leftTabBox"> <div class="leftTabBox">
<div :class="selectPageTab === 1 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'" <div :class="selectPageTab === 1 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
@click="handleChangePageTab(1)">综合运维</div> @click="handleChangePageTab(1)">全景总览</div>
<div :class="selectPageTab === 2 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'" <div :class="selectPageTab === 2 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
@click="handleChangePageTab(2)">流量洞察</div> @click="handleChangePageTab(2)">商业画像</div>
</div> </div>
<!-- 最初版的内容 --> <!-- 最初版的内容 -->
@ -205,9 +205,9 @@ onBeforeUnmount(() => {
<div class="leftTabBox"> <div class="leftTabBox">
<div :class="selectPageTab === 3 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'" <div :class="selectPageTab === 3 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
@click="handleChangePageTab(3)">约枢纽</div> @click="handleChangePageTab(3)">务中枢</div>
<div :class="selectPageTab === 4 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'" <div :class="selectPageTab === 4 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'">彩云驿出行</div>
@click="handleChangePageTab(4)">彩云驿出行</div> <!-- @click="handleChangePageTab(4)" -->
</div> </div>
</div> </div>

View File

@ -14,7 +14,8 @@
font-family: Microsoft YaHei, Microsoft YaHei; font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: bold; font-weight: bold;
font-size: 15px; font-size: 15px;
color: #FFFFFF; // color: #FFFFFF;
color: #C1ECF7;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
} }

View File

@ -3,11 +3,12 @@
overflow-y: scroll; overflow-y: scroll;
box-sizing: border-box; box-sizing: border-box;
padding: 20px 11px; padding: 20px 11px;
background: linear-gradient(315deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%); // background: linear-gradient(315deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
height: 418px; // height: 418px;
.supplierListItem { .supplierListItem {
width: 100%; width: 100%;
height: 86px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 20px; padding: 10px 20px;
border-radius: 10px; border-radius: 10px;
@ -16,16 +17,21 @@
align-items: flex-start; align-items: flex-start;
margin-bottom: 10px; margin-bottom: 10px;
.supplierListLeft { // .supplierListLeft {
width: 66px; // width: 66px;
height: 66px; // height: 66px;
border-radius: 10px; // border-radius: 10px;
margin-right: 20px; // margin-right: 20px;
background-color: #fff; // background-color: #fff;
}
// .supplierIcon {
// width: 100%;
// height: 100%;
// }
// }
.supplierListRight { .supplierListRight {
flex: 1; // flex: 1;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 0; padding: 10px 0;

View File

@ -1,27 +1,45 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { onMounted, ref } from 'vue';
import './supplierListBox.less' import './supplierListBox.less'
import shopIcon from '../../../../assets/image/shopIcon.png' import shopIcon from '../../../../assets/image/shopIcon.png'
import { handleGetSupplierList } from '../../service';
// //
let supplierList = ref<any>([]) let supplierList = ref<any>([])
onMounted(async () => {
await handleGetData()
})
//
const handleGetData = async () => {
const req: any = {
ProvinceCode: "530000",
StatisticsMonth: "202505"
}
const data = await handleGetSupplierList(req)
supplierList.value = data.slice(0, 9)
}
</script> </script>
<template> <template>
<div class="supplierListBox"> <div class="supplierListBox">
<div class="supplierListItem"> <div class="supplierListItem" v-for="(item, index) in supplierList" :key="index">
<div class="supplierListLeft"> <!-- <div class="supplierListLeft">
<img class="supplierIcon" :src="item.Icon" />
</div> </div> -->
<div class="supplierListRight"> <div class="supplierListRight">
<div class="supplierListName">今麦郎食品股份有限公司广州分公司</div> <div class="supplierListName">{{ item.SupplierName || '' }}</div>
<div class="supplierListContent"> <div class="supplierListContent">
<img class="shopIcon" :src="shopIcon" /> <img class="shopIcon" :src="shopIcon" />
<span class="shopValue">8,888</span> <span class="shopValue">{{ item.VarietyCount }}</span>
<span class="shopUnit"></span> <span class="shopUnit"></span>
</div> </div>
</div> </div>

View File

@ -62,9 +62,19 @@ import AssessmentScoringRanking from './components/AssessmentScoringRanking/Asse
// //
let pageType = ref<string>("center") let pageType = ref<string>("center")
// //
let FestivalOptions = [{ label: '五一', value: 1 }] let FestivalOptions = [
{ label: '元旦', value: 1 },
{ label: '春运', value: 2 },
{ label: '清明', value: 3 },
{ label: '五一', value: 4 },
{ label: '端午', value: 5 },
{ label: '暑期', value: 6 },
{ label: '中秋', value: 7 },
{ label: '国庆', value: 8 },
]
// //
let FestivalValue = ref<number>(1) let FestivalValue = ref<number>(5)
// //
let currentService = ref<any>({}) let currentService = ref<any>({})
// tab // tab
@ -114,7 +124,7 @@ const handleChangePageTab = (value: number) => {
<!-- 服务区概况 --> <!-- 服务区概况 -->
<OverviewOfServiceArea /> <OverviewOfServiceArea />
<NewBigTitleBox :title="'管理运营监控'" style="margin-top: 13px;" /> <NewBigTitleBox :title="'管理运营监控'" style="margin-top: 15px;" />
<!-- 今日走势图 --> <!-- 今日走势图 -->
<TodayTrend /> <TodayTrend />
@ -123,7 +133,7 @@ const handleChangePageTab = (value: number) => {
<BusyTradingRanking style="margin-top: 11px;" /> <BusyTradingRanking style="margin-top: 11px;" />
<!-- 交易预警 --> <!-- 交易预警 -->
<TradingAlert style="margin-top: 11px;" /> <!-- <TradingAlert style="margin-top: 11px;" /> -->
</div> </div>
</template> </template>
@ -182,21 +192,31 @@ const handleChangePageTab = (value: number) => {
<BasicMessageBox :currentService="currentService" /> <BasicMessageBox :currentService="currentService" />
<template v-if="selectPageTab === 1"> <template v-if="selectPageTab === 1">
<NewBigTitleBox :title="'经营业态月度情况'" style="margin-top: 20px;" /> <NewBigTitleBox title="流量趋势" style="margin-top: 24px;" />
<div class="rightContentBox">
<!-- 区域营收占比 -->
<RegionalRevenue :currentService="currentService" style="margin-top: 20px;" />
<!-- 多业态收入 --> <div class="content169LeftContent" style="margin-top: 21px;">
<MultiIndustryIncome style="margin-top: 34px;" :currentService="currentService" /> <div class="leftContentBoxItem">
<!-- 车流断面趋势 -->
<TrendOfTrafficFlow :currentService="currentService" />
</div>
<!-- 业态结构占比 --> <div class="leftContentBoxItem" style="margin-top: 23px;">
<BusinessStructure :currentService="currentService" style="margin-top: 22px;" /> <!-- 入区车辆趋势 -->
<VehiclesEntering :currentService="currentService" />
</div>
<div class="leftContentBoxItem" style="margin-top: 30px;">
<!-- 客流变化 -->
<PassengerFlowChanges :currentService="currentService" />
</div>
<div class="leftContentBoxItem" style="margin-top: 33px;">
<!-- 车型停留分析 / 日均 -->
<VehicleModelStay />
</div>
</div> </div>
<NewBigTitleBox :title="'节假日营收分析'" style="margin-top: 22px;" />
<!-- 节假日营收分析 -->
<FestivalRevenue :currentService="currentService" />
</template> </template>
@ -303,34 +323,31 @@ const handleChangePageTab = (value: number) => {
<!-- </div> --> <!-- </div> -->
</div> </div>
<div class="content1692stRight"> <div class="content1692stRight">
<!-- 时间天气等内容 --> <NewBigTitleBox :title="'经营业态月度情况'" style="margin-top: 20px;" />
<BasicMessageBox style="margin-top: 19px;" /> <div class="rightContentBox">
<!-- 区域营收占比 -->
<RegionalRevenue :currentService="currentService" style="margin-top: 20px;" />
<NewBigTitleBox title="流量趋势" style="margin-top: 24px;" /> <!-- 多业态收入 -->
<!-- <MultiIndustryIncome style="margin-top: 34px;" :currentService="currentService" /> -->
<div class="content169LeftContent" style="margin-top: 21px;"> <!-- 业态结构占比 -->
<div class="leftContentBoxItem"> <BusinessStructure :currentService="currentService" style="margin-top: 22px;" />
<!-- 车流断面趋势 -->
<TrendOfTrafficFlow :currentService="currentService" />
</div>
<div class="leftContentBoxItem" style="margin-top: 23px;">
<!-- 入区车辆趋势 -->
<VehiclesEntering :currentService="currentService" />
</div>
<div class="leftContentBoxItem" style="margin-top: 30px;">
<!-- 客流变化 -->
<PassengerFlowChanges :currentService="currentService" />
</div>
<div class="leftContentBoxItem" style="margin-top: 33px;">
<!-- 车型停留分析 / 日均 -->
<VehicleModelStay />
</div>
</div> </div>
<NewBigTitleBox :title="'节假日营收分析'" style="margin-top: 34px;">
<template #extra>
<div class="FestivalBox">
<el-select class="festivalSelect" v-model="FestivalValue" placeholder="Select"
style="width: 72px;">
<el-option v-for="item in FestivalOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
</template>
</NewBigTitleBox>
<!-- 节假日营收分析 -->
<FestivalRevenue :currentService="currentService" :FestivalValue="FestivalValue" />
@ -427,12 +444,6 @@ const handleChangePageTab = (value: number) => {
<HotProductList style="margin-top: 20px;" :pageType="'left'" /> <HotProductList style="margin-top: 20px;" :pageType="'left'" />
</div> </div>
<!-- 客群特征分析 --> <!-- 客群特征分析 -->
<!-- <CustomerGroup /> --> <!-- <CustomerGroup /> -->

View File

@ -207,7 +207,7 @@ export async function handleGetCurBusyRank(params: any) {
if (data.Result_Code !== 100) { if (data.Result_Code !== 100) {
return data return data
} }
return data.Result_Data.List return data.Result_Data
} }
@ -425,3 +425,32 @@ export async function handleGetExamineResultList(params: any) {
} }
return data.Result_Data.List return data.Result_Data.List
} }
// 获取服务区基础设施汇总数据
export async function handleGetServerpartServiceSummary(params: any) {
const data: any = await requestPos.post('/BaseInfo/GetServerpartServiceSummary', params)
if (data.Result_Code !== 100) {
return data
}
return data.Result_Data
}
// 获取经营品牌结构分析
export async function handleGetBrandStructureAnalysis(params: any) {
const data: any = await requestPos.post('/BaseInfo/GetBrandStructureAnalysis', params)
if (data.Result_Code !== 100) {
return data
}
return data.Result_Data.List
}
// 获取供应商的数据
export async function handleGetSupplierList(params: any) {
const data: any = await requestPos.post('/SupplyChain/GetSupplierList', params)
if (data.Result_Code !== 100) {
return data
}
return data.Result_Data.List
}

View File

@ -342,6 +342,22 @@
/* Safari 兼容 */ /* Safari 兼容 */
} }
.FestivalBox {
padding-right: 20px;
.festivalSelect {
.el-select__wrapper {
// background-color: #122849;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(78, 173, 245, 0.2) 100%);
.el-select__selection {
.el-select__selected-item {
color: #fff;
}
}
}
}
}
} }
} }

View File

@ -46,7 +46,7 @@ const instance = axios.create({
baseURL: 'https://api.eshangtech.com/EShangApiMain', // 默认请求前缀 baseURL: 'https://api.eshangtech.com/EShangApiMain', // 默认请求前缀
timeout: 60000, // 请求超时时间 timeout: 60000, // 请求超时时间
headers: { headers: {
"provincecode": "340000", "provincecode": "530000",
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}); });

View File

@ -46,7 +46,7 @@ const instance = axios.create({
baseURL: 'https://api.eshangtech.com/', // 默认请求前缀 baseURL: 'https://api.eshangtech.com/', // 默认请求前缀
timeout: 60000, // 请求超时时间 timeout: 60000, // 请求超时时间
headers: { headers: {
"provincecode": "340000", "provincecode": "530000",
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}); });

View File

@ -48,7 +48,7 @@ const instance = axios.create({
baseURL: 'http://10.104.1.35:57868', // 默认请求前缀 baseURL: 'http://10.104.1.35:57868', // 默认请求前缀
timeout: 60000, // 请求超时时间 timeout: 60000, // 请求超时时间
headers: { headers: {
"provincecode": "340000", "provincecode": "530000",
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}); });

View File

@ -45,7 +45,7 @@ const instance = axios.create({
// baseURL: 'http://10.104.1.161:8070/platform/', // 默认请求前缀 // baseURL: 'http://10.104.1.161:8070/platform/', // 默认请求前缀
timeout: 60000, // 请求超时时间 timeout: 60000, // 请求超时时间
headers: { headers: {
"provincecode": "340000", "provincecode": "530000",
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
}); });

View File

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