update
This commit is contained in:
ylj20011123
parent
77aa9d2251
commit
8d08edf247
@ -37,6 +37,8 @@ const tabList = [
|
|||||||
// 选择的tab
|
// 选择的tab
|
||||||
let selectTab = ref<number>(1)
|
let selectTab = ref<number>(1)
|
||||||
// 应收账款预警
|
// 应收账款预警
|
||||||
|
let AccountsReceivableWarning2 = ref<any>()
|
||||||
|
// 合同到期预警
|
||||||
let AccountsReceivableWarning = ref<any>()
|
let AccountsReceivableWarning = ref<any>()
|
||||||
// 图例列表
|
// 图例列表
|
||||||
let legendList = ref<any>([])
|
let legendList = ref<any>([])
|
||||||
@ -50,7 +52,7 @@ onMounted(async () => {
|
|||||||
// 获取数据
|
// 获取数据
|
||||||
const handleGetData = async () => {
|
const handleGetData = async () => {
|
||||||
let category: string[] = []
|
let category: string[] = []
|
||||||
let seriesData: number[] = []
|
let seriesData: any = []
|
||||||
let realData: string[] = []
|
let realData: string[] = []
|
||||||
|
|
||||||
const req: any = {
|
const req: any = {
|
||||||
@ -63,14 +65,15 @@ const handleGetData = async () => {
|
|||||||
|
|
||||||
// 应收账款预警
|
// 应收账款预警
|
||||||
let ArrearageList = data.ArrearageList
|
let ArrearageList = data.ArrearageList
|
||||||
|
data.Arrearage_Amount = Number(data.Arrearage_Amount.toFixed(2)).toLocaleString()
|
||||||
AccountsReceivableWarning.value = data
|
AccountsReceivableWarning2.value = data
|
||||||
|
|
||||||
|
|
||||||
if (ArrearageList && ArrearageList.length > 0) {
|
if (ArrearageList && ArrearageList.length > 0) {
|
||||||
ArrearageList.forEach((item: any) => {
|
ArrearageList.forEach((item: any) => {
|
||||||
category.push(item.Overdue_Situation)
|
category.push(item.Overdue_Situation)
|
||||||
seriesData.push(item.Arrearage_Amount)
|
// seriesData.push(item.ArrearageContract_Count)
|
||||||
|
seriesData.push({ name: item.Overdue_Situation, value: item.ArrearageContract_Count })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -111,7 +114,7 @@ const handleHaveFirstPie = async () => {
|
|||||||
},
|
},
|
||||||
formatter: function (params: any) {
|
formatter: function (params: any) {
|
||||||
return `
|
return `
|
||||||
<div style="font-weight:bold">${params.name} ${params.value}%</div>
|
<div style="font-weight:bold">${params.name} ${params.value}份</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -259,16 +262,18 @@ const handleHaveSecond = async () => {
|
|||||||
|
|
||||||
myChart2.setOption(option);
|
myChart2.setOption(option);
|
||||||
myChart2.resize();
|
myChart2.resize();
|
||||||
window.addEventListener('resize', resizeChart);
|
window.addEventListener('resize', resizeChart2);
|
||||||
}
|
}
|
||||||
|
|
||||||
const resizeChart = () => {
|
const resizeChart = () => {
|
||||||
myChart?.resize();
|
myChart?.resize();
|
||||||
|
};
|
||||||
|
const resizeChart2 = () => {
|
||||||
myChart2?.resize();
|
myChart2?.resize();
|
||||||
};
|
};
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
window.removeEventListener('resize', resizeChart);
|
window.removeEventListener('resize', resizeChart);
|
||||||
|
window.removeEventListener('resize', resizeChart2);
|
||||||
myChart?.dispose();
|
myChart?.dispose();
|
||||||
myChart2?.dispose();
|
myChart2?.dispose();
|
||||||
});
|
});
|
||||||
@ -298,7 +303,7 @@ onBeforeUnmount(() => {
|
|||||||
<div class="progressPieTopItemLabel">应收欠款(全部)</div>
|
<div class="progressPieTopItemLabel">应收欠款(全部)</div>
|
||||||
<div class="progressPieTopItemValueBox">
|
<div class="progressPieTopItemValueBox">
|
||||||
<span class="progressPieTopItemValue">{{
|
<span class="progressPieTopItemValue">{{
|
||||||
AccountsReceivableWarning?.Arrearage_Amount || '-' }}</span>
|
AccountsReceivableWarning2?.Arrearage_Amount || '-' }}</span>
|
||||||
<span class="progressPieTopItemUnit">万元</span>
|
<span class="progressPieTopItemUnit">万元</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -306,7 +311,7 @@ onBeforeUnmount(() => {
|
|||||||
<div class="progressPieTopItemLabel">欠款合同</div>
|
<div class="progressPieTopItemLabel">欠款合同</div>
|
||||||
<div class="progressPieTopItemValueBox">
|
<div class="progressPieTopItemValueBox">
|
||||||
<span class="progressPieTopItemValue">{{
|
<span class="progressPieTopItemValue">{{
|
||||||
AccountsReceivableWarning?.ArrearageContract_Count || '-' }}</span>
|
AccountsReceivableWarning2?.ArrearageContract_Count || '-' }}</span>
|
||||||
<span class="progressPieTopItemUnit">份</span>
|
<span class="progressPieTopItemUnit">份</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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()
|
||||||
@ -19,7 +19,7 @@ const handleGetData = async () => {
|
|||||||
DataType: 1,
|
DataType: 1,
|
||||||
StartMonth: "202501",
|
StartMonth: "202501",
|
||||||
EndMonth: "202501",
|
EndMonth: "202501",
|
||||||
provinceCode: "340000",
|
provinceCode: "530000",
|
||||||
}
|
}
|
||||||
|
|
||||||
const data = await handleGetExamineResultList(req)
|
const data = await handleGetExamineResultList(req)
|
||||||
|
|||||||
@ -36,10 +36,10 @@ onMounted(async () => {
|
|||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
legend: {
|
legend: {
|
||||||
selectedMode: false,
|
// selectedMode: false,
|
||||||
right: 0,
|
right: 0,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#666',
|
color: '#fff',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
padding: [0, 0, 0, 5]
|
padding: [0, 0, 0, 5]
|
||||||
},
|
},
|
||||||
|
|||||||
@ -72,11 +72,10 @@ const handleGoMounted = async () => {
|
|||||||
itemWidth: 12, // 图例标记宽度
|
itemWidth: 12, // 图例标记宽度
|
||||||
itemHeight: 12, // 图例标记高度
|
itemHeight: 12, // 图例标记高度
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#666', // 文字颜色
|
color: '#fff', // 文字颜色
|
||||||
rich: {
|
rich: {
|
||||||
// 可以在这里添加富文本样式
|
// 可以在这里添加富文本样式
|
||||||
value: {
|
value: {
|
||||||
color: '#333',
|
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
padding: [0, 0, 0, 5] // 文字间距
|
padding: [0, 0, 0, 5] // 文字间距
|
||||||
}
|
}
|
||||||
|
|||||||
@ -67,11 +67,13 @@
|
|||||||
|
|
||||||
.BusinessCaseRightItem {
|
.BusinessCaseRightItem {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.rightItemLeft {
|
.BusinessCaseRightItemTop {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
.rightItemTitle {
|
.rightItemTitle {
|
||||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -82,10 +84,26 @@
|
|||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rightItemBottom {
|
.rightItemUpdate {
|
||||||
margin-top: 8px;
|
font-family: Inter, Inter;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #78828E;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.BusinessCaseRightItemBottom {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 8px;
|
||||||
|
|
||||||
|
.BusinessCaseItemBottomLeft {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: flex-end;
|
||||||
|
|
||||||
.compareTitle {
|
.compareTitle {
|
||||||
font-family: Inter, Inter;
|
font-family: Inter, Inter;
|
||||||
@ -98,50 +116,142 @@
|
|||||||
|
|
||||||
.changeBox {
|
.changeBox {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
.changeIcon {
|
.changeIcon {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.changeText {
|
.changeText {
|
||||||
font-family: Microsoft YaHei, Microsoft YaHei;
|
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 10px;
|
font-size: 12px;
|
||||||
color: #00FF00;
|
color: #00FF00;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
.BusinessCaseItemBottomRight {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
.rightItemRight {
|
.BusinessCaseRevenueValue {
|
||||||
display: flex;
|
font-family: Impact, Impact;
|
||||||
align-items: center;
|
font-weight: 400;
|
||||||
|
font-size: 25px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: right;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
.BusinessCaseRevenueValue {
|
.BusinessCaseRevenueUnit {
|
||||||
font-family: Impact, Impact;
|
font-family: Inter, Inter;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 25px;
|
font-size: 12px;
|
||||||
color: #FFFFFF;
|
color: #788390;
|
||||||
letter-spacing: 2px;
|
text-align: right;
|
||||||
text-align: right;
|
font-style: normal;
|
||||||
font-style: normal;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.BusinessCaseRevenueUnit {
|
|
||||||
font-family: Inter, Inter;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #788390;
|
|
||||||
text-align: right;
|
|
||||||
font-style: normal;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// .rightItemLeft {
|
||||||
|
// .rightItemTitleBox {
|
||||||
|
// width: 100%;
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// justify-content: space-between;
|
||||||
|
|
||||||
|
// .rightItemTitle {
|
||||||
|
// font-family: Microsoft YaHei, Microsoft YaHei;
|
||||||
|
// font-weight: 400;
|
||||||
|
// font-size: 14px;
|
||||||
|
// color: #FFFFFF;
|
||||||
|
// text-align: left;
|
||||||
|
// font-style: normal;
|
||||||
|
// margin-top: 5px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .rightItemUpdate {
|
||||||
|
// font-family: Inter, Inter;
|
||||||
|
// font-weight: 400;
|
||||||
|
// font-size: 12px;
|
||||||
|
// color: #FFFFFF;
|
||||||
|
// text-align: left;
|
||||||
|
// font-style: normal;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// .rightItemBottom {
|
||||||
|
// margin-top: 8px;
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
|
||||||
|
// .compareTitle {
|
||||||
|
// font-family: Inter, Inter;
|
||||||
|
// font-weight: 400;
|
||||||
|
// font-size: 12px;
|
||||||
|
// color: #78828E;
|
||||||
|
// text-align: left;
|
||||||
|
// font-style: normal;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .changeBox {
|
||||||
|
// margin-left: 5px;
|
||||||
|
|
||||||
|
// .changeIcon {
|
||||||
|
// width: 6px;
|
||||||
|
// height: 8px;
|
||||||
|
// margin-right: 2px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .changeText {
|
||||||
|
// font-family: Microsoft YaHei, Microsoft YaHei;
|
||||||
|
// font-weight: 400;
|
||||||
|
// font-size: 10px;
|
||||||
|
// color: #00FF00;
|
||||||
|
// text-align: left;
|
||||||
|
// font-style: normal;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// .rightItemRight {
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
|
||||||
|
// .BusinessCaseRevenueValue {
|
||||||
|
// font-family: Impact, Impact;
|
||||||
|
// font-weight: 400;
|
||||||
|
// font-size: 25px;
|
||||||
|
// color: #FFFFFF;
|
||||||
|
// letter-spacing: 2px;
|
||||||
|
// text-align: right;
|
||||||
|
// font-style: normal;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .BusinessCaseRevenueUnit {
|
||||||
|
// font-family: Inter, Inter;
|
||||||
|
// font-weight: 400;
|
||||||
|
// font-size: 12px;
|
||||||
|
// color: #788390;
|
||||||
|
// text-align: right;
|
||||||
|
// font-style: normal;
|
||||||
|
// margin-left: 10px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -16,6 +16,8 @@ import {
|
|||||||
TransformComponent // 如果使用 dataset.source 需要此组件
|
TransformComponent // 如果使用 dataset.source 需要此组件
|
||||||
} from 'echarts/components';
|
} from 'echarts/components';
|
||||||
import { CanvasRenderer } from 'echarts/renderers';
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
|
import addIcon from '../../../../assets/image/addIcon.png'
|
||||||
|
import reduce from '../../../../assets/image/reduce.png'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -47,6 +49,8 @@ let selectTab = ref<number>(1)
|
|||||||
|
|
||||||
// 当前请求来的实际数据
|
// 当前请求来的实际数据
|
||||||
let realData = ref<any>()
|
let realData = ref<any>()
|
||||||
|
// 请求到的整个数据
|
||||||
|
let getAllData = ref<any>()
|
||||||
|
|
||||||
// 传入的数据
|
// 传入的数据
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
@ -78,7 +82,6 @@ const handleChangeTab = async (value: number) => {
|
|||||||
|
|
||||||
// 拿到数据的方法
|
// 拿到数据的方法
|
||||||
const handleGetData = async () => {
|
const handleGetData = async () => {
|
||||||
|
|
||||||
const req: any = {
|
const req: any = {
|
||||||
ProvinceCode: "340000",
|
ProvinceCode: "340000",
|
||||||
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
|
StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
|
||||||
@ -88,6 +91,8 @@ const handleGetData = async () => {
|
|||||||
const data = await handleCodeGetRevenueCompare(req)
|
const data = await handleCodeGetRevenueCompare(req)
|
||||||
console.log('djsakjdaskldjasoifioad', data);
|
console.log('djsakjdaskldjasoifioad', data);
|
||||||
|
|
||||||
|
getAllData.value = data
|
||||||
|
|
||||||
// 营收金额
|
// 营收金额
|
||||||
let category: any = ['product']
|
let category: any = ['product']
|
||||||
let monthList: number[] = []
|
let monthList: number[] = []
|
||||||
@ -110,7 +115,7 @@ const handleGetData = async () => {
|
|||||||
let list: any = [`${item}月`]
|
let list: any = [`${item}月`]
|
||||||
data.RevenueAmountList.forEach((subItem: any) => {
|
data.RevenueAmountList.forEach((subItem: any) => {
|
||||||
let newData: any = subItem.data
|
let newData: any = subItem.data
|
||||||
list.push(newData[item - 1][1])
|
list.push(Number(((newData[item - 1][1]) / 10000).toFixed(2)))
|
||||||
})
|
})
|
||||||
res.push(list)
|
res.push(list)
|
||||||
})
|
})
|
||||||
@ -123,7 +128,7 @@ const handleGetData = async () => {
|
|||||||
let list: any = [`${item}月`]
|
let list: any = [`${item}月`]
|
||||||
data.TicketCountList.forEach((subItem: any) => {
|
data.TicketCountList.forEach((subItem: any) => {
|
||||||
let newData: any = subItem.data
|
let newData: any = subItem.data
|
||||||
list.push(newData[item - 1][1])
|
list.push(Number(((newData[item - 1][1]) / 10000).toFixed(2)))
|
||||||
})
|
})
|
||||||
res2.push(list)
|
res2.push(list)
|
||||||
})
|
})
|
||||||
@ -180,13 +185,13 @@ const handleGetBottomData = async () => {
|
|||||||
|
|
||||||
if (data && data.length > 0) {
|
if (data && data.length > 0) {
|
||||||
data.forEach((item: any) => {
|
data.forEach((item: any) => {
|
||||||
currentYear.push(item.value)
|
currentYear.push(Number((Number(item.value) / 10000).toFixed(2)))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (yesData && yesData.length > 0) {
|
if (yesData && yesData.length > 0) {
|
||||||
yesData.forEach((item: any) => {
|
yesData.forEach((item: any) => {
|
||||||
lastYear.push(item.value)
|
lastYear.push(Number((Number(item.value) / 10000).toFixed(2)))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -202,6 +207,9 @@ const handleGetBottomData = async () => {
|
|||||||
const handleShowData = async (value: number) => {
|
const handleShowData = async (value: number) => {
|
||||||
let data = realData.value[value]
|
let data = realData.value[value]
|
||||||
|
|
||||||
|
console.log('fjidufasdhfsdjfsdn', data);
|
||||||
|
|
||||||
|
|
||||||
const chartDom = document.getElementById('featureAnalysis');
|
const chartDom = document.getElementById('featureAnalysis');
|
||||||
if (!chartDom) return;
|
if (!chartDom) return;
|
||||||
|
|
||||||
@ -221,16 +229,36 @@ const handleShowData = async (value: number) => {
|
|||||||
type: 'category',
|
type: 'category',
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
interval: 0,
|
interval: 0,
|
||||||
|
color: '#fff',
|
||||||
|
formatter: '{value}' // 刻度值保持纯数字
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false // 隐藏刻度小线条
|
show: false // 隐藏刻度小线条
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
splitLine: { show: false },
|
name: `${selectTab.value === 1 ? '营收金额(万元)' : selectTab.value === 2 ? '客单量(万笔)' : selectTab.value === 3 ? '客单均价(元)' : ''}`,
|
||||||
|
splitLine: { show: false }, // 隐藏网格线
|
||||||
|
axisLine: {
|
||||||
|
show: true, // 显示Y轴线
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 轴线颜色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false // 隐藏刻度线（短横线）
|
||||||
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
width: 40,
|
color: '#fff'
|
||||||
overflow: 'truncate',
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff', // 名称颜色
|
||||||
|
padding: [0, 0, 0, 20] // 名称位置调整
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
series: [{
|
series: [{
|
||||||
@ -288,26 +316,42 @@ const handleShowBottomData = async (res: any) => {
|
|||||||
boundaryGap: true,
|
boundaryGap: true,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
interval: 0,
|
interval: 0,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false // 隐藏刻度小线条
|
show: false // 隐藏刻度小线条
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
|
name: `${selectTab.value === 1 ? '营收金额(万元)' : selectTab.value === 2 ? '客单量(万笔)' : selectTab.value === 3 ? '客单均价(元)' : ''}`,
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff', // 名称颜色
|
||||||
|
padding: [0, 0, 0, 20] // 名称位置调整
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '10', // 增加左侧空间
|
left: '10', // 增加左侧空间
|
||||||
right: '10', // 增加右侧空间
|
right: '10', // 增加右侧空间
|
||||||
bottom: '0',
|
bottom: '0',
|
||||||
top: '10',
|
top: '30',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
@ -342,10 +386,9 @@ const handleShowBottomData = async (res: any) => {
|
|||||||
type: 'line' // 改为线条指示器
|
type: 'line' // 改为线条指示器
|
||||||
},
|
},
|
||||||
formatter: function (params: any) {
|
formatter: function (params: any) {
|
||||||
console.log('paramsparamsparams', params);
|
|
||||||
return `${params.map((item: any) => {
|
return `${params.map((item: any) => {
|
||||||
return `<div>
|
return `<div>
|
||||||
${item.seriesName}：${item.value}元
|
${item.seriesName}：${item.value}万元
|
||||||
</div>`
|
</div>`
|
||||||
}).join("")}`
|
}).join("")}`
|
||||||
}
|
}
|
||||||
@ -398,22 +441,60 @@ onBeforeUnmount(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="BusinessCaseRightItem">
|
<div class="BusinessCaseRightItem">
|
||||||
<div class="rightItemLeft">
|
<div class="BusinessCaseRightItemTop">
|
||||||
<div class="rightItemTitle">营收同比</div>
|
<div class="rightItemTitle">营收同比</div>
|
||||||
|
<div class="rightItemUpdate">{{ moment().subtract(1, 'd').format('YYYY-MM-DD') }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="BusinessCaseRightItemBottom">
|
||||||
|
<div class="BusinessCaseItemBottomLeft">
|
||||||
|
<div class="compareTitle">相比去年同日</div>
|
||||||
|
<div class="changeBox">
|
||||||
|
<img class="changeIcon" :src="selectTab === 1 ? getAllData?.RevenueAmountYOYRate > 0 ? addIcon : reduce :
|
||||||
|
selectTab === 2 ? getAllData?.TicketCountYOYRate > 0 ? addIcon : reduce :
|
||||||
|
selectTab === 3 ? getAllData?.AvgTicketAmountRate > 0 ? addIcon : reduce : ''
|
||||||
|
" />
|
||||||
|
<div class="changeText" :style="{
|
||||||
|
color: selectTab === 1 ? getAllData?.RevenueAmountYOYRate > 0 ? '#00FF00' : '#D24343' :
|
||||||
|
selectTab === 2 ? getAllData?.TicketCountYOYRate > 0 ? '#00FF00' : '#D24343' :
|
||||||
|
selectTab === 3 ? getAllData?.AvgTicketAmountRate > 0 ? '#00FF00' : '#D24343' : ''
|
||||||
|
}">{{
|
||||||
|
selectTab === 1 ? getAllData?.RevenueAmountYOYRate :
|
||||||
|
selectTab === 2 ? getAllData?.TicketCountYOYRate :
|
||||||
|
selectTab === 3 ? getAllData?.AvgTicketAmountRate : ''
|
||||||
|
}}%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="BusinessCaseItemBottomRight">
|
||||||
|
<div class="BusinessCaseRevenueValue">{{ selectTab === 1 ?
|
||||||
|
getAllData?.RevenueAmount.toLocaleString() :
|
||||||
|
selectTab
|
||||||
|
=== 2 ?
|
||||||
|
getAllData?.TicketCount.toLocaleString() : selectTab === 3 ?
|
||||||
|
getAllData?.AvgTicketAmount.toLocaleString() : ''
|
||||||
|
}}</div>
|
||||||
|
<div class="BusinessCaseRevenueUnit">{{ selectTab===2?'笔':'元' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="rightItemLeft">
|
||||||
|
<div class="rightItemTitleBox">
|
||||||
|
<div class="rightItemTitle">营收同比</div>
|
||||||
|
<div class="rightItemUpdate">{{ moment().subtract(1, 'd').format('YYYY-MM-DD') }}</div>
|
||||||
|
</div>
|
||||||
<div class="rightItemBottom">
|
<div class="rightItemBottom">
|
||||||
<div class="compareTitle">相比去年同日</div>
|
<div class="compareTitle">相比去年同日</div>
|
||||||
<div class="changeBox">
|
<div class="changeBox">
|
||||||
<img class="changeIcon" />
|
<img class="changeIcon" />
|
||||||
<!-- >0 #00FF00 <0 #FF0000 -->
|
|
||||||
<div class="changeText"></div>
|
<div class="changeText"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<div class="rightItemRight">
|
<!-- <div class="rightItemRight">
|
||||||
<div class="BusinessCaseRevenueValue">3,329,828.91</div>
|
<div class="BusinessCaseRevenueValue"></div>
|
||||||
<div class="BusinessCaseRevenueUnit">元</div>
|
<div class="BusinessCaseRevenueUnit">元</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -61,9 +61,10 @@ onMounted(async () => {
|
|||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '车流量',
|
name: '车流量(辆)',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#ffffff' // Y轴名称颜色
|
color: '#ffffff', // Y轴名称颜色
|
||||||
|
padding: [0, 0, 0, 20]
|
||||||
},
|
},
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
axisLine: {
|
axisLine: {
|
||||||
@ -73,15 +74,18 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#00F6FF',
|
color: '#fff',
|
||||||
formatter: '{value}' // 添加单位
|
formatter: '{value}' // 添加单位
|
||||||
}
|
},
|
||||||
|
offset: 0, // 确保Y轴紧贴图表
|
||||||
|
splitNumber: 4,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '客单量',
|
name: '客单量(笔)',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#ffffff' // Y轴名称颜色
|
color: '#ffffff', // Y轴名称颜色
|
||||||
|
padding: [0, 0, 0, 0]
|
||||||
},
|
},
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
position: 'right',
|
position: 'right',
|
||||||
@ -94,7 +98,8 @@ onMounted(async () => {
|
|||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#ffffff',
|
color: '#ffffff',
|
||||||
},
|
},
|
||||||
offset: 0 // 确保Y轴紧贴图表
|
offset: 0, // 确保Y轴紧贴图表
|
||||||
|
splitNumber: 4,
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
grid: {
|
grid: {
|
||||||
@ -148,25 +153,31 @@ onMounted(async () => {
|
|||||||
type: 'line' // 改为线条指示器
|
type: 'line' // 改为线条指示器
|
||||||
},
|
},
|
||||||
formatter: function (params: any) {
|
formatter: function (params: any) {
|
||||||
console.log('paramsparamsparams', params);
|
console.log('paramsparamsparamsparams', params);
|
||||||
console.log('resresresres', res);
|
|
||||||
let toolStr: string[] = []
|
|
||||||
if (params && params.length > 0) {
|
|
||||||
params.forEach((item: any) => {
|
|
||||||
toolStr.push(
|
|
||||||
`${item.seriesName}：${item.value}元`
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return `
|
return `<div>
|
||||||
<div>
|
<div>${params[0].name}时：</div>
|
||||||
<div>${res.category[params[0].dataIndex]}时</div>
|
<div>车流量：${params[0]?.value}辆</div>
|
||||||
${toolStr.map((item: string) => {
|
<div>客单量：${params[1]?.value}笔</div>
|
||||||
return `<div>${item}</div>`
|
</div>`
|
||||||
})}
|
|
||||||
</div>
|
// let toolStr: string[] = []
|
||||||
`
|
// if (params && params.length > 0) {
|
||||||
|
// params.forEach((item: any) => {
|
||||||
|
// toolStr.push(
|
||||||
|
// `${item.seriesName}：${item.value}元`
|
||||||
|
// )
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return `
|
||||||
|
// <div>
|
||||||
|
// <div>${res.category[params[0].dataIndex]}时</div>
|
||||||
|
// ${toolStr.map((item: string) => {
|
||||||
|
// return `<div>${item}</div>`
|
||||||
|
// })}
|
||||||
|
// </div>
|
||||||
|
// `
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -187,10 +198,13 @@ const handleGetData = async () => {
|
|||||||
|
|
||||||
const req: any = {
|
const req: any = {
|
||||||
Province_Code: '530000',
|
Province_Code: '530000',
|
||||||
|
// Province_Code: '340000',
|
||||||
Statistics_Date: moment().subtract(1, 'd').format('YYYY-MM-DD'),
|
Statistics_Date: moment().subtract(1, 'd').format('YYYY-MM-DD'),
|
||||||
Serverpart_ID: ''
|
Serverpart_ID: ''
|
||||||
}
|
}
|
||||||
const data = await handleGetTransactionConvert(req)
|
const data = await handleGetTransactionConvert(req)
|
||||||
|
console.log('jfidsafuidsopfjsdflksjdfds', data);
|
||||||
|
|
||||||
|
|
||||||
let carList = data.BayonetList.data
|
let carList = data.BayonetList.data
|
||||||
|
|
||||||
@ -198,7 +212,7 @@ const handleGetData = async () => {
|
|||||||
|
|
||||||
if (carList && carList.length > 0) {
|
if (carList && carList.length > 0) {
|
||||||
carList.forEach((item: any) => {
|
carList.forEach((item: any) => {
|
||||||
carResList.push((item[1]).toLocaleString())
|
carResList.push((item[1]))
|
||||||
carRealResList.push(item[1])
|
carRealResList.push(item[1])
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -206,7 +220,7 @@ const handleGetData = async () => {
|
|||||||
if (orderList && orderList.length > 0) {
|
if (orderList && orderList.length > 0) {
|
||||||
orderList.forEach((item: any) => {
|
orderList.forEach((item: any) => {
|
||||||
category.push(item[0])
|
category.push(item[0])
|
||||||
orderResList.push((item[1]).toLocaleString())
|
orderResList.push((item[1]))
|
||||||
orderRealResList.push(item[1])
|
orderRealResList.push(item[1])
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -220,6 +234,9 @@ const handleGetData = async () => {
|
|||||||
orderResList: orderResList,
|
orderResList: orderResList,
|
||||||
orderRealResList: orderRealResList
|
orderRealResList: orderRealResList
|
||||||
}
|
}
|
||||||
|
console.log('resresresresres', res);
|
||||||
|
|
||||||
|
|
||||||
return res
|
return res
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -37,10 +37,9 @@ onMounted(async () => {
|
|||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
legend: {
|
legend: {
|
||||||
selectedMode: false,
|
|
||||||
right: 0,
|
right: 0,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#666',
|
color: '#fff',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
padding: [0, 0, 0, 5]
|
padding: [0, 0, 0, 5]
|
||||||
},
|
},
|
||||||
@ -55,14 +54,36 @@ onMounted(async () => {
|
|||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: "%",
|
name: "%",
|
||||||
splitLine: { show: false } // 隐藏刻度线
|
show: true, // 显式启用 Y 轴（即使默认也建议写上）
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff', // 确保名称颜色可见
|
||||||
|
padding: [0, 0, 0, 0] // 调整名称位置
|
||||||
|
},
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
interval: 0,
|
||||||
|
show: true // 显式启用刻度标签
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true, // 显式启用轴线
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: res.category,
|
data: res.category,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
interval: 0 // 强制显示所有标签
|
interval: 0 // 强制显示所有标签
|
||||||
}
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: res.seriesData,
|
series: res.seriesData,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
|||||||
@ -58,7 +58,8 @@ onMounted(async () => {
|
|||||||
type: 'value',
|
type: 'value',
|
||||||
name: '客单占比(%)',
|
name: '客单占比(%)',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#fff' // Y轴名称颜色
|
color: '#fff', // Y轴名称颜色
|
||||||
|
padding: [0, 0, 0, 20]
|
||||||
},
|
},
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
axisLine: {
|
axisLine: {
|
||||||
|
|||||||
@ -48,8 +48,6 @@ onMounted(async () => {
|
|||||||
// type: 'shadow' // 阴影指示器（适合柱状图）
|
// type: 'shadow' // 阴影指示器（适合柱状图）
|
||||||
// },
|
// },
|
||||||
formatter: function (params: any) { // 自定义提示框内容
|
formatter: function (params: any) { // 自定义提示框内容
|
||||||
console.log('params', params);
|
|
||||||
|
|
||||||
return `<div>
|
return `<div>
|
||||||
<div>男性：${res.seriesDataMan[params.dataIndex]}%</div>
|
<div>男性：${res.seriesDataMan[params.dataIndex]}%</div>
|
||||||
<div>女性：${res.seriesDataWoman[params.dataIndex]}%</div>
|
<div>女性：${res.seriesDataWoman[params.dataIndex]}%</div>
|
||||||
@ -65,6 +63,13 @@ onMounted(async () => {
|
|||||||
axisLabel: {
|
axisLabel: {
|
||||||
interval: 0, // 强制显示所有标签
|
interval: 0, // 强制显示所有标签
|
||||||
hideOverlap: false, // 禁止自动隐藏重叠标签
|
hideOverlap: false, // 禁止自动隐藏重叠标签
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
},
|
},
|
||||||
axisTick: {
|
axisTick: {
|
||||||
alignWithLabel: true // 保证刻度线与标签对齐
|
alignWithLabel: true // 保证刻度线与标签对齐
|
||||||
@ -76,6 +81,12 @@ onMounted(async () => {
|
|||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
},
|
},
|
||||||
splitNumber: 4
|
splitNumber: 4
|
||||||
},
|
},
|
||||||
|
|||||||
@ -62,7 +62,7 @@ const handleShowCharts = async () => {
|
|||||||
left: '0',
|
left: '0',
|
||||||
right: '10',
|
right: '10',
|
||||||
bottom: '0',
|
bottom: '0',
|
||||||
top: '10',
|
top: '30',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
@ -89,6 +89,7 @@ const handleShowCharts = async () => {
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
|
name: '交易额(元)',
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
formatter: '{value}'
|
formatter: '{value}'
|
||||||
|
|||||||
@ -44,6 +44,15 @@ watch(
|
|||||||
{ deep: true }
|
{ deep: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
// 监听传入的节日
|
||||||
|
watch(
|
||||||
|
() => props.FestivalValue,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
handleGoMounted()
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
// 初始运行的方法
|
// 初始运行的方法
|
||||||
const handleGoMounted = async () => {
|
const handleGoMounted = async () => {
|
||||||
const res: any = await handleGetData()
|
const res: any = await handleGetData()
|
||||||
@ -52,7 +61,6 @@ const handleGoMounted = async () => {
|
|||||||
if (!chartDom) return;
|
if (!chartDom) return;
|
||||||
|
|
||||||
myChart = echarts.init(chartDom);
|
myChart = echarts.init(chartDom);
|
||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
legend: {
|
legend: {
|
||||||
data: ['今年', '去年'], // 对应 series 中的 name
|
data: ['今年', '去年'], // 对应 series 中的 name
|
||||||
@ -68,14 +76,31 @@ const handleGoMounted = async () => {
|
|||||||
type: 'category',
|
type: 'category',
|
||||||
data: res.category,
|
data: res.category,
|
||||||
boundaryGap: true,
|
boundaryGap: true,
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
formatter: '{value}' // 刻度值保持纯数字
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
name: '万元',
|
||||||
splitLine: { show: false },
|
splitLine: { show: false },
|
||||||
|
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
formatter: '{value}' // 刻度值保持纯数字
|
||||||
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
show: true,
|
||||||
}
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: '10', // 增加左侧空间
|
left: '10', // 增加左侧空间
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 20px 64px 18px;
|
padding: 20px 54px 18px;
|
||||||
|
|
||||||
.GenderCustomerGroupUnit {
|
.GenderCustomerGroupUnit {
|
||||||
font-family: "Microsoft YaHei";
|
font-family: "Microsoft YaHei";
|
||||||
@ -29,8 +29,8 @@
|
|||||||
height: 145px;
|
height: 145px;
|
||||||
|
|
||||||
.GenderCustomerGroup {
|
.GenderCustomerGroup {
|
||||||
width: 86px;
|
width: 106px;
|
||||||
height: 86px;
|
height: 145px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.legendBox {
|
.legendBox {
|
||||||
|
|||||||
@ -62,7 +62,7 @@ onMounted(async () => {
|
|||||||
height: 43
|
height: 43
|
||||||
},
|
},
|
||||||
left: 'center',
|
left: 'center',
|
||||||
top: 'center',
|
top: '21',
|
||||||
z: 10
|
z: 10
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -71,10 +71,9 @@ onMounted(async () => {
|
|||||||
{
|
{
|
||||||
name: 'Access From',
|
name: 'Access From',
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['80%', '100%'],
|
radius: ['60%', '80%'],
|
||||||
center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
center: ['50%', '30%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: function (params: any) {
|
color: function (params: any) {
|
||||||
// 自定义颜色列表
|
// 自定义颜色列表
|
||||||
@ -91,7 +90,19 @@ onMounted(async () => {
|
|||||||
},
|
},
|
||||||
data: res.seriesData
|
data: res.seriesData
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
legend: {
|
||||||
|
data: ['男性', '女性'],
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
orient: 'horizontal', // 水平排列（默认值，可省略）
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12,
|
||||||
|
itemGap: 10, // 调整图例项之间的间距
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@ -153,7 +164,7 @@ onBeforeUnmount(() => {
|
|||||||
<div class="GenderCustomerGroup" id="GenderCustomerGroup"></div>
|
<div class="GenderCustomerGroup" id="GenderCustomerGroup"></div>
|
||||||
|
|
||||||
|
|
||||||
<div class="legendBox">
|
<!-- <div class="legendBox">
|
||||||
<div class="legendBoxContent">
|
<div class="legendBoxContent">
|
||||||
<div class="legendItem">
|
<div class="legendItem">
|
||||||
<div class="legendIcon" style="background-color: #0094FF;"></div>
|
<div class="legendIcon" style="background-color: #0094FF;"></div>
|
||||||
@ -164,7 +175,7 @@ onBeforeUnmount(() => {
|
|||||||
<div class="legendName">女性</div>
|
<div class="legendName">女性</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import { onBeforeUnmount, onMounted, ref } from 'vue';
|
|||||||
import SmallTitle from '../smallTitle/smallTitle.vue'
|
import SmallTitle from '../smallTitle/smallTitle.vue'
|
||||||
import './MallOrderStatistics.less'
|
import './MallOrderStatistics.less'
|
||||||
import * as echarts from 'echarts/core';
|
import * as echarts from 'echarts/core';
|
||||||
import { BarChart } from 'echarts/charts';
|
import { LineChart } from 'echarts/charts';
|
||||||
import {
|
import {
|
||||||
GridComponent,
|
GridComponent,
|
||||||
TitleComponent,
|
TitleComponent,
|
||||||
@ -12,13 +12,14 @@ import {
|
|||||||
} from 'echarts/components';
|
} from 'echarts/components';
|
||||||
import { CanvasRenderer } from 'echarts/renderers';
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import { handleGetMallOrderSummary } from '../../service';
|
||||||
|
|
||||||
// 季月年的选中
|
// 季月年的选中
|
||||||
let selectType = ref<number>(1)
|
let selectType = ref<number>(1)
|
||||||
|
|
||||||
// 注册组件
|
// 注册组件
|
||||||
echarts.use([
|
echarts.use([
|
||||||
BarChart,
|
LineChart,
|
||||||
GridComponent,
|
GridComponent,
|
||||||
TitleComponent,
|
TitleComponent,
|
||||||
TooltipComponent,
|
TooltipComponent,
|
||||||
@ -39,55 +40,98 @@ onMounted(async () => {
|
|||||||
const option = {
|
const option = {
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00"],
|
data: res.category,
|
||||||
boundaryGap: true,
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // X轴线颜色
|
||||||
|
}
|
||||||
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
interval: 3, // 每隔 2 个显示一个（0,3,6...），因为索引从 0 开始
|
color: '#fff', // X轴标签颜色
|
||||||
showMinLabel: true, // 显示第一个标签
|
interval: 0,
|
||||||
showMaxLabel: true // 显示最后一个标签
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '交易笔数(笔)',
|
||||||
|
position: 'left',
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 左侧Y轴线颜色（与第一条折线颜色一致）
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff' // 左侧Y轴标签颜色
|
||||||
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff', // 左侧Y轴名称颜色
|
||||||
|
padding: [0, 0, 0, 20]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '交易金额(元)',
|
||||||
|
position: 'right',
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 右侧Y轴线颜色（与第二条折线颜色一致）
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff' // 右侧Y轴标签颜色
|
||||||
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff', // 右侧Y轴名称颜色
|
||||||
|
padding: [0, 0, 0, 0]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
],
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
splitLine: { show: false } // 隐藏刻度线
|
|
||||||
},
|
|
||||||
grid: {
|
grid: {
|
||||||
left: '10', // 左侧间距
|
left: '0', // 增加左侧空间给Y轴标签
|
||||||
right: '10', // 右侧间距
|
right: '10', // 增加右侧空间给Y轴标签
|
||||||
bottom: '0', // 底部间距
|
bottom: '0',
|
||||||
top: '10', // 顶部间距
|
top: '50',
|
||||||
containLabel: true // 确保坐标轴标签在grid内
|
containLabel: true
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 180, 200, 210, 300, 200, 180, 160, 30, 80, 90, 70, 45, 35, 67, 12].map((value: any, index: any) => {
|
name: '交易笔数',
|
||||||
return {
|
|
||||||
value: value,
|
|
||||||
// 只在显示标签的位置显示symbol
|
|
||||||
symbol: index % 3 === 0 ? 'circle' : 'none',
|
|
||||||
symbolSize: 6
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
realData: res.realData,
|
|
||||||
type: 'line',
|
type: 'line',
|
||||||
color: '#FF9500'
|
yAxisIndex: 0, // 关联左侧Y轴
|
||||||
|
data: res.TicketCountData,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '交易金额',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1, // 关联右侧Y轴
|
||||||
|
data: res.SellAmountData,
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
tooltip: { // 新增 tooltip 配置
|
tooltip: {
|
||||||
trigger: 'axis', // 触发类型：坐标轴触发
|
trigger: 'axis',
|
||||||
axisPointer: { // 坐标轴指示器配置
|
formatter: function (params: any) {
|
||||||
type: 'shadow' // 阴影指示器（适合柱状图）
|
|
||||||
},
|
|
||||||
formatter: function (params: any) { // 自定义提示框内容
|
|
||||||
// params 是数组，包含当前 hover 的所有系列数据
|
|
||||||
const data = params[0];
|
|
||||||
let realData = res.realData[params[0].dataIndex]
|
|
||||||
return `
|
return `
|
||||||
<div style="font-weight:bold">${data.name}</div>
|
<div style="font-weight:bold">${params[0].name}</div>
|
||||||
<div>车流量：${realData + '单'} </div>
|
<div >${params[0].seriesName}: ${params[0].value}笔</div>
|
||||||
|
<div >${params[1].seriesName}: ${params[1].value}元</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['交易笔数', '交易金额'],
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['#FF5E5E', '#FF9500']
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@ -105,14 +149,35 @@ const handleChangeType = async (value: number) => {
|
|||||||
const handleGetData = async () => {
|
const handleGetData = async () => {
|
||||||
|
|
||||||
let category: string[] = []
|
let category: string[] = []
|
||||||
let seriesData: number[] = []
|
let TicketCountData: number[] = [] // 订单笔数
|
||||||
let realData: string[] = []
|
let SellAmountData: string[] = [] // 交易金额
|
||||||
|
|
||||||
|
const req: any = {
|
||||||
|
DataType: 2,// 1 日度 2 月度
|
||||||
|
ProvinceCode: '530000',
|
||||||
|
StartMonth: moment().startOf('y').format('YYYYMM'),
|
||||||
|
EndMonth: moment().subtract(1, 'M').format('YYYYMM'),
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('dkosajdaihfysudafhs', req);
|
||||||
|
|
||||||
|
const data = await handleGetMallOrderSummary(req)
|
||||||
|
|
||||||
|
console.log('gjisayudshfsdafdfdasfasd', data);
|
||||||
|
|
||||||
|
if (data && data.length > 0) {
|
||||||
|
data.forEach((item: any) => {
|
||||||
|
category.push(item.StatisticsMonth)
|
||||||
|
TicketCountData.push(item.TicketCount)
|
||||||
|
SellAmountData.push(item.SellAmount)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
let res: any = {
|
let res: any = {
|
||||||
category: category,// x轴的内容
|
category: category,// x轴的内容
|
||||||
seriesData: seriesData,// y轴的数据
|
TicketCountData: TicketCountData,// 订单笔数
|
||||||
realData: realData// 真实数据
|
SellAmountData: SellAmountData// 交易金额
|
||||||
}
|
}
|
||||||
return res
|
return res
|
||||||
}
|
}
|
||||||
@ -132,16 +197,14 @@ onBeforeUnmount(() => {
|
|||||||
<template>
|
<template>
|
||||||
<div class="MallOrderStatisticsBox">
|
<div class="MallOrderStatisticsBox">
|
||||||
<SmallTitle :title="'商城订单统计'">
|
<SmallTitle :title="'商城订单统计'">
|
||||||
<template #extra>
|
<!-- <template #extra>
|
||||||
<div class="changeTypeBox">
|
<div class="changeTypeBox">
|
||||||
<div :class="selectType === 1 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
|
<div :class="selectType === 1 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
|
||||||
@click="handleChangeType(1)">月</div>
|
@click="handleChangeType(1)">月</div>
|
||||||
<div :class="selectType === 2 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
|
<div :class="selectType === 2 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
|
||||||
@click="handleChangeType(2)">季</div>
|
@click="handleChangeType(2)">年</div>
|
||||||
<div :class="selectType === 3 ? 'changeTypeItem selectChangeTypeItem' : 'changeTypeItem'"
|
|
||||||
@click="handleChangeType(3)">年</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template> -->
|
||||||
</SmallTitle>
|
</SmallTitle>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -27,7 +27,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.MerchantRatingRankingItemTopLeftIndex {
|
.MerchantRatingRankingItemIndex {
|
||||||
font-family: Impact, Impact;
|
font-family: Impact, Impact;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
@ -35,9 +35,16 @@
|
|||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
display: inline-block;
|
box-sizing: border-box;
|
||||||
padding: 1px 8px 2px 4px;
|
padding: 1px 8px 2px 4px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
background-image: url('../../../../assets/image/threeStBg.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MerchantRatingRankingItemIndexAfter {
|
||||||
|
background-image: url('../../../../assets/image/otherStBg.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.MerchantRatingRankingItemTopLeftName {
|
.MerchantRatingRankingItemTopLeftName {
|
||||||
|
|||||||
@ -12,7 +12,7 @@ import {
|
|||||||
import { CanvasRenderer } from 'echarts/renderers';
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
import './MerchantRatingRanking.less'
|
import './MerchantRatingRanking.less'
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { handleGetProvinceMonthAnalysis, handleGetSalesRank } from '../../service';
|
import { handleGetEvaluateResList, handleGetProvinceMonthAnalysis, handleGetSalesRank } from '../../service';
|
||||||
|
|
||||||
// 注册组件
|
// 注册组件
|
||||||
echarts.use([
|
echarts.use([
|
||||||
@ -126,22 +126,32 @@ onMounted(async () => {
|
|||||||
|
|
||||||
// 拿到热门商品榜单
|
// 拿到热门商品榜单
|
||||||
const handleGetData = async () => {
|
const handleGetData = async () => {
|
||||||
|
const req: any = {
|
||||||
let category: string[] = ["商品1", "商品2", "商品3", "商品4", "商品5"];
|
ProvinceCode: '530000',
|
||||||
let seriesData: number[] = [8.8, 7.5, 6.3, 5.2, 4.1];
|
RoleType: 1,
|
||||||
let realData: string[] = []
|
StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM')
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let res = {
|
|
||||||
category: category,// x轴的内容
|
|
||||||
seriesData: seriesData,// y轴的数据
|
|
||||||
realData: realData
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const data = await handleGetEvaluateResList(req)
|
||||||
|
console.log('djsauhdusahcjksdahvasjkdf', data);
|
||||||
|
|
||||||
return res
|
rankList.value = data
|
||||||
|
|
||||||
|
// let category: string[] = ["商品1", "商品2", "商品3", "商品4", "商品5"];
|
||||||
|
// let seriesData: number[] = [8.8, 7.5, 6.3, 5.2, 4.1];
|
||||||
|
// let realData: string[] = []
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// let res = {
|
||||||
|
// category: category,// x轴的内容
|
||||||
|
// seriesData: seriesData,// y轴的数据
|
||||||
|
// realData: realData
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// return res
|
||||||
}
|
}
|
||||||
|
|
||||||
// const resizeChart = () => {
|
// const resizeChart = () => {
|
||||||
@ -161,21 +171,24 @@ const handleGetData = async () => {
|
|||||||
<!-- <div class="MerchantRatingRankingCharts" id="MerchantRatingRanking">
|
<!-- <div class="MerchantRatingRankingCharts" id="MerchantRatingRanking">
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<div class="MerchantRatingRankingList">
|
<div class="MerchantRatingRankingList" style="margin-top: 15px;">
|
||||||
<div class="MerchantRatingRankingItem" v-for="(item, index) in rankList" :key="index">
|
<div class="MerchantRatingRankingItem" v-for="(item, index) in rankList" :key="index">
|
||||||
<div class="MerchantRatingRankingItemTop">
|
<div class="MerchantRatingRankingItemTop">
|
||||||
<div class="MerchantRatingRankingItemTopLeft">
|
<div class="MerchantRatingRankingItemTopLeft">
|
||||||
<div class="MerchantRatingRankingItemTopLeftIndex"></div>
|
<div
|
||||||
<div class="MerchantRatingRankingItemTopLeftName"></div>
|
:class="index + 1 > 3 ? 'MerchantRatingRankingItemIndex MerchantRatingRankingItemIndexAfter' : 'MerchantRatingRankingItemIndex '">
|
||||||
|
{{ index + 1 }}</div>
|
||||||
|
<div class="MerchantRatingRankingItemTopLeftName">{{ item.UnitName }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="MerchantRatingRankingItemTopRight">
|
<div class="MerchantRatingRankingItemTopRight">
|
||||||
|
{{ item.EvaluateScore }}分
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="MerchantRatingRankingItemBottom">
|
<div class="MerchantRatingRankingItemBottom">
|
||||||
<div class="MerchantRatingRankingItemBottomAllProgress">
|
<div class="MerchantRatingRankingItemBottomAllProgress">
|
||||||
<div class="MerchantRatingRankingItemBottomHaveProgress"></div>
|
<div class="MerchantRatingRankingItemBottomHaveProgress"
|
||||||
|
:style="{ width: item.EvaluateScore + '%' }"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
.ThisMonthBenefitsBox {
|
.ThisMonthBenefitsBox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
// padding: 20px 11px 0;
|
padding: 10px 11px 0;
|
||||||
|
|
||||||
.ThisMonthBenefitsContent {
|
.ThisMonthBenefitsContent {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -56,4 +56,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.CoreCategoryBox {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 13px;
|
||||||
|
|
||||||
|
.CoreCategoryCharts {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 26px;
|
||||||
|
|
||||||
|
.CoreCategory {
|
||||||
|
width: 100%;
|
||||||
|
height: 132px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,8 +1,171 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import './ThisMonthBenefits.less'
|
import './ThisMonthBenefits.less'
|
||||||
import bussinessIcon from '../../../../assets/image/bussinessIcon.png'
|
import bussinessIcon from '../../../../assets/image/bussinessIcon.png'
|
||||||
|
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||||
|
import { handleGetWelFareSummary } from '../../service';
|
||||||
|
import SmallTitle from '../smallTitle/smallTitle.vue';
|
||||||
|
import moment from 'moment';
|
||||||
|
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 businessFormatCenterIcon from '../../../../assets/image/businessFormatCenterIcon.png'
|
||||||
|
|
||||||
|
|
||||||
|
// 注册组件
|
||||||
|
echarts.use([
|
||||||
|
PieChart,
|
||||||
|
GridComponent,
|
||||||
|
TitleComponent,
|
||||||
|
TooltipComponent,
|
||||||
|
LegendComponent,
|
||||||
|
GraphicComponent,
|
||||||
|
CanvasRenderer
|
||||||
|
]);
|
||||||
|
|
||||||
|
let myChart: echarts.ECharts;
|
||||||
|
|
||||||
|
// 自定义颜色列表
|
||||||
|
const colorList = ['#FF9500', '#00FFB7', '#0094FF', '#7D4CD2', '#69BCFF'];
|
||||||
|
|
||||||
|
// 拿到的实际数据
|
||||||
|
let allRealData = ref<any>()
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
const res: any = await handleGetData()
|
||||||
|
|
||||||
|
const chartDom = document.getElementById('CoreCategory');
|
||||||
|
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>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: { // 新增图例配置
|
||||||
|
show: true, // 显示图例
|
||||||
|
orient: 'vertical', // 垂直排列
|
||||||
|
left: '40%', // 距离左侧的距离
|
||||||
|
top: 0, // 顶部对齐
|
||||||
|
// type: 'scroll',
|
||||||
|
textStyle: { // 图例文字样式
|
||||||
|
color: '#fff', // 文字颜色设为白色
|
||||||
|
fontSize: 12 // 可自定义字体大小
|
||||||
|
},
|
||||||
|
formatter: function (name: string) { // 自定义图例文本
|
||||||
|
// 从 res.seriesData 中找到对应的数据项
|
||||||
|
const dataItem = res.seriesData.find((item: any) => item.name === name);
|
||||||
|
// 返回自定义格式的文本，例如："名称 (值)"
|
||||||
|
return `${name} (${dataItem?.percent || 0}%)`;
|
||||||
|
// 或者使用其他自定义格式，比如：
|
||||||
|
// return `${name}: ${res.realData[res.seriesData.findIndex(item => item.name === name)]}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
graphic: { // 关键配置：在图表中心添加图片
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
type: 'image',
|
||||||
|
style: {
|
||||||
|
image: businessFormatCenterIcon,
|
||||||
|
width: 83,
|
||||||
|
height: 83
|
||||||
|
},
|
||||||
|
left: '25',
|
||||||
|
top: '25',
|
||||||
|
z: 10
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['85%', '100%'],
|
||||||
|
center: ['20%', '50%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
// itemStyle: {
|
||||||
|
// color: function (params: any) {
|
||||||
|
// return colorList[params.dataIndex];
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
emphasis: false,
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: res.seriesData
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
myChart.setOption(option);
|
||||||
|
myChart.resize();
|
||||||
|
window.addEventListener('resize', resizeChart);
|
||||||
|
})
|
||||||
|
|
||||||
|
const resizeChart = () => {
|
||||||
|
myChart?.resize();
|
||||||
|
};
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
window.removeEventListener('resize', resizeChart);
|
||||||
|
myChart?.dispose();
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleGetData = async () => {
|
||||||
|
const req: any = {
|
||||||
|
ProvinceCode: '530000',
|
||||||
|
StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM')
|
||||||
|
}
|
||||||
|
const data = await handleGetWelFareSummary(req)
|
||||||
|
|
||||||
|
console.log('fjidsfhasjfasdfdsf', data);
|
||||||
|
|
||||||
|
|
||||||
|
let seriesData: any = []
|
||||||
|
let realData: any = []
|
||||||
|
let category: any = []
|
||||||
|
|
||||||
|
allRealData.value = data
|
||||||
|
|
||||||
|
let list: any = data.WelFareGoodsTypeList.slice(0, 5)
|
||||||
|
if (list && list.length > 0) {
|
||||||
|
let sum: number = 0
|
||||||
|
list.forEach((item: any) => {
|
||||||
|
sum += item.GoodsCount
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
list.forEach((item: any) => {
|
||||||
|
category.push(item.GoodsTypeName)
|
||||||
|
seriesData.push({ name: item.GoodsTypeName, value: item.GoodsCount, percent: ((item.GoodsCount / sum) * 100).toFixed(2) })
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let res: any = {
|
||||||
|
category: category,// x轴的内容
|
||||||
|
seriesData: seriesData,// y轴的数据
|
||||||
|
realData: realData// 真实数据
|
||||||
|
}
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -16,9 +179,18 @@ import bussinessIcon from '../../../../assets/image/bussinessIcon.png'
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ThisMonthBenefitsContentRight">
|
<div class="ThisMonthBenefitsContentRight">
|
||||||
<span class="thisMonthValue">8888</span>
|
<span class="thisMonthValue">{{ allRealData?.value.distributeAmount || '0' }}</span>
|
||||||
<span class="thisMonthUnit">元</span>
|
<span class="thisMonthUnit">元</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="CoreCategoryBox">
|
||||||
|
<SmallTitle title="核心品类占比" />
|
||||||
|
|
||||||
|
<div class="CoreCategoryCharts">
|
||||||
|
<div class="CoreCategory" id="CoreCategory"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -4,6 +4,54 @@
|
|||||||
// padding: 0 20px;
|
// padding: 0 20px;
|
||||||
// margin-top: 20px;
|
// margin-top: 20px;
|
||||||
|
|
||||||
|
.TradingAlertBox {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.TradingAlertItem {
|
||||||
|
width: calc((100% - 10px)/2);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.TradingAlertItemLeft {
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
.TradingAlertItemLeftIcon {
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.TradingAlertItemRight {
|
||||||
|
flex: 1;
|
||||||
|
.TradingAlertItemRightLabel {
|
||||||
|
font-family: Microsoft YaHei, Microsoft YaHei;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.TradingAlertItemRightValue {
|
||||||
|
font-family: Impact, Impact;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 25px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
text-align: right;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.TradingAlertListBox {
|
.TradingAlertListBox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -1,14 +1,15 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import './TradingAlert.less'
|
import './TradingAlert.less'
|
||||||
import SmallTitle from '../smallTitle/smallTitle.vue'
|
import SmallTitle from '../smallTitle/smallTitle.vue'
|
||||||
import { onMounted, reactive } from 'vue';
|
import { onMounted, reactive, ref } from 'vue';
|
||||||
import { handleGetCurrentEarlyWarning, handleGetEarlyWarning } from '../../service';
|
import { handleGetCurrentEarlyWarning, handleGetEarlyWarning } from '../../service';
|
||||||
|
|
||||||
// 交易预警数据
|
// 交易预警数据
|
||||||
let TradingAlertList = reactive<any>([])
|
let TradingAlertList = reactive<any>([])
|
||||||
|
// 交易预警的其他信息内容
|
||||||
|
let TradingOtherData = ref<any>()
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
|
||||||
// 请求数据
|
// 请求数据
|
||||||
await handleGetData()
|
await handleGetData()
|
||||||
|
|
||||||
@ -28,10 +29,12 @@ const handleGetData = async () => {
|
|||||||
}
|
}
|
||||||
const data = await handleGetCurrentEarlyWarning(req)
|
const data = await handleGetCurrentEarlyWarning(req)
|
||||||
|
|
||||||
|
console.log('skodpijasidjaslfddfas', data);
|
||||||
|
|
||||||
if (data && data.length > 0) {
|
TradingOtherData.value = data.OtherData
|
||||||
let list = data.slice(0, 5)
|
|
||||||
|
|
||||||
|
if (data.List && data.List.length > 0) {
|
||||||
|
let list = data.List.slice(0, 10)
|
||||||
TradingAlertList.length = 0;
|
TradingAlertList.length = 0;
|
||||||
list && list.forEach((item: any) => TradingAlertList.push(item));
|
list && list.forEach((item: any) => TradingAlertList.push(item));
|
||||||
} else {
|
} else {
|
||||||
@ -46,6 +49,29 @@ const handleGetData = async () => {
|
|||||||
<div class="TradingAlertBox">
|
<div class="TradingAlertBox">
|
||||||
<SmallTitle :title="'交易预警'"></SmallTitle>
|
<SmallTitle :title="'交易预警'"></SmallTitle>
|
||||||
|
|
||||||
|
<div class="TradingAlertBox">
|
||||||
|
<div class="TradingAlertItem">
|
||||||
|
<div class="TradingAlertItemLeft">
|
||||||
|
<div class="TradingAlertItemLeftIcon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="TradingAlertItemRight">
|
||||||
|
<div class="TradingAlertItemRightLabel">必查项</div>
|
||||||
|
<div class="TradingAlertItemRightValue">{{ TradingOtherData?.value || '' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="TradingAlertItem">
|
||||||
|
<div class="TradingAlertItemLeft">
|
||||||
|
<div class=""></div>
|
||||||
|
</div>
|
||||||
|
<div class="TradingAlertItemRight">
|
||||||
|
<div class="TradingAlertItemRightLabel">抽查项</div>
|
||||||
|
<div class="TradingAlertItemRightValue">{{ TradingOtherData?.data || '' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="TradingAlertListBox">
|
<div class="TradingAlertListBox">
|
||||||
<div class="TradingAlertItem" v-for="(item, index) in TradingAlertList" :key="index"
|
<div class="TradingAlertItem" v-for="(item, index) in TradingAlertList" :key="index"
|
||||||
:style="{ backgroundColor: index % 2 === 0 ? 'rgba(22, 28, 47, 1)' : 'rgba(0, 0, 0, 0.2)' }">
|
:style="{ backgroundColor: index % 2 === 0 ? 'rgba(22, 28, 47, 1)' : 'rgba(0, 0, 0, 0.2)' }">
|
||||||
|
|||||||
@ -12,7 +12,7 @@ import {
|
|||||||
import { CanvasRenderer } from 'echarts/renderers';
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
import './TrendOfTrafficFlow.less'
|
import './TrendOfTrafficFlow.less'
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { handleGetProvinceMonthAnalysis } from '../../service';
|
import { handleGetMonthAnalysis, handleGetProvinceMonthAnalysis } from '../../service';
|
||||||
|
|
||||||
// 注册组件
|
// 注册组件
|
||||||
echarts.use([
|
echarts.use([
|
||||||
@ -60,23 +60,35 @@ const handleGoMounted = async () => {
|
|||||||
type: 'category',
|
type: 'category',
|
||||||
data: res.category,
|
data: res.category,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
overflow: 'truncate', // 超出部分显示为省略号
|
overflow: 'truncate', // 超出部分显示为省略号
|
||||||
ellipsis: '...', // 自定义省略符号（可选）
|
ellipsis: '...', // 自定义省略符号（可选）
|
||||||
interval: 0 // 强制显示所有标签
|
interval: 0 // 强制显示所有标签
|
||||||
// rotate: 30, // 标签旋转30度（防止重叠）
|
// rotate: 30, // 标签旋转30度（防止重叠）
|
||||||
},
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 x 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
|
}
|
||||||
// data: res.category
|
// data: res.category
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万辆', // 仅在此处显示单位
|
name: '万辆', // 仅在此处显示单位
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#666',
|
color: '#fff',
|
||||||
padding: [0, 30, 0, 0] // 调整单位位置
|
padding: [0, 30, 0, 0] // 调整单位位置
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
formatter: '{value}' // 刻度值保持纯数字
|
formatter: '{value}' // 刻度值保持纯数字
|
||||||
},
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
|
},
|
||||||
splitLine: { show: false }
|
splitLine: { show: false }
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
@ -97,27 +109,13 @@ const handleGoMounted = async () => {
|
|||||||
borderRadius: [4, 4, 0, 0],
|
borderRadius: [4, 4, 0, 0],
|
||||||
// 动态返回渐变颜色
|
// 动态返回渐变颜色
|
||||||
color: function (params: any) {
|
color: function (params: any) {
|
||||||
const index = params.dataIndex; // 当前数据的索引
|
return new echarts.graphic.LinearGradient(
|
||||||
// 前3条（Mon, Tue, Wed）使用渐变1
|
0, 0, 0, 1,
|
||||||
if (index < 3) {
|
[
|
||||||
return new echarts.graphic.LinearGradient(
|
{ offset: 0, color: '#018FFF' }, // 渐变起始色
|
||||||
0, 0, 0, 1, // 渐变方向（垂直）
|
{ offset: 1, color: '#00F4FF' } // 渐变结束色
|
||||||
[
|
]
|
||||||
{ offset: 0, color: '#FF4F00' }, // 渐变起始色
|
);
|
||||||
{ offset: 1, color: '#D3B70E' } // 渐变结束色
|
|
||||||
]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// 后3条（Thu, Fri, Sat）使用渐变2
|
|
||||||
else {
|
|
||||||
return new echarts.graphic.LinearGradient(
|
|
||||||
0, 0, 0, 1,
|
|
||||||
[
|
|
||||||
{ offset: 0, color: '#018FFF' }, // 渐变起始色
|
|
||||||
{ offset: 1, color: '#00F4FF' } // 渐变结束色
|
|
||||||
]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -154,25 +152,43 @@ const handleGoMounted = async () => {
|
|||||||
|
|
||||||
// 拿到断面流量数据
|
// 拿到断面流量数据
|
||||||
const handleGetSectionFlowCount = async () => {
|
const handleGetSectionFlowCount = async () => {
|
||||||
const req: any = {
|
// const req: any = {
|
||||||
// StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
|
// // StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
|
||||||
StatisticsMonth: "202504",
|
// StatisticsMonth: "202504",
|
||||||
Serverpart_ID: props.currentService?.SERVERPART_ID || "",
|
// Serverpart_ID: props.currentService?.SERVERPART_ID || "",
|
||||||
SortStr: "SectionFlow_Count desc",
|
// SortStr: "SectionFlow_Count desc",
|
||||||
ProvinceCode: "530000"
|
// ProvinceCode: "530000"
|
||||||
}
|
// }
|
||||||
let data = await handleGetProvinceMonthAnalysis(req)
|
// let data = await handleGetProvinceMonthAnalysis(req)
|
||||||
|
|
||||||
let list = data.slice(0, 5)
|
const req: any = {
|
||||||
|
ProvinceCode: '530000',
|
||||||
|
StatisticsDate: moment().format('YYYY-MM-DD'),
|
||||||
|
StartDate: moment().startOf('y').format('YYYY-MM-DD'),
|
||||||
|
EndDate: moment().endOf('M').format('YYYY-MM-DD'),
|
||||||
|
}
|
||||||
|
let data = await handleGetMonthAnalysis(req)
|
||||||
|
console.log('fdjisfhhusahfdskf', data);
|
||||||
|
|
||||||
|
|
||||||
|
// let list = data.slice(0, 5)
|
||||||
let category: string[] = []
|
let category: string[] = []
|
||||||
let seriesData: number[] = []
|
let seriesData: number[] = []
|
||||||
let realData: string[] = []
|
let realData: string[] = []
|
||||||
|
|
||||||
list.forEach((item: any) => {
|
if (data && data.length > 0) {
|
||||||
category.push(item.Serverpart_Name.split('服务区')[0])
|
data.forEach((item: any) => {
|
||||||
seriesData.push(Number((item.SectionFlow_Count / 10000).toFixed(2)))
|
category.push(`${item.Statistics_Month}月`)
|
||||||
realData.push(item.SectionFlow_Count.toLocaleString())
|
seriesData.push(Number((item.SectionFlow_Count / 10000).toFixed(2)))
|
||||||
})
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// list.forEach((item: any) => {
|
||||||
|
// category.push(item.Serverpart_Name.split('服务区')[0])
|
||||||
|
// seriesData.push(Number((item.SectionFlow_Count / 10000).toFixed(2)))
|
||||||
|
// realData.push(item.SectionFlow_Count.toLocaleString())
|
||||||
|
// })
|
||||||
|
|
||||||
let res = {
|
let res = {
|
||||||
category: category,// x轴的内容
|
category: category,// x轴的内容
|
||||||
@ -181,7 +197,6 @@ const handleGetSectionFlowCount = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return res
|
return res
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const resizeChart = () => {
|
const resizeChart = () => {
|
||||||
@ -196,7 +211,7 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="TrendOfTrafficFlowBox">
|
<div class="TrendOfTrafficFlowBox">
|
||||||
<SmallTitle :title="`车流断面趋势(04月)`" />
|
<SmallTitle :title="`断面流量趋势`" />
|
||||||
|
|
||||||
<div class="TrendOfTrafficFlowCharts">
|
<div class="TrendOfTrafficFlowCharts">
|
||||||
<div class="TrendOfTrafficFlow" id="TrendOfTrafficFlow"></div>
|
<div class="TrendOfTrafficFlow" id="TrendOfTrafficFlow"></div>
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import SmallTitle from '../smallTitle/smallTitle.vue'
|
|||||||
import './VehicleModelStay.less'
|
import './VehicleModelStay.less'
|
||||||
import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
|
import { onMounted, onBeforeUnmount, watch, ref } from 'vue';
|
||||||
import * as echarts from 'echarts/core';
|
import * as echarts from 'echarts/core';
|
||||||
import { LineChart } from 'echarts/charts';
|
import { BarChart } from 'echarts/charts';
|
||||||
import {
|
import {
|
||||||
GridComponent,
|
GridComponent,
|
||||||
TitleComponent,
|
TitleComponent,
|
||||||
@ -12,11 +12,11 @@ import {
|
|||||||
} from 'echarts/components';
|
} from 'echarts/components';
|
||||||
import { CanvasRenderer } from 'echarts/renderers';
|
import { CanvasRenderer } from 'echarts/renderers';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { handleGetBayonetSTAnalysis, handleGetTransactionConvert, handleGetTransactionTimeAnalysis } from '../../service';
|
import { handleGetBayonetSTAnalysis, handleGetRevenueTrend, handleGetTransactionConvert, handleGetTransactionTimeAnalysis } from '../../service';
|
||||||
|
|
||||||
// 注册组件
|
// 注册组件
|
||||||
echarts.use([
|
echarts.use([
|
||||||
LineChart,
|
BarChart,
|
||||||
GridComponent,
|
GridComponent,
|
||||||
TitleComponent,
|
TitleComponent,
|
||||||
TooltipComponent,
|
TooltipComponent,
|
||||||
@ -63,20 +63,40 @@ const handleGoMounted = async () => {
|
|||||||
type: 'category',
|
type: 'category',
|
||||||
data: res.category,
|
data: res.category,
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
interval: 1, // 改为隔1个显示1个（原为3）
|
interval: 0, // 改为0表示显示所有刻度
|
||||||
showMinLabel: true,
|
showMinLabel: true,
|
||||||
showMaxLabel: true
|
showMaxLabel: true,
|
||||||
|
color: '#fff', // x轴标签颜色
|
||||||
|
fontSize: 12 // 可调整字体大小防止重叠
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // x轴线颜色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true // 保证刻度线和标签对齐
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '停留时长',
|
name: '营收金额(万元)',
|
||||||
splitLine: { show: false },
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
padding: [0, 30, 0, 0] // 调整单位位置
|
||||||
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // y轴线颜色
|
||||||
|
}
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
|
color: '#fff', // y轴标签颜色
|
||||||
formatter: '{value}' // 添加单位
|
formatter: '{value}' // 添加单位
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -90,74 +110,50 @@ const handleGoMounted = async () => {
|
|||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '小型车',
|
name: `${res.currentYear}年营收`,
|
||||||
data: res?.smallCarData && res?.smallCarData.map((value: any, index: any) => ({
|
data: res?.seriesData || [],
|
||||||
value: value,
|
type: 'bar',
|
||||||
symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
|
barWidth: 5,
|
||||||
symbolSize: 6,
|
itemStyle: {
|
||||||
itemStyle: {
|
borderRadius: [3, 3, 0, 0],
|
||||||
color: '#0094FF', // 纯色填充
|
color: '#008CFF' // 直接指定颜色
|
||||||
borderWidth: 0 // 无边框
|
}
|
||||||
}
|
|
||||||
})),
|
|
||||||
type: 'line',
|
|
||||||
// smooth: true,
|
|
||||||
lineStyle: {
|
|
||||||
width: 2,
|
|
||||||
color: '#0094FF'
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '中型车',
|
name: `${res.lastYear}年营收`,
|
||||||
data: res?.middleCarData && res?.middleCarData.map((value: any, index: any) => ({
|
data: res?.seriesDataLastYear || [],
|
||||||
value: value,
|
type: 'bar',
|
||||||
symbol: index % 2 === 0 ? 'circle' : 'none', // 关键修改：隔一个显示一个点
|
barWidth: 5,
|
||||||
symbolSize: 6,
|
itemStyle: {
|
||||||
itemStyle: {
|
borderRadius: [3, 3, 0, 0],
|
||||||
color: '#7D4CD2', // 纯色填充
|
color: '#69BCFF' // 直接指定颜色
|
||||||
borderWidth: 0 // 无边框
|
}
|
||||||
}
|
|
||||||
})),
|
|
||||||
type: 'line',
|
|
||||||
// smooth: true,
|
|
||||||
lineStyle: {
|
|
||||||
width: 2,
|
|
||||||
color: '#7D4CD2'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '大型车',
|
|
||||||
data: res?.bigCarData && res?.bigCarData.map((value: any, index: any) => ({
|
|
||||||
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: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'line' // 改为线条指示器
|
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||||
},
|
},
|
||||||
formatter: function (params: any) {
|
formatter: function (params: any) {
|
||||||
|
let result = params[0].axisValue + '<br/>';
|
||||||
|
params.forEach((item: any, index: number) => {
|
||||||
|
result += `${item.marker} ${item.seriesName}: ${index === 0 ? res?.realData[item.dataIndex] : res?.realDataLastYear[item.dataIndex]}元<br/>`;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['小型车', '中型车', '大型车'], // 确保图例显示
|
|
||||||
textStyle: { color: '#fff' }, // 图例文字颜色
|
data: [`${res.currentYear}年营收`, `${res.lastYear}年营收`], // 使用动态名称
|
||||||
right: '0', // 距离右侧4%的位置
|
textStyle: {
|
||||||
top: '0',
|
color: '#fff', // 图例文字颜色
|
||||||
}
|
fontSize: 12
|
||||||
|
},
|
||||||
|
right: '0', // 距离右侧10px
|
||||||
|
top: '0', // 距离顶部10px
|
||||||
|
},
|
||||||
|
color: ['#008CFF', '#69BCFF'] // 只需要两个颜色对应两个系列
|
||||||
};
|
};
|
||||||
|
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
@ -168,57 +164,54 @@ const handleGoMounted = async () => {
|
|||||||
|
|
||||||
// 拿到数据的方法
|
// 拿到数据的方法
|
||||||
const handleGetData = async () => {
|
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 category: number[] = []
|
||||||
// let seriesData: number[] = []
|
let seriesData: number[] = []
|
||||||
// let realData: string[] = []
|
let realData: string[] = []
|
||||||
let smallCarData: number[] = []
|
let seriesDataLastYear: number[] = []
|
||||||
let middleCarData: number[] = []
|
let realDataLastYear: string[] = []
|
||||||
let bigCarData: number[] = []
|
|
||||||
|
|
||||||
const req: any = {
|
const req: any = {
|
||||||
StartMonth: moment().subtract(1, 'd').format('YYYYMM'),
|
StatisticsDate: moment().format('YYYY'),
|
||||||
EndMonth: moment().subtract(1, 'd').format('YYYYMM'),
|
ProvinceCode: '340000',
|
||||||
Province_Code: '340000',
|
StatisticsType: 4,
|
||||||
TimeSpan: 1,
|
|
||||||
}
|
}
|
||||||
console.log('reqreqreqreqreq', req);
|
const data = await handleGetRevenueTrend(req)
|
||||||
|
|
||||||
searchTime.value = moment(req.StartMonth).format('MM')
|
|
||||||
const data = await handleGetBayonetSTAnalysis(req)
|
|
||||||
|
|
||||||
console.log('fdsjifjasifjdsnafsdvbhcav', data);
|
|
||||||
|
|
||||||
if (data && data.length > 0) {
|
if (data && data.length > 0) {
|
||||||
data.forEach((item: any) => {
|
data.forEach((item: any) => {
|
||||||
if (item.name === '小型车') {
|
category.push(item.name)
|
||||||
if (item.data && item.data.length > 0) {
|
seriesData.push(Number((Number(item.value) / 10000).toFixed(2)))
|
||||||
item.data.forEach((subItem: any) => {
|
realData.push(Number(item.value).toLocaleString())
|
||||||
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])
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const lastYearReq: any = {
|
||||||
|
StatisticsDate: moment().subtract(1, 'y').format('YYYY'),
|
||||||
|
ProvinceCode: '340000',
|
||||||
|
StatisticsType: 4,
|
||||||
|
}
|
||||||
|
const lastYearData = await handleGetRevenueTrend(lastYearReq)
|
||||||
|
|
||||||
|
if (lastYearData && lastYearData.length > 0) {
|
||||||
|
lastYearData.forEach((item: any) => {
|
||||||
|
seriesDataLastYear.push(Number((Number(item.value) / 10000).toFixed(2)))
|
||||||
|
realDataLastYear.push(Number(item.value).toLocaleString())
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('datadatadatadatadatadatadata', data);
|
||||||
|
console.log('lastYearDatalastYearDatalastYearDatalastYearDatalastYearData', lastYearData);
|
||||||
|
|
||||||
|
|
||||||
let res: any = {
|
let res: any = {
|
||||||
category: category,// x轴的内容
|
category: category,// x轴的内容
|
||||||
// seriesData: seriesData,// y轴的数据
|
seriesData: seriesData,// 今年的数据
|
||||||
// realData: realData// 真实数据
|
realData: realData,// 今年的实际数据
|
||||||
smallCarData: smallCarData,
|
seriesDataLastYear: seriesDataLastYear,// 去年的数据
|
||||||
middleCarData: middleCarData,
|
realDataLastYear: realDataLastYear,// 去年的实际数据
|
||||||
bigCarData: bigCarData,
|
currentYear: moment().format('YYYY'),
|
||||||
|
lastYear: moment().subtract(1, 'y').format('YYYY')
|
||||||
}
|
}
|
||||||
return res
|
return res
|
||||||
}
|
}
|
||||||
@ -238,7 +231,8 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="VehicleModelStayBox">
|
<div class="VehicleModelStayBox">
|
||||||
<SmallTitle :title="`车型停留分析/日均${searchTime ? `(${searchTime}月)` : ''}`"></SmallTitle>
|
<!-- <SmallTitle :title="`车型停留分析/日均${searchTime ? `(${searchTime}月)` : ''}`"></SmallTitle> -->
|
||||||
|
<SmallTitle :title="`经营效益趋势`"></SmallTitle>
|
||||||
|
|
||||||
<div class="VehicleModelStayCharts" style="margin-top:15px">
|
<div class="VehicleModelStayCharts" style="margin-top:15px">
|
||||||
<div class="VehicleModelStay" id="VehicleModelStay"></div>
|
<div class="VehicleModelStay" id="VehicleModelStay"></div>
|
||||||
|
|||||||
@ -15,7 +15,8 @@
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10px;right: 0;
|
top: -10px;
|
||||||
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.VehiclesEntering {
|
.VehiclesEntering {
|
||||||
@ -24,4 +25,16 @@
|
|||||||
height: 190px;
|
height: 190px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.TrendCustomerRevenueCharts {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.TrendCustomerRevenue {
|
||||||
|
width: 100%;
|
||||||
|
height: 140px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -26,6 +26,7 @@ echarts.use([
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
let myChart: echarts.ECharts;
|
let myChart: echarts.ECharts;
|
||||||
|
let myChart2: echarts.ECharts;
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await handleGoMounted()
|
await handleGoMounted()
|
||||||
@ -52,15 +53,25 @@ const handleGoMounted = async () => {
|
|||||||
if (!chartDom) return;
|
if (!chartDom) return;
|
||||||
myChart = echarts.init(chartDom);
|
myChart = echarts.init(chartDom);
|
||||||
|
|
||||||
|
const chartDom2 = document.getElementById('TrendCustomerRevenue');
|
||||||
|
if (!chartDom2) return;
|
||||||
|
myChart2 = echarts.init(chartDom2);
|
||||||
|
|
||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis', // 触发类型：坐标轴触发
|
||||||
axisPointer: {
|
axisPointer: { // 坐标轴指示器配置
|
||||||
type: 'cross',
|
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||||
crossStyle: {
|
},
|
||||||
color: '#999'
|
formatter: function (params: any) { // 自定义提示框内容
|
||||||
}
|
return `<div>
|
||||||
|
<div>${params[0].seriesName}：${res?.realDataCar[params[0]?.dataIndex].toLocaleString()}辆</div>
|
||||||
|
<div>${params[1].seriesName}：${res?.yesRealDataCar[params[1]?.dataIndex].toLocaleString()}辆</div>
|
||||||
|
</div>`
|
||||||
|
// return `
|
||||||
|
// <div>车流量：${realData ? realData + '辆' : data.value + '万辆'} </div>
|
||||||
|
// `;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
@ -87,29 +98,46 @@ const handleGoMounted = async () => {
|
|||||||
data: res.category,
|
data: res.category,
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow'
|
type: 'shadow'
|
||||||
}
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
formatter: '{value}' // 刻度值保持纯数字
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '车流量(万辆)',
|
name: '万辆', // 仅在此处显示单位
|
||||||
splitLine: { show: false },
|
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#666',
|
color: '#fff',
|
||||||
padding: [0, 30, 0, 0] // 调整单位位置
|
padding: [0, 30, 0, 0] // 调整单位位置
|
||||||
},
|
},
|
||||||
splitNumber: 4,
|
axisLabel: {
|
||||||
},
|
color: '#fff',
|
||||||
{
|
formatter: '{value}' // 刻度值保持纯数字
|
||||||
type: 'value',
|
|
||||||
name: '交易金额(万元)',
|
|
||||||
splitLine: { show: false },
|
|
||||||
nameTextStyle: {
|
|
||||||
color: '#666',
|
|
||||||
padding: [0, 0, 0, 30] // 调整单位位置
|
|
||||||
},
|
},
|
||||||
splitNumber: 4,
|
axisLine: {
|
||||||
}
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: { show: false }
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: 'value',
|
||||||
|
// name: '交易金额(万元)',
|
||||||
|
// splitLine: { show: false },
|
||||||
|
// nameTextStyle: {
|
||||||
|
// color: '#666',
|
||||||
|
// padding: [0, 0, 0, 30] // 调整单位位置
|
||||||
|
// },
|
||||||
|
// splitNumber: 4,
|
||||||
|
// }
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
@ -133,11 +161,107 @@ const handleGoMounted = async () => {
|
|||||||
borderRadius: [3, 3, 0, 0]
|
borderRadius: [3, 3, 0, 0]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// name: `${res.currentYear}年交易额`,
|
||||||
|
// type: 'line',
|
||||||
|
// data: res.seriesDataRevenue,
|
||||||
|
// yAxisIndex: 1,
|
||||||
|
// symbol: 'circle',
|
||||||
|
// symbolSize: 6,
|
||||||
|
// lineStyle: {
|
||||||
|
// width: 2
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: `${res.yesYear}年交易额`,
|
||||||
|
// type: 'line',
|
||||||
|
// data: res.yesSeriesDataRevenue,
|
||||||
|
// yAxisIndex: 1,
|
||||||
|
// symbol: 'circle',
|
||||||
|
// symbolSize: 6,
|
||||||
|
// lineStyle: {
|
||||||
|
// width: 2
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
],
|
||||||
|
color: ['#008CFF', '#69BCFF', '#FF5E5E', '#FF9500'] // Custom colors for each series
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const option2 = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis', // 触发类型：坐标轴触发
|
||||||
|
axisPointer: { // 坐标轴指示器配置
|
||||||
|
type: 'shadow' // 阴影指示器（适合柱状图）
|
||||||
|
},
|
||||||
|
formatter: function (params: any) { // 自定义提示框内容
|
||||||
|
return `<div>
|
||||||
|
<div>${params[0].seriesName}：${res?.realDataRevenue[params[0]?.dataIndex].toLocaleString()}元</div>
|
||||||
|
<div>${params[1].seriesName}：${res?.yesRealDataRevenue[params[1]?.dataIndex].toLocaleString()}元</div>
|
||||||
|
</div>`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: [`${res.currentYear}年交易额`, `${res.yesYear}年交易额`],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12 // 设置图例文字大小为12px
|
||||||
|
},
|
||||||
|
right: '4%',
|
||||||
|
top: '0%',
|
||||||
|
orient: 'horizontal',
|
||||||
|
type: 'scroll' // 如果图例过长，启用滚动
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '0',
|
||||||
|
right: '0',
|
||||||
|
bottom: '0',
|
||||||
|
top: '30',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: true,
|
||||||
|
data: res.category,
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
formatter: '{value}' // 刻度值保持纯数字
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '交易金额(万元)',
|
||||||
|
splitLine: { show: false },
|
||||||
|
splitNumber: 4,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
padding: [0, 0, 0, 10] // 调整单位位置
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
formatter: '{value}' // 刻度值保持纯数字
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff' // 设置 y 轴线颜色为白色（可选）
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
{
|
{
|
||||||
name: `${res.currentYear}年交易额`,
|
name: `${res.currentYear}年交易额`,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: res.seriesDataRevenue,
|
data: res.seriesDataRevenue,
|
||||||
yAxisIndex: 1,
|
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
symbolSize: 6,
|
symbolSize: 6,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
@ -148,7 +272,6 @@ const handleGoMounted = async () => {
|
|||||||
name: `${res.yesYear}年交易额`,
|
name: `${res.yesYear}年交易额`,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: res.yesSeriesDataRevenue,
|
data: res.yesSeriesDataRevenue,
|
||||||
yAxisIndex: 1,
|
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
symbolSize: 6,
|
symbolSize: 6,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
@ -156,11 +279,17 @@ const handleGoMounted = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
color: ['#008CFF', '#69BCFF', '#FF5E5E', '#FF9500'] // Custom colors for each series
|
color: ['#FF5E5E', '#FF9500']
|
||||||
};
|
}
|
||||||
|
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
|
myChart2.setOption(option2);
|
||||||
|
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
|
myChart2.resize();
|
||||||
|
|
||||||
window.addEventListener('resize', resizeChart);
|
window.addEventListener('resize', resizeChart);
|
||||||
|
window.addEventListener('resize', resizeChart2);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 拿到入区车辆的趋势
|
// 拿到入区车辆的趋势
|
||||||
@ -197,7 +326,7 @@ const handleGetSectionFlowCount = async () => {
|
|||||||
console.log('dnasfhuaidhsdaghsakjlhsldk', data);
|
console.log('dnasfhuaidhsdaghsakjlhsldk', data);
|
||||||
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(Number((item.Vehicle_Count / 10000).toFixed(2)))
|
seriesDataCar.push(Number((item.Vehicle_Count / 10000).toFixed(2)))
|
||||||
realDataCar.push(item.Vehicle_Count)
|
realDataCar.push(item.Vehicle_Count)
|
||||||
seriesDataRevenue.push(Number((item.RevenueAmount / 10000).toFixed(2)))
|
seriesDataRevenue.push(Number((item.RevenueAmount / 10000).toFixed(2)))
|
||||||
@ -246,10 +375,13 @@ const handleGetSectionFlowCount = async () => {
|
|||||||
const resizeChart = () => {
|
const resizeChart = () => {
|
||||||
myChart?.resize();
|
myChart?.resize();
|
||||||
};
|
};
|
||||||
|
const resizeChart2 = () => {
|
||||||
|
myChart2?.resize();
|
||||||
|
};
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
window.removeEventListener('resize', resizeChart);
|
window.removeEventListener('resize', resizeChart);
|
||||||
myChart?.dispose();
|
myChart?.dispose();
|
||||||
|
myChart2?.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@ -259,7 +391,7 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="VehiclesEnteringBox">
|
<div class="VehiclesEnteringBox">
|
||||||
<SmallTitle :title="'月度车流累计'">
|
<SmallTitle :title="'入区车流趋势'">
|
||||||
<!-- <template #extra>
|
<!-- <template #extra>
|
||||||
<div class="legendBox" style="display: flex;align-items: center;">
|
<div class="legendBox" style="display: flex;align-items: center;">
|
||||||
<div class="legendItem" style="display: flex;align-items: center;margin-right: 20px;">
|
<div class="legendItem" style="display: flex;align-items: center;margin-right: 20px;">
|
||||||
@ -288,5 +420,13 @@ onBeforeUnmount(() => {
|
|||||||
<!-- <div class="VehiclesEnteringUnit">辆</div> -->
|
<!-- <div class="VehiclesEnteringUnit">辆</div> -->
|
||||||
<div class="VehiclesEntering" id="VehiclesEntering"></div>
|
<div class="VehiclesEntering" id="VehiclesEntering"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<SmallTitle :title="'对客营收趋势'" style="margin-top: 23px;" />
|
||||||
|
|
||||||
|
<div class="TrendCustomerRevenueCharts">
|
||||||
|
<div class="TrendCustomerRevenue" id="TrendCustomerRevenue"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -206,7 +206,8 @@ 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>
|
<div :class="selectPageTab === 4 ? 'pageTopTabItem selectPageTopTabItem' : 'pageTopTabItem'"
|
||||||
|
@click="handleChangePageTab(4)">彩云驿出行</div>
|
||||||
<!-- @click="handleChangePageTab(4)" -->
|
<!-- @click="handleChangePageTab(4)" -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
import { onMounted, 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';
|
import { handleGetSupplierList, handleGetSupplierListChain } from '../../service';
|
||||||
|
|
||||||
|
|
||||||
// 供应商列表
|
// 供应商列表
|
||||||
@ -20,7 +20,9 @@ const handleGetData = async () => {
|
|||||||
ProvinceCode: "530000",
|
ProvinceCode: "530000",
|
||||||
StatisticsMonth: "202505"
|
StatisticsMonth: "202505"
|
||||||
}
|
}
|
||||||
const data = await handleGetSupplierList(req)
|
const data = await handleGetSupplierListChain(req)
|
||||||
|
console.log('handleGetSupplierListChainhandleGetSupplierListChain', data);
|
||||||
|
|
||||||
supplierList.value = data.slice(0, 9)
|
supplierList.value = data.slice(0, 9)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -57,6 +57,7 @@ import AnnualAccountsReceivable from './components/AnnualAccountsReceivable/Annu
|
|||||||
import DetailedPayment from './components/DetailedPayment/DetailedPayment.vue';
|
import DetailedPayment from './components/DetailedPayment/DetailedPayment.vue';
|
||||||
import DailyInspection from './components/DailyInspection/DailyInspection.vue';
|
import DailyInspection from './components/DailyInspection/DailyInspection.vue';
|
||||||
import AssessmentScoringRanking from './components/AssessmentScoringRanking/AssessmentScoringRanking.vue';
|
import AssessmentScoringRanking from './components/AssessmentScoringRanking/AssessmentScoringRanking.vue';
|
||||||
|
import SmallTitle from './components/smallTitle/smallTitle.vue';
|
||||||
|
|
||||||
|
|
||||||
// 页面样式
|
// 页面样式
|
||||||
@ -113,52 +114,27 @@ const handleChangePageTab = (value: number) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 分区一 -->
|
<!-- 分区一 -->
|
||||||
<div class="content169" v-if="selectPageTab === 1 || selectPageTab === 3">
|
<div class="content169" v-show="selectPageTab === 1">
|
||||||
<div class="content169Left">
|
<div class="content169Left">
|
||||||
<!-- 消息轮播框 -->
|
<!-- 消息轮播框 -->
|
||||||
<NoticeListBox :currentService="currentService" />
|
<NoticeListBox :currentService="currentService" />
|
||||||
|
|
||||||
<template v-if="selectPageTab === 1">
|
<!-- <modalTitle :title="'流量趋势'" style="margin-top: 20px;" /> -->
|
||||||
<!-- <modalTitle :title="'流量趋势'" style="margin-top: 20px;" /> -->
|
<div class="content169LeftContent">
|
||||||
<div class="content169LeftContent">
|
<!-- 服务区概况 -->
|
||||||
<!-- 服务区概况 -->
|
<OverviewOfServiceArea />
|
||||||
<OverviewOfServiceArea />
|
|
||||||
|
|
||||||
<NewBigTitleBox :title="'管理运营监控'" style="margin-top: 15px;" />
|
|
||||||
|
|
||||||
<!-- 今日走势图 -->
|
|
||||||
<TodayTrend />
|
|
||||||
|
|
||||||
<!-- 服务区繁忙排行 交易排行 -->
|
|
||||||
<BusyTradingRanking style="margin-top: 11px;" />
|
|
||||||
|
|
||||||
<!-- 交易预警 -->
|
|
||||||
<!-- <TradingAlert style="margin-top: 11px;" /> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</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>
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
<NewBigTitleBox :title="'特情事件'" style="margin-top: 15px;" />
|
||||||
|
|
||||||
|
<!-- 今日走势图 -->
|
||||||
|
<!-- <TodayTrend /> -->
|
||||||
|
|
||||||
|
<!-- 服务区繁忙排行 交易排行 -->
|
||||||
|
<!-- <BusyTradingRanking style="margin-top: 11px;" /> -->
|
||||||
|
|
||||||
|
<!-- 交易预警 -->
|
||||||
|
<TradingAlert style="margin-top: 11px;" />
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- <modalTitle :title="'节假日营收分析'" style="margin-top: 20px;">
|
<!-- <modalTitle :title="'节假日营收分析'" style="margin-top: 20px;">
|
||||||
<template #extra>
|
<template #extra>
|
||||||
@ -186,61 +162,38 @@ const handleChangePageTab = (value: number) => {
|
|||||||
<!-- <AnnouncementTopic style="position: relative;z-index: 9;" /> -->
|
<!-- <AnnouncementTopic style="position: relative;z-index: 9;" /> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="content169Right">
|
<div class="content169Right">
|
||||||
<!-- 时间天气等内容 -->
|
<!-- 时间天气等内容 -->
|
||||||
<BasicMessageBox :currentService="currentService" />
|
<BasicMessageBox :currentService="currentService" />
|
||||||
|
|
||||||
<template v-if="selectPageTab === 1">
|
<NewBigTitleBox title="流量趋势" style="margin-top: 24px;" />
|
||||||
<NewBigTitleBox title="流量趋势" style="margin-top: 24px;" />
|
|
||||||
|
|
||||||
<div class="content169LeftContent" style="margin-top: 21px;">
|
<div class="content169LeftContent" style="margin-top: 21px;">
|
||||||
<div class="leftContentBoxItem">
|
<div class="leftContentBoxItem">
|
||||||
<!-- 车流断面趋势 -->
|
<!-- 断面流量趋势 -->
|
||||||
<TrendOfTrafficFlow :currentService="currentService" />
|
<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>
|
||||||
|
|
||||||
</template>
|
<div class="leftContentBoxItem" style="margin-top: 23px;">
|
||||||
|
<!-- 入区车流趋势 -->
|
||||||
|
<VehiclesEntering :currentService="currentService" />
|
||||||
<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>
|
</div>
|
||||||
</template>
|
|
||||||
|
|
||||||
|
<!-- <div class="leftContentBoxItem" style="margin-top: 30px;"> -->
|
||||||
|
<!-- 客流变化 -->
|
||||||
|
<!-- <PassengerFlowChanges :currentService="currentService" /> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
|
||||||
|
|
||||||
|
<div class="leftContentBoxItem" style="margin-top: 33px;">
|
||||||
|
<!-- 经营效益趋势 -->
|
||||||
|
<VehicleModelStay />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pageBottom" v-if="selectPageTab === 1 || selectPageTab === 3">
|
<div class="pageBottom" v-if="selectPageTab === 1">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -270,26 +223,7 @@ const handleChangePageTab = (value: number) => {
|
|||||||
<PreferenceType style="margin-left: 20px;margin-top: 20px;" />
|
<PreferenceType style="margin-left: 20px;margin-top: 20px;" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="left3stBottom">
|
<div class="left3stBottom" style="margin-top: 0;">
|
||||||
<div class="left3stBottomItem">
|
|
||||||
<!-- 消费转化率对比图 -->
|
|
||||||
<ConsumptionConversion />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="left3stBottomItem">
|
|
||||||
<!-- 消费水平 -->
|
|
||||||
<ConsumptionLevel />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="left3stBottomItem">
|
|
||||||
<!-- 消费时段分析 -->
|
|
||||||
<ConsumptionPeriod style="margin-top: 11px;" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="left3stBottomItem">
|
|
||||||
<!-- 品牌消费水平 -->
|
|
||||||
<BrandConsumptionLevel style="margin-top: 11px;" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="left3stBottomItem">
|
<div class="left3stBottomItem">
|
||||||
<!-- 客群特征分析 -->
|
<!-- 客群特征分析 -->
|
||||||
@ -300,8 +234,34 @@ const handleChangePageTab = (value: number) => {
|
|||||||
<!-- 客群消费偏好 -->
|
<!-- 客群消费偏好 -->
|
||||||
<CustomerConsumptionPreferences style="margin-top: 15px;" />
|
<CustomerConsumptionPreferences style="margin-top: 15px;" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 交易画像分析 -->
|
||||||
|
<NewBigTitleBox title="交易画像分析" :type="2" style="margin-top: 15px;" />
|
||||||
|
|
||||||
|
<div class="left3stBottom" style="margin-top: 0;">
|
||||||
|
<div class="left3stBottomItem">
|
||||||
|
<!-- 消费转化率对比图 -->
|
||||||
|
<ConsumptionConversion style="margin-top: 15px;" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="left3stBottomItem">
|
||||||
|
<!-- 消费水平 -->
|
||||||
|
<ConsumptionLevel style="margin-top: 15px;" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="left3stBottomItem">
|
||||||
|
<!-- 消费时段分析 -->
|
||||||
|
<ConsumptionPeriod style="margin-top: 15px;" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="left3stBottomItem">
|
||||||
|
<!-- 品牌消费水平 -->
|
||||||
|
<BrandConsumptionLevel style="margin-top: 15px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="content1692stCenter">
|
<div class="content1692stCenter">
|
||||||
<NewBigTitleBox :title="'月度经营情况'" />
|
<NewBigTitleBox :title="'月度经营情况'" />
|
||||||
@ -323,10 +283,13 @@ const handleChangePageTab = (value: number) => {
|
|||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="content1692stRight">
|
<div class="content1692stRight">
|
||||||
|
<!-- 时间天气等内容 -->
|
||||||
|
<BasicMessageBox :currentService="currentService" style="margin-top: 20px;" />
|
||||||
|
|
||||||
<NewBigTitleBox :title="'经营业态月度情况'" style="margin-top: 20px;" />
|
<NewBigTitleBox :title="'经营业态月度情况'" style="margin-top: 20px;" />
|
||||||
<div class="rightContentBox">
|
<div class="rightContentBox">
|
||||||
<!-- 区域营收占比 -->
|
<!-- 区域营收占比 -->
|
||||||
<RegionalRevenue :currentService="currentService" style="margin-top: 20px;" />
|
<RegionalRevenue :currentService="currentService" style="margin-top: 10px;" />
|
||||||
|
|
||||||
<!-- 多业态收入 -->
|
<!-- 多业态收入 -->
|
||||||
<!-- <MultiIndustryIncome style="margin-top: 34px;" :currentService="currentService" /> -->
|
<!-- <MultiIndustryIncome style="margin-top: 34px;" :currentService="currentService" /> -->
|
||||||
@ -373,55 +336,81 @@ const handleChangePageTab = (value: number) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 分区三 -->
|
<!-- 分区三 -->
|
||||||
<div class="content1693st" v-if="selectPageTab === 99">
|
<div class="content1693st" v-if="selectPageTab === 3">
|
||||||
<div class="content1693stItem">
|
<div class="content1693stItem">
|
||||||
<!-- 消息轮播框 -->
|
<!-- 消息轮播框 -->
|
||||||
<NoticeListBox />
|
<NoticeListBox :currentService="currentService" />
|
||||||
<modalTitle :title="'供应商'" style="margin-top: 20px;" />
|
|
||||||
<SupplierListBox />
|
|
||||||
|
|
||||||
<!-- 品牌 -->
|
<NewBigTitleBox title="应收账款" style="margin-top: 20px;" />
|
||||||
<modalTitle :title="'品牌'" style="margin-top: 20px;" />
|
<div style="width: 100%;box-sizing: border-box;padding: 20px 11px;">
|
||||||
<!-- 品牌列表 -->
|
<!-- 合同信息 -->
|
||||||
<BrandListtBox />
|
<ContractInformation />
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content1693stItem" style="padding-top: 46px;">
|
<!-- 收款完成进度 -->
|
||||||
<!-- 商户生态结构图谱 -->
|
<PaymentProgress style="margin-top: 24px;" />
|
||||||
<modalTitle :title="'商户生态结构图谱'" />
|
|
||||||
|
|
||||||
<div class="content1693stItem2stContent">
|
<!-- 收款预警 -->
|
||||||
<!-- 商户类别 -->
|
<AccountsReceivableWarning style="margin-top: 24px;" />
|
||||||
<MerchantCategory />
|
|
||||||
|
|
||||||
<!-- 扣分类型趋势 -->
|
|
||||||
<DeductionType style="margin-top: 30px;" />
|
|
||||||
|
|
||||||
<!-- 商户评分排行榜 -->
|
|
||||||
<MerchantRatingRanking style="margin-top: 16px;" />
|
|
||||||
|
|
||||||
<!-- 优质商户 -->
|
|
||||||
<HighQualityMerchants style="margin-top: 20px;" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content1693stItem" style="padding-top: 46px;">
|
<div class="content1693stItem" style="padding-top: 46px;">
|
||||||
<!-- 员工福利与商城数据 -->
|
<template>
|
||||||
<modalTitle :title="'员工福利与商城数据'" />
|
<!-- 商户生态结构图谱 -->
|
||||||
<div class="content1693stItem2stContent">
|
<modalTitle :title="'商户生态结构图谱'" />
|
||||||
<!-- 本月福利金发送额度 -->
|
|
||||||
<ThisMonthBenefits />
|
|
||||||
|
|
||||||
<!-- 核心品类占比 -->
|
<div class="content1693stItem2stContent">
|
||||||
<CoreCategory style="margin-top: 20px;" />
|
<!-- 商户类别 -->
|
||||||
|
<MerchantCategory />
|
||||||
|
|
||||||
<!-- 热门商品榜单 -->
|
<!-- 扣分类型趋势 -->
|
||||||
<HotProductList style="margin-top: 30px;" :pageType="'left'" />
|
<DeductionType style="margin-top: 30px;" />
|
||||||
</div>
|
|
||||||
|
<!-- 商户评分排行榜 -->
|
||||||
|
<MerchantRatingRanking style="margin-top: 16px;" />
|
||||||
|
|
||||||
|
<!-- 优质商户 -->
|
||||||
|
<HighQualityMerchants style="margin-top: 20px;" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content1693stItem" style="padding-top: 46px;">
|
||||||
|
<template>
|
||||||
|
<!-- 员工福利与商城数据 -->
|
||||||
|
<modalTitle :title="'员工福利与商城数据'" />
|
||||||
|
<div class="content1693stItem2stContent">
|
||||||
|
<!-- 本月福利金发送额度 -->
|
||||||
|
<ThisMonthBenefits />
|
||||||
|
|
||||||
|
<!-- 核心品类占比 -->
|
||||||
|
<CoreCategory style="margin-top: 20px;" />
|
||||||
|
|
||||||
|
<!-- 热门商品榜单 -->
|
||||||
|
<HotProductList style="margin-top: 30px;" :pageType="'left'" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content1693stItem">
|
<div class="content1693stItem">
|
||||||
|
<!-- 时间天气等内容 -->
|
||||||
|
<BasicMessageBox :currentService="currentService" />
|
||||||
|
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -429,7 +418,7 @@ const handleChangePageTab = (value: number) => {
|
|||||||
<div class="content1694st" v-if="selectPageTab === 4">
|
<div class="content1694st" v-if="selectPageTab === 4">
|
||||||
<div class="content1694stItem">
|
<div class="content1694stItem">
|
||||||
<!-- 消息轮播框 -->
|
<!-- 消息轮播框 -->
|
||||||
<NoticeListBox style="margin-top: 20px;" />
|
<NoticeListBox />
|
||||||
|
|
||||||
<NewBigTitleBox :title="'管理运营监控'" style="margin-top: 29px;" />
|
<NewBigTitleBox :title="'管理运营监控'" style="margin-top: 29px;" />
|
||||||
|
|
||||||
@ -456,14 +445,14 @@ const handleChangePageTab = (value: number) => {
|
|||||||
|
|
||||||
|
|
||||||
<div class="content1694stItem">
|
<div class="content1694stItem">
|
||||||
<NewBigTitleBox :title="'品牌'" style="margin-top: 74px;" />
|
<NewBigTitleBox :title="'品牌'" style="margin-top: 54px;" />
|
||||||
|
|
||||||
<!-- 商户类别比例图 和 下面的列表 -->
|
<!-- 商户类别比例图 和 下面的列表 -->
|
||||||
<BrandDetail />
|
<BrandDetail />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content1694stItem">
|
<div class="content1694stItem">
|
||||||
<NewBigTitleBox :title="'供应商'" style="margin-top: 74px;" />
|
<NewBigTitleBox :title="'供应商'" style="margin-top: 54px;" />
|
||||||
<SupplierListBox />
|
<SupplierListBox />
|
||||||
<!-- 在线服务区和在线收银机 -->
|
<!-- 在线服务区和在线收银机 -->
|
||||||
<!-- <TodayTrend /> -->
|
<!-- <TodayTrend /> -->
|
||||||
@ -476,7 +465,7 @@ const handleChangePageTab = (value: number) => {
|
|||||||
</div>
|
</div>
|
||||||
<div class="content1694stItem">
|
<div class="content1694stItem">
|
||||||
<!-- 时间天气等内容 -->
|
<!-- 时间天气等内容 -->
|
||||||
<BasicMessageBox style="margin-top: 19px;" />
|
<BasicMessageBox :currentService="currentService" />
|
||||||
|
|
||||||
<NewBigTitleBox :title="'电商模块'" style="margin-top: 28px;" />
|
<NewBigTitleBox :title="'电商模块'" style="margin-top: 28px;" />
|
||||||
|
|
||||||
@ -489,7 +478,7 @@ const handleChangePageTab = (value: number) => {
|
|||||||
<ThisMonthBenefits style="margin-top: 10px;" />
|
<ThisMonthBenefits style="margin-top: 10px;" />
|
||||||
|
|
||||||
<!-- 核心品类占比 -->
|
<!-- 核心品类占比 -->
|
||||||
<CoreCategory style="margin-top: 10px;" />
|
<!-- <CoreCategory style="margin-top: 10px;" /> -->
|
||||||
|
|
||||||
<NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />
|
<NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />
|
||||||
|
|
||||||
|
|||||||
@ -114,7 +114,7 @@ export async function handleGetCurrentEarlyWarning(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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -426,6 +426,15 @@ export async function handleGetExamineResultList(params: any) {
|
|||||||
return data.Result_Data.List
|
return data.Result_Data.List
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 考核考评的数据 - 新的
|
||||||
|
export async function handleGetEvaluateResList(params: any) {
|
||||||
|
const data: any = await requestPos.post('/Examine/GetEvaluateResList', params)
|
||||||
|
if (data.Result_Code !== 100) {
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
return data.Result_Data.List
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// 获取服务区基础设施汇总数据
|
// 获取服务区基础设施汇总数据
|
||||||
export async function handleGetServerpartServiceSummary(params: any) {
|
export async function handleGetServerpartServiceSummary(params: any) {
|
||||||
@ -454,3 +463,34 @@ export async function handleGetSupplierList(params: any) {
|
|||||||
}
|
}
|
||||||
return data.Result_Data.List
|
return data.Result_Data.List
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 获取供应商的列表数据
|
||||||
|
export async function handleGetSupplierListChain(params: any) {
|
||||||
|
const data: any = await requestPos.post('/SupplyChain/GetSupplierList', params)
|
||||||
|
if (data.Result_Code !== 100) {
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
return data.Result_Data.List
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 获取供应商的列表数据
|
||||||
|
export async function handleGetMallOrderSummary(params: any) {
|
||||||
|
const data: any = await requestPos.post('/SupplyChain/GetMallOrderSummary', params)
|
||||||
|
if (data.Result_Code !== 100) {
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
return data.Result_Data.List
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 获取员工福利汇总数据
|
||||||
|
export async function handleGetWelFareSummary(params: any) {
|
||||||
|
const data: any = await requestPos.post('/SupplyChain/GetWelFareSummary', params)
|
||||||
|
if (data.Result_Code !== 100) {
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
return data.Result_Data
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user