121 lines
2.6 KiB
Vue
121 lines
2.6 KiB
Vue
<template>
|
|
<div class="h-full flex flex-col">
|
|
<div class="flex justify-between h-10 items-center px-4">
|
|
<div class="text-[#999] text-sm">年度目标</div>
|
|
<div class="w-30">
|
|
<a-select
|
|
ref="select"
|
|
v-model:value="day"
|
|
class="w-full"
|
|
@change="onChange"
|
|
>
|
|
<a-select-option :value="item" v-for="item in years" :key="item">{{
|
|
item
|
|
}}</a-select-option>
|
|
</a-select>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1" ref="yRef"></div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useECharts } from '@/components/echarts/useECharts.js'
|
|
import echarts from '@/components/echarts/echarts.js'
|
|
import http from '@/utils/request'
|
|
const day = ref(null)
|
|
const yRef = ref(null)
|
|
const { setOptions } = useECharts(yRef)
|
|
const years = ref([])
|
|
const datas = ref({})
|
|
|
|
const createFiveYears = () => {
|
|
const now = new Date()
|
|
for (let i = 0; i < 5; i++) {
|
|
years.value.push(now.getFullYear() - i)
|
|
}
|
|
day.value = years.value[0]
|
|
}
|
|
|
|
onMounted(() => {
|
|
createFiveYears()
|
|
getData()
|
|
})
|
|
|
|
const onChange = () => {
|
|
getData()
|
|
}
|
|
|
|
const getData = async () => {
|
|
const resData = await http.get('/admin-api/api/cockpit/yearly-goals', {
|
|
params: {
|
|
year: day.value,
|
|
},
|
|
})
|
|
datas.value = resData
|
|
chatInit()
|
|
}
|
|
|
|
const chatInit = () => {
|
|
const { expected_performance, actual_performance } = datas.value
|
|
let rate = (actual_performance / expected_performance).toFixed(2)
|
|
console.log(rate);
|
|
if (rate == 'NaN') {
|
|
rate = 0
|
|
}
|
|
const rateValue = (rate * 100).toFixed(0)
|
|
setOptions({
|
|
title: {
|
|
text: `${rateValue}%`,
|
|
x: 'center',
|
|
y: 'center',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
color: '#000',
|
|
},
|
|
},
|
|
color: ['#AAAFC8'],
|
|
|
|
series: [
|
|
{
|
|
name: 'Line1',
|
|
type: 'pie',
|
|
clockWise: true,
|
|
radius: ['80%', '70%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
},
|
|
hoverAnimation: false,
|
|
data: [
|
|
{
|
|
value: rateValue,
|
|
name: '01',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#0E7CE2',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '02',
|
|
value: 100 - rateValue,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#AAAFC8',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
})
|
|
}
|
|
</script>
|