You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
180 lines
3.7 KiB
180 lines
3.7 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2023-11-08 10:45:48
|
|
@ 备注: 公司下所有部门当前时间统计值
|
|
-->
|
|
<script lang='ts' setup>
|
|
import * as echarts from 'echarts'; //引入图形界面
|
|
import { orgTargetAnnualStatistics } from '@/api/displayboardapi/indexapi'
|
|
|
|
const props = defineProps({
|
|
educationOrgId:{
|
|
type:Number,
|
|
default:309
|
|
},
|
|
orgListCont:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
}
|
|
})
|
|
const curreorgId = ref<number>(309)
|
|
const allOrgOneMonth = ref<any>() //指定月
|
|
const orgAllYearLoading = ref(false)
|
|
//所有行政组织月度画图对象
|
|
const orgYearFullMonths = ref(null)
|
|
//行政组织月度绩效
|
|
const departmentYears = ref<any>(null)
|
|
|
|
const yearsInfo = ref<any>("2023")
|
|
|
|
//获取统计图
|
|
const orgChartDrowData = () => {
|
|
orgAllYearLoading.value = true
|
|
let timeYears = allOrgOneMonth.value.getFullYear()
|
|
yearsInfo.value = timeYears
|
|
let sendInfo = {
|
|
orgid:curreorgId.value.toString(),
|
|
years:timeYears
|
|
}
|
|
orgTargetAnnualStatistics(sendInfo)
|
|
.then((data:any)=>{
|
|
console.log(" props.dlyear.data", data)
|
|
if(data.code == 0){
|
|
let dataAry = new Array
|
|
if(data.data.series&&data.data.series.length > 0){
|
|
data.data.series.forEach((item:any)=>{
|
|
dataAry.push({
|
|
name: item.name,
|
|
type: 'line',
|
|
data: item.datalist
|
|
})
|
|
})
|
|
}
|
|
let option = {
|
|
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: data.data.legend,
|
|
bottom:0
|
|
},
|
|
grid: {
|
|
top:"20px",
|
|
left: '1%',
|
|
right: '2%',
|
|
bottom: '60px',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: data.data.xAxis
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
max:data.data.maxscore,
|
|
min:data.data.minscore,
|
|
},
|
|
series: dataAry
|
|
};
|
|
if(orgYearFullMonths.value){
|
|
orgYearFullMonths.value.clear();
|
|
orgYearFullMonths.value.setOption(option)
|
|
}
|
|
|
|
|
|
}
|
|
orgAllYearLoading.value = false
|
|
})
|
|
.finally(()=>{
|
|
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
let dataTime:any = new Date();
|
|
allOrgOneMonth.value = dataTime
|
|
|
|
curreorgId.value = props.educationOrgId
|
|
orgYearFullMonths.value = markRaw(echarts.init(departmentYears.value))
|
|
|
|
orgChartDrowData();
|
|
window.addEventListener('resize', () => {
|
|
// if(orgYearFullMonths.value){
|
|
orgYearFullMonths.value.resize();
|
|
// }
|
|
});
|
|
|
|
|
|
})
|
|
</script>
|
|
<template>
|
|
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;">
|
|
<!--分厂数据统计-->
|
|
<div class="orgAllMothsTitle">
|
|
<el-text class="titleInfo">{{ yearsInfo }}年绩效成绩</el-text>
|
|
<div>
|
|
<el-select v-model="curreorgId" placeholder="请选择公司" @change="orgChartDrowData">
|
|
<el-option
|
|
v-for="item in props.orgListCont"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
<el-date-picker
|
|
v-model="allOrgOneMonth"
|
|
type="year"
|
|
placeholder="请选择时间"
|
|
@change="orgChartDrowData"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
<div ref="departmentYears" v-loading="orgAllYearLoading" element-loading-text="Loading..." class="allOrgAxisCares">
|
|
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.readback{
|
|
// background-color:#FF0000;
|
|
.allOrgAxisCares{
|
|
display: block;
|
|
width:100%;
|
|
height:280px;
|
|
// overflow:auto;
|
|
}
|
|
|
|
}
|
|
.orgAllMothsTitle{
|
|
width:100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content:space-between;
|
|
|
|
}
|
|
.greenColor{
|
|
// background-color:#FFAC52;
|
|
|
|
// padding:0 10px 0 10px;
|
|
}
|
|
.span_icon_left{
|
|
margin-right:10px;
|
|
}
|
|
.cart_top_juLi{
|
|
// margin-top:10px;
|
|
}
|
|
.titleInfo{
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
|