394 lines
13 KiB
Vue
394 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import SmallTitle from '../smallTitle/smallTitle.vue';
|
|
import './AccountsReceivableWarning.less'
|
|
import * as echarts from 'echarts/core';
|
|
import { PieChart } from 'echarts/charts';
|
|
import {
|
|
GridComponent,
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
LegendComponent
|
|
} from 'echarts/components';
|
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
|
import wallet from '../../../../assets/image/wallet.png'
|
|
import { handleGetContractExpiredInfo, handleGetProjectSummaryInfo } from '../../service';
|
|
|
|
// 注册组件
|
|
echarts.use([
|
|
PieChart,
|
|
GridComponent,
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
LegendComponent,
|
|
CanvasRenderer
|
|
]);
|
|
|
|
let myChart: echarts.ECharts;
|
|
let myChart2: echarts.ECharts;
|
|
// 自定义颜色列表
|
|
const colorList = ['#FF307C', '#FF9500', '#00FFB7'];
|
|
const colorListSecond = ['#FF307C', '#FF9500', '#00FFB7'];
|
|
// tab列表
|
|
const tabList = [
|
|
{ label: "应收账款预警", value: 1 },
|
|
{ label: "合同到期预警", value: 2 },
|
|
]
|
|
// 选择的tab
|
|
let selectTab = ref<number>(1)
|
|
// 应收账款预警
|
|
let AccountsReceivableWarning = ref<any>()
|
|
// 图例列表
|
|
let legendList = ref<any>([])
|
|
|
|
|
|
onMounted(async () => {
|
|
await handleHaveFirstPie()
|
|
await handleHaveSecond()
|
|
})
|
|
|
|
// 获取数据
|
|
const handleGetData = async () => {
|
|
let category: string[] = []
|
|
let seriesData: number[] = []
|
|
let realData: string[] = []
|
|
|
|
const req: any = {
|
|
// ProvinceCode: "530000",
|
|
ProvinceCode: "340000",
|
|
}
|
|
const data = await handleGetProjectSummaryInfo(req)
|
|
|
|
console.log('dsajoidasjodasjoida', data);
|
|
|
|
// 应收账款预警
|
|
let ArrearageList = data.ArrearageList
|
|
|
|
AccountsReceivableWarning.value = data
|
|
|
|
|
|
if (ArrearageList && ArrearageList.length > 0) {
|
|
ArrearageList.forEach((item: any) => {
|
|
category.push(item.Overdue_Situation)
|
|
seriesData.push(item.Arrearage_Amount)
|
|
})
|
|
}
|
|
|
|
let res = {
|
|
category: category,// x轴的内容
|
|
seriesData: seriesData,// y轴的数据
|
|
realData: realData
|
|
}
|
|
return res
|
|
}
|
|
|
|
// 修改选择的tab
|
|
// const handleChangeSelectTab = async (value: number) => {
|
|
// selectTab.value = value
|
|
// if (value === 1) {
|
|
// await handleHaveFirstPie()
|
|
// } else {
|
|
// await handleHaveSecond()
|
|
// }
|
|
// }
|
|
|
|
// 拿到第一个
|
|
const handleHaveFirstPie = async () => {
|
|
const res: any = await handleGetData()
|
|
const chartDom = document.getElementById('AccountsReceivableWarningPieBox1');
|
|
if (!chartDom) return;
|
|
|
|
myChart = echarts.init(chartDom);
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
backgroundColor: '#fff', // 白色背景
|
|
borderColor: '#fff', // 白色边框
|
|
textStyle: {
|
|
color: '#333', // 文字颜色
|
|
fontSize: 14
|
|
},
|
|
formatter: function (params: any) {
|
|
return `
|
|
<div style="font-weight:bold">${params.name} ${params.value}%</div>
|
|
`;
|
|
}
|
|
},
|
|
graphic: { // 关键配置：在图表中心添加图片
|
|
elements: [
|
|
{
|
|
type: 'image',
|
|
style: {
|
|
image: wallet,
|
|
width: 83,
|
|
height: 83
|
|
},
|
|
left: 'center',
|
|
top: 'center',
|
|
z: 10
|
|
}
|
|
]
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['80%', '100%'],
|
|
center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
|
avoidLabelOverlap: false,
|
|
|
|
itemStyle: {
|
|
color: function (params: any) {
|
|
return colorList[params.dataIndex];
|
|
}
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
emphasis: false,
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: res.seriesData
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
myChart.resize();
|
|
window.addEventListener('resize', resizeChart);
|
|
}
|
|
|
|
const handleGetDataSecond = async () => {
|
|
let category: string[] = []
|
|
let seriesData: number[] = []
|
|
let realData: string[] = []
|
|
|
|
const req: any = {
|
|
// ProvinceCode: "530000",
|
|
ProvinceCode: "340000",
|
|
}
|
|
const data = await handleGetContractExpiredInfo(req)
|
|
|
|
console.log('dasdasjdasoijdo', data);
|
|
|
|
// 应收账款预警
|
|
let ContractHalfYearListExpired = data.ContractHalfYearListExpired
|
|
|
|
AccountsReceivableWarning.value = data
|
|
|
|
|
|
if (ContractHalfYearListExpired && ContractHalfYearListExpired.length > 0) {
|
|
ContractHalfYearListExpired.forEach((item: any) => {
|
|
category.push(item.Expired_Situation)
|
|
seriesData.push(item.Expired_Count)
|
|
})
|
|
}
|
|
|
|
let res = {
|
|
category: category,// x轴的内容
|
|
seriesData: seriesData,// y轴的数据
|
|
realData: realData
|
|
}
|
|
return res
|
|
}
|
|
|
|
// 拿到第二个
|
|
const handleHaveSecond = async () => {
|
|
const res: any = await handleGetDataSecond()
|
|
const chartDom = document.getElementById('AccountsReceivableWarningPieBox2');
|
|
if (!chartDom) return;
|
|
|
|
myChart2 = echarts.init(chartDom);
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
backgroundColor: '#fff', // 白色背景
|
|
borderColor: '#fff', // 白色边框
|
|
textStyle: {
|
|
color: '#333', // 文字颜色
|
|
fontSize: 14
|
|
},
|
|
formatter: function (params: any) {
|
|
return `
|
|
<div style="font-weight:bold">${params.name} ${params.value}%</div>
|
|
`;
|
|
}
|
|
},
|
|
graphic: { // 关键配置：在图表中心添加图片
|
|
elements: [
|
|
{
|
|
type: 'image',
|
|
style: {
|
|
image: wallet,
|
|
width: 83,
|
|
height: 83
|
|
},
|
|
left: 'center',
|
|
top: 'center',
|
|
z: 10
|
|
}
|
|
]
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['80%', '100%'],
|
|
center: ['50%', '50%'], // 关键修改：强制居中 [水平位置, 垂直位置]
|
|
avoidLabelOverlap: false,
|
|
|
|
itemStyle: {
|
|
color: function (params: any) {
|
|
return colorListSecond[params.dataIndex];
|
|
}
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
emphasis: false,
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: res.seriesData
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart2.setOption(option);
|
|
myChart2.resize();
|
|
window.addEventListener('resize', resizeChart);
|
|
}
|
|
|
|
const resizeChart = () => {
|
|
myChart?.resize();
|
|
myChart2?.resize();
|
|
};
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', resizeChart);
|
|
myChart?.dispose();
|
|
myChart2?.dispose();
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="AccountsReceivableWarningBox">
|
|
|
|
<!-- <div class="selectTabBox">
|
|
<div :class="selectTab === item.value ? 'tabItem selectTabItem' : 'tabItem'"
|
|
v-for="(item, index) in tabList" :key="index" @click="handleChangeSelectTab(item.value)">{{ item.label
|
|
}}</div>
|
|
</div> -->
|
|
|
|
<div class="AccountsReceivableWarningContent">
|
|
|
|
<SmallTitle :title="'应收账款预警'" />
|
|
|
|
<div class="AccountsReceivableWarningPie" style="margin-top: 25px;">
|
|
<div class="progressPieLeft" id="AccountsReceivableWarningPieBox1"></div>
|
|
|
|
<div class="progressPieRight">
|
|
<div class="progressPieTop">
|
|
<div class="progressPieTopItem">
|
|
<div class="progressPieTopItemLabel">应收欠款(全部)</div>
|
|
<div class="progressPieTopItemValueBox">
|
|
<span class="progressPieTopItemValue">{{
|
|
AccountsReceivableWarning?.Arrearage_Amount || '-' }}</span>
|
|
<span class="progressPieTopItemUnit">万元</span>
|
|
</div>
|
|
</div>
|
|
<div class="progressPieTopItem">
|
|
<div class="progressPieTopItemLabel">欠款合同</div>
|
|
<div class="progressPieTopItemValueBox">
|
|
<span class="progressPieTopItemValue">{{
|
|
AccountsReceivableWarning?.ArrearageContract_Count || '-' }}</span>
|
|
<span class="progressPieTopItemUnit">份</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progressPieBottom">
|
|
<div class="progressPieBottomItem">
|
|
<div class="progressPieBottomItemTop">
|
|
<div class="progressPieBottomItemTopLegend" :style="{ background: colorList[0] }"></div>
|
|
<div class="progressPieBottomItemTopLabel">重大</div>
|
|
</div>
|
|
|
|
<div class="progressPieBottomItemBottom">
|
|
3个月内
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progressPieBottomItem">
|
|
<div class="progressPieBottomItemTop">
|
|
<div class="progressPieBottomItemTopLegend" :style="{ background: colorList[1] }"></div>
|
|
<div class="progressPieBottomItemTopLabel">严重</div>
|
|
</div>
|
|
|
|
<div class="progressPieBottomItemBottom">
|
|
3-6个月
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progressPieBottomItem">
|
|
<div class="progressPieBottomItemTop">
|
|
<div class="progressPieBottomItemTopLegend" :style="{ background: colorList[2] }"></div>
|
|
<div class="progressPieBottomItemTopLabel">一般</div>
|
|
</div>
|
|
|
|
<div class="progressPieBottomItemBottom">
|
|
≥6个月
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<SmallTitle :title="'合同到期预警'" style="margin-top: 21px;" />
|
|
|
|
<div class="AccountsReceivableWarningPie" style="margin-top: 25px;">
|
|
<div class="progressPieLeft" id="AccountsReceivableWarningPieBox2"></div>
|
|
|
|
<div class="progressPieRight">
|
|
<div class="progressPieTop" style="border-bottom: none;">
|
|
<div class="progressPieTopItem">
|
|
<div class="progressPieTopItemLabel">半年内到期合同</div>
|
|
<div class="progressPieTopItemValueBox">
|
|
<span class="progressPieTopItemValue">{{
|
|
AccountsReceivableWarning?.Expired_HalfYearCount || '-' }}</span>
|
|
<span class="progressPieTopItemUnit">份</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="progressPieBottomSecond">
|
|
<div class="progressPieBottomItem"
|
|
v-for="(item, index) in AccountsReceivableWarning?.ContractHalfYearListExpired"
|
|
:key="index">
|
|
<div class="progressPieBottomItemTop">
|
|
<div class="progressPieBottomItemTopLegend"
|
|
:style="{ background: colorListSecond[index] }">
|
|
</div>
|
|
<div class="progressPieBottomItemTopLabel">{{ item.Expired_Situation || "" }}</div>
|
|
</div>
|
|
|
|
<div class="progressPieBottomItemBottomValueBox">
|
|
<div class="progressPieBottomItemBottomValue">{{ item.Expired_Count || "" }}</div>
|
|
<div class="progressPieBottomItemBottomUnit">份</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |