饼图bug修复
This commit is contained in:
@@ -96,6 +96,12 @@ const props = defineProps<Props>()
|
|||||||
|
|
||||||
// 图表引用
|
// 图表引用
|
||||||
const progressChartOption = ref<any>({
|
const progressChartOption = ref<any>({
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c}% ({d}%)'
|
||||||
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie' as const,
|
type: 'pie' as const,
|
||||||
@@ -106,6 +112,7 @@ const progressChartOption = ref<any>({
|
|||||||
bottom: 0,
|
bottom: 0,
|
||||||
data: [],
|
data: [],
|
||||||
label: {
|
label: {
|
||||||
|
show: true,
|
||||||
alignTo: 'edge' as const,
|
alignTo: 'edge' as const,
|
||||||
formatter: '{time|{c} %}\n',
|
formatter: '{time|{c} %}\n',
|
||||||
minMargin: 5,
|
minMargin: 5,
|
||||||
@@ -119,6 +126,7 @@ const progressChartOption = ref<any>({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
|
show: true,
|
||||||
length: 5,
|
length: 5,
|
||||||
length2: 0,
|
length2: 0,
|
||||||
maxSurfaceAngle: 10
|
maxSurfaceAngle: 10
|
||||||
@@ -194,8 +202,9 @@ const handleMajorClick = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
watch(() => props.hiddenDangerData?.progress, (newVal) => {
|
watch(() => props.hiddenDangerData?.progress, (newVal) => {
|
||||||
|
console.log('HiddenDangerPanel watch 触发,progress 数据:', newVal)
|
||||||
refreshProcessCharts(newVal)
|
refreshProcessCharts(newVal)
|
||||||
}, { deep: true })
|
}, { deep: true, immediate: true })
|
||||||
|
|
||||||
// 辅助函数:安全地将值转换为数字,处理 NaN 和字符串 "NaN" 的情况
|
// 辅助函数:安全地将值转换为数字,处理 NaN 和字符串 "NaN" 的情况
|
||||||
const safeNumber = (val: any): number => {
|
const safeNumber = (val: any): number => {
|
||||||
@@ -212,14 +221,23 @@ const refreshProcessCharts = (process): void => {
|
|||||||
console.warn('process is undefined or null')
|
console.warn('process is undefined or null')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const overdue = safeNumber(process.overdue)
|
||||||
|
const processed = safeNumber(process.processed)
|
||||||
|
const processing = safeNumber(process.processing)
|
||||||
|
|
||||||
|
console.log('refreshProcessCharts 数据:', { overdue, processed, processing })
|
||||||
|
|
||||||
const option = { ...progressChartOption.value }
|
const option = { ...progressChartOption.value }
|
||||||
// 确保所有 value 都是有效的数字,将字符串 "NaN" 或真正的 NaN 转换为 0
|
// 确保所有 value 都是有效的数字,将字符串 "NaN" 或真正的 NaN 转换为 0
|
||||||
option.series[0].data = [
|
option.series[0].data = [
|
||||||
{ value: safeNumber(process.overdue), name: '已逾期', itemStyle: { color: '#ef4444' } },
|
{ value: overdue, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||||
{ value: safeNumber(process.processed), name: '已处理', itemStyle: { color: '#10b981' } },
|
{ value: processed, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||||
// { value: safeNumber(process.pending), name: '待排查', itemStyle: { color: '#eab308' } },
|
// { value: safeNumber(process.pending), name: '待排查', itemStyle: { color: '#eab308' } },
|
||||||
{ value: safeNumber(process.processing), name: '处理中', itemStyle: { color: '#3b82f6' } }
|
{ value: processing, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||||
]
|
]
|
||||||
|
|
||||||
|
console.log('更新后的图表数据:', option.series[0].data)
|
||||||
progressChartOption.value = option
|
progressChartOption.value = option
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -250,7 +268,11 @@ const refreshTop3TypesCharts = (top3Types): void => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
// 组件挂载时,如果已有数据,立即更新图表
|
||||||
|
if (props.hiddenDangerData?.progress) {
|
||||||
|
console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
|
||||||
|
refreshProcessCharts(props.hiddenDangerData.progress)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -431,12 +431,17 @@ const handleHiddenDangerPannelData = (query) => {
|
|||||||
// 获取隐患排查治理数据
|
// 获取隐患排查治理数据
|
||||||
getTableList('risk_status_count', query).then(res => {
|
getTableList('risk_status_count', query).then(res => {
|
||||||
if (res.records && res.records.length > 0) {
|
if (res.records && res.records.length > 0) {
|
||||||
_data.overdue = _data.overdue + Number(res.records[0].overdueCnt)
|
// 接口返回的已经是百分比,直接使用
|
||||||
_data.processed = _data.processed + Number(res.records[0].processedCnt)
|
const record = res.records[0]
|
||||||
_data.processing = _data.processing + Number(res.records[0].processingCnt)
|
_data.overdue = Number(record.overdueCnt) || 0
|
||||||
_data.pending = _data.pending
|
_data.processed = Number(record.processedCnt) || 0
|
||||||
|
_data.processing = Number(record.processingCnt) || 0
|
||||||
|
_data.pending = 0 // 接口没有返回pending,设为0
|
||||||
_data.flag = true
|
_data.flag = true
|
||||||
|
|
||||||
|
console.log('risk_status_count 接口返回数据:', record)
|
||||||
|
console.log('处理后的 _data:', _data)
|
||||||
|
|
||||||
if (_data2.flag) {
|
if (_data2.flag) {
|
||||||
// 合并数据
|
// 合并数据
|
||||||
console.log("请求系统和第三方成功,合并数据", _data, _data2);
|
console.log("请求系统和第三方成功,合并数据", _data, _data2);
|
||||||
@@ -445,30 +450,44 @@ const handleHiddenDangerPannelData = (query) => {
|
|||||||
dashboardData.value.hiddenDangerData.general = generalCnt
|
dashboardData.value.hiddenDangerData.general = generalCnt
|
||||||
dashboardData.value.hiddenDangerData.major = majorCnt
|
dashboardData.value.hiddenDangerData.major = majorCnt
|
||||||
|
|
||||||
|
// 如果第三方数据也是百分比,需要合并;否则使用系统数据
|
||||||
|
// 这里假设系统数据是百分比,第三方数据可能是数量或百分比
|
||||||
|
let overdueCnt, processedCnt, processingCnt, pendingCnt
|
||||||
|
if (_data2.overdue > 1 || _data2.processed > 1 || _data2.processing > 1) {
|
||||||
|
// 第三方数据可能是百分比,直接使用系统数据(因为系统数据更准确)
|
||||||
|
overdueCnt = _data.overdue.toFixed(2)
|
||||||
|
processedCnt = _data.processed.toFixed(2)
|
||||||
|
processingCnt = _data.processing.toFixed(2)
|
||||||
|
pendingCnt = _data.pending.toFixed(2)
|
||||||
|
} else {
|
||||||
|
// 第三方数据可能是数量,需要计算百分比
|
||||||
let totalCnt = generalCnt + majorCnt
|
let totalCnt = generalCnt + majorCnt
|
||||||
let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
|
overdueCnt = totalCnt > 0 ? ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2) : '0.00'
|
||||||
let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
|
processedCnt = totalCnt > 0 ? ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2) : '0.00'
|
||||||
let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
|
processingCnt = totalCnt > 0 ? ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) : '0.00'
|
||||||
let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
|
pendingCnt = totalCnt > 0 ? ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) : '0.00'
|
||||||
|
}
|
||||||
|
|
||||||
dashboardData.value.hiddenDangerData.progress = {
|
dashboardData.value.hiddenDangerData.progress = {
|
||||||
overdue: overdueCnt,
|
overdue: overdueCnt,
|
||||||
processed: processedCnt,
|
processed: processedCnt,
|
||||||
processing: processingCnt,
|
processing: processingCnt,
|
||||||
pending: pendingCnt,
|
pending: pendingCnt,
|
||||||
}
|
}
|
||||||
|
console.log('合并后的 progress:', dashboardData.value.hiddenDangerData.progress)
|
||||||
} else {
|
} else {
|
||||||
console.log("请求系统成功,展示数据", _data, _data2);
|
console.log("请求系统成功,展示数据", _data, _data2);
|
||||||
dashboardData.value.hiddenDangerData.general = _data.general
|
dashboardData.value.hiddenDangerData.general = _data.general
|
||||||
dashboardData.value.hiddenDangerData.major = _data.major
|
dashboardData.value.hiddenDangerData.major = _data.major
|
||||||
|
|
||||||
let totalCnt = _data.general + _data.major
|
// 接口返回的已经是百分比,直接使用
|
||||||
// 显示系统数据
|
|
||||||
dashboardData.value.hiddenDangerData.progress = {
|
dashboardData.value.hiddenDangerData.progress = {
|
||||||
overdue: (_data.overdue / totalCnt * 100).toFixed(2),
|
overdue: _data.overdue.toFixed(2),
|
||||||
processed: (_data.processed / totalCnt * 100).toFixed(2),
|
processed: _data.processed.toFixed(2),
|
||||||
processing: (_data.processing / totalCnt * 100).toFixed(2),
|
processing: _data.processing.toFixed(2),
|
||||||
pending: (_data.pending / totalCnt * 100).toFixed(2),
|
pending: _data.pending.toFixed(2),
|
||||||
}
|
}
|
||||||
|
console.log('系统数据 progress:', dashboardData.value.hiddenDangerData.progress)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -95,7 +95,10 @@ const visitorCount = ref<number>(0)
|
|||||||
// 总体概览-各园区统计
|
// 总体概览-各园区统计
|
||||||
const parkStatistics = ref<any>()
|
const parkStatistics = ref<any>()
|
||||||
// 危险作业/安全考核/安全、保密培训
|
// 危险作业/安全考核/安全、保密培训
|
||||||
const riskStatistics = ref<any>()
|
const riskStatistics = ref<Record<TabType, any[]>>({
|
||||||
|
安全类: [],
|
||||||
|
工程类: []
|
||||||
|
})
|
||||||
const dangerDetail = ref<any>()
|
const dangerDetail = ref<any>()
|
||||||
// 动画相关的状态
|
// 动画相关的状态
|
||||||
const isAnimating = ref<boolean>(false)
|
const isAnimating = ref<boolean>(false)
|
||||||
@@ -595,6 +598,24 @@ const handleRiskTabChange = async (tab: TabType) => {
|
|||||||
})
|
})
|
||||||
])
|
])
|
||||||
|
|
||||||
|
// 处理接口返回的数据结构:可能是数组或对象
|
||||||
|
const getRecords = (response: any): any[] => {
|
||||||
|
if (Array.isArray(response)) {
|
||||||
|
return response
|
||||||
|
} else if (response && Array.isArray(response.records)) {
|
||||||
|
return response.records
|
||||||
|
} else if (response && response.data && Array.isArray(response.data)) {
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
|
||||||
|
const maintenanceRecords = getRecords(maintenanceResponse)
|
||||||
|
const inspectionRecords = getRecords(inspectionResponse)
|
||||||
|
|
||||||
|
console.log('维保任务数据:', maintenanceResponse, '提取的records:', maintenanceRecords)
|
||||||
|
console.log('巡检任务数据:', inspectionResponse, '提取的records:', inspectionRecords)
|
||||||
|
|
||||||
// 周期映射
|
// 周期映射
|
||||||
const cycleMap: Record<string, string> = {
|
const cycleMap: Record<string, string> = {
|
||||||
'day': '每日',
|
'day': '每日',
|
||||||
@@ -637,8 +658,8 @@ const handleRiskTabChange = async (tab: TabType) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 转换维保和巡检数据
|
// 转换维保和巡检数据
|
||||||
const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
|
const maintenanceCharts = convertToChartData(maintenanceRecords, '维保类')
|
||||||
const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
|
const inspectionCharts = convertToChartData(inspectionRecords, '巡检类')
|
||||||
|
|
||||||
// 合并为6个图表:先维保(3个),后巡检(3个)
|
// 合并为6个图表:先维保(3个),后巡检(3个)
|
||||||
const allCharts = [...maintenanceCharts, ...inspectionCharts]
|
const allCharts = [...maintenanceCharts, ...inspectionCharts]
|
||||||
@@ -647,6 +668,7 @@ const handleRiskTabChange = async (tab: TabType) => {
|
|||||||
riskStatistics.value[tab] = allCharts
|
riskStatistics.value[tab] = allCharts
|
||||||
|
|
||||||
console.log('更新后的riskStatistics:', riskStatistics.value)
|
console.log('更新后的riskStatistics:', riskStatistics.value)
|
||||||
|
console.log('当前tab的图表数据:', allCharts)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取风险统计数据失败:', error)
|
console.error('获取风险统计数据失败:', error)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user