|
|
|
@ -19,6 +19,10 @@ import { ref, onMounted, onBeforeUnmount } from 'vue'; |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
import 'echarts-liquidfill'; |
|
|
|
import 'echarts-liquidfill/src/liquidFill.js'; |
|
|
|
import { useChartStore } from '@/store/modules/chart'; |
|
|
|
|
|
|
|
const chartStore = useChartStore(); |
|
|
|
|
|
|
|
defineOptions({ |
|
|
|
name: 'RiskInspectionCard' |
|
|
|
}); |
|
|
|
@ -30,7 +34,45 @@ const handleResize = () => { |
|
|
|
leftChart?.resize(); |
|
|
|
rightChart?.resize(); |
|
|
|
}; |
|
|
|
onMounted(() => { |
|
|
|
const problemData: any = ref([]); |
|
|
|
const problemCount = ref(0); |
|
|
|
const taskData: any = ref([]); |
|
|
|
const taskCount = ref(0); |
|
|
|
const getChartData = async () => { |
|
|
|
problemCount.value = 0; |
|
|
|
problemData.value = []; |
|
|
|
taskCount.value = 0; |
|
|
|
taskData.value = []; |
|
|
|
|
|
|
|
const pramas = { |
|
|
|
endTime: '', |
|
|
|
startTime: '', |
|
|
|
group: 'K5' |
|
|
|
}; |
|
|
|
const data = await chartStore.initStatisticChart(pramas); |
|
|
|
if (data?.yaxis?.length) { |
|
|
|
let newArr = data.yaxis.flatMap((v: any) => v.series); |
|
|
|
newArr?.forEach((item: any) => { |
|
|
|
if (['问题数', '数量'].includes(item.name)) { |
|
|
|
problemData.value.push({ |
|
|
|
name: item.name || '', |
|
|
|
value: Number(item.sum)?.toFixed(0) || 0, |
|
|
|
unit: item.unit || '' |
|
|
|
}); |
|
|
|
problemCount.value += Number(item.sum) || 0; |
|
|
|
} else { |
|
|
|
taskData.value.push({ |
|
|
|
name: item.name || '', |
|
|
|
value: Number(item.sum)?.toFixed(0) || 0, |
|
|
|
unit: item.unit || '' |
|
|
|
}); |
|
|
|
taskCount.value += Number(item.sum) || 0; |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
initChart(); |
|
|
|
}; |
|
|
|
const initChart = () => { |
|
|
|
leftChart = echarts.init(problemEchartRef.value); |
|
|
|
|
|
|
|
const color = ['#FFBC37', '#429BF4']; |
|
|
|
@ -64,18 +106,10 @@ onMounted(() => { |
|
|
|
show: false |
|
|
|
} |
|
|
|
}; |
|
|
|
const legendName = ['数量', '问题数']; |
|
|
|
const pieValue = [98, 56]; |
|
|
|
var pieData: any = []; |
|
|
|
for (var i = 0; i < legendName.length; i++) { |
|
|
|
pieData.push({ |
|
|
|
name: legendName[i], |
|
|
|
value: pieValue[i] |
|
|
|
}); |
|
|
|
} |
|
|
|
const leftCenterValue = ['50%', '37%'] |
|
|
|
|
|
|
|
// Chart options for the left side (nested pie) |
|
|
|
const legendName = problemData.value.map((item: any) => item.name); |
|
|
|
const pieValue = problemData.value.map((item: any) => item.value); |
|
|
|
const leftCenterValue = ['50%', '37%']; |
|
|
|
//核查问题 |
|
|
|
const leftOption = { |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
@ -83,7 +117,7 @@ onMounted(() => { |
|
|
|
}, |
|
|
|
color: ['#FFBC37', '#FFBC37'], |
|
|
|
title: { |
|
|
|
text: pieValue[0], |
|
|
|
text: problemCount.value, |
|
|
|
subtext: '工程总数', |
|
|
|
x: 'center', |
|
|
|
y: '20%', |
|
|
|
@ -134,8 +168,8 @@ onMounted(() => { |
|
|
|
data: legendName, |
|
|
|
formatter: function (name: any) { |
|
|
|
for (var i = 0; i < legendName.length; i++) { |
|
|
|
if (name == pieData[i].name) { |
|
|
|
return '{name|' + name + '}{rate|' + pieValue[i] + '}'; |
|
|
|
if (name == problemData.value[i].name) { |
|
|
|
return '{name|' + name + '}{rate|' + problemData.value[i].value + '}'; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -196,27 +230,15 @@ onMounted(() => { |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
|
|
|
|
// Set options and render left chart |
|
|
|
leftChart.setOption(leftOption); |
|
|
|
|
|
|
|
rightChart = echarts.init(questEchartRef.value); |
|
|
|
const li_qu_legend = ['任务数', '已完成']; |
|
|
|
const taskNum = 98; |
|
|
|
const accomplishNum = 30; |
|
|
|
const li_qu_data = [ |
|
|
|
{ |
|
|
|
name: li_qu_legend[0], |
|
|
|
value: taskNum |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: li_qu_legend[1], |
|
|
|
value: accomplishNum |
|
|
|
} |
|
|
|
]; |
|
|
|
|
|
|
|
// ['任务数', '已完成'] |
|
|
|
const li_qu_legend = taskData.value.map((item: any) => item.name); |
|
|
|
const taskNum = taskData.value.find((item: any) => item.name === '任务数')?.value; |
|
|
|
const accomplishNum = taskData.value.find((item: any) => item.name === '已完成')?.value; |
|
|
|
// 占比率 |
|
|
|
const li_qu_count: any = accomplishNum / taskNum; |
|
|
|
const li_qu_count: any = Number(accomplishNum) / Number(taskNum); |
|
|
|
|
|
|
|
const titleStyle = { |
|
|
|
fontSize: 32, |
|
|
|
@ -227,8 +249,8 @@ onMounted(() => { |
|
|
|
textShadowOffsetX: 0, |
|
|
|
textShadowOffsetY: 1 |
|
|
|
}; |
|
|
|
const centerValue = ['50%', '37%'] |
|
|
|
// Chart options for the right side (liquidFill) |
|
|
|
const centerValue = ['50%', '37%']; |
|
|
|
// 核查任务 |
|
|
|
const rightOption = { |
|
|
|
title: [ |
|
|
|
{ |
|
|
|
@ -280,8 +302,8 @@ onMounted(() => { |
|
|
|
data: li_qu_legend, |
|
|
|
formatter: function (name: any) { |
|
|
|
for (var i = 0; i < li_qu_legend.length; i++) { |
|
|
|
if (name == li_qu_data[i].name) { |
|
|
|
return '{name|' + name + '}{rate|' + li_qu_data[i].value + '}'; |
|
|
|
if (name == taskData.value[i].name) { |
|
|
|
return '{name|' + name + '}{rate|' + taskData.value[i].value + '}'; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -376,6 +398,9 @@ onMounted(() => { |
|
|
|
|
|
|
|
// Set options and render right chart |
|
|
|
rightChart.setOption(rightOption); |
|
|
|
}; |
|
|
|
onMounted(() => { |
|
|
|
getChartData(); |
|
|
|
|
|
|
|
window.addEventListener('resize', handleResize); |
|
|
|
}); |
|
|
|
|
ruancuihong
1 month ago