ShutongInterconnectedChemicalCloudPlatform/src/views/dashboard/components/allorgyear.vue

<!--
@ 作者: 秦东
@ 时间: 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();
    let timeMonth = allOrgOneMonth.value.getMonth();
    // console.log('timeMonth----', timeMonth)
    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 seriesData = [] as any;
            let echartsData = [] as any;
            let axisLabel = [] as any;
            if(data.data.series && data.data.series.length > 0){
                axisLabel = [...data.data.legend];
                let series = data.data.series;
                for(let j=0;j<axisLabel.length;j++){
                    for(let i=0;i<series.length;i++){
                        if(axisLabel[j] === series[i].name){
                            seriesData.push(series[i]);
                        }
                    }
                };
                for(let m=0;m<seriesData.length;m++){
                    if(seriesData[m].datalist && seriesData[m].datalist.length > 0){
                        let serData = seriesData[m].datalist[timeMonth] ? seriesData[m].datalist[timeMonth] : 0;
                        echartsData.push(serData);
                    }
                }
            }
            let option = {
                xAxis: {
                    type: 'category',
                    data: axisLabel,
                    axisLabel: {
                        show: true, 
                        rotate: 60, 
                        margin: 10, 
                    },
                    axisTick: {
                        show: false
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                grid: {
                    left: 10,
                    right: 10,
                    bottom: 0,
                    top: 30,
                    containLabel: true 
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: echartsData,
                        type: 'bar',
                        barWidth: 13,
                        showBackground: true,
                        backgroundStyle: {
                            borderRadius: [5, 5, 5, 5],
                            color: '#F3F3FB'
                        },
                        itemStyle: {
                            borderRadius: [5, 5, 5, 5],
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: '#1E5EFF'
                                    },
                                    {
                                        offset: 0,
                                        color: 'rgba(30,94,255,0.5)'
                                    }
                                ]
                            }
                        },
                    }
                ]
            };
            if (orgYearFullMonths.value) {
                orgYearFullMonths.value.clear();
                orgYearFullMonths.value.setOption(option)
            }
        }
        orgAllYearLoading.value = false;
    })

}

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;height: 100%;">
        <!--分厂数据统计-->
        <div class="orgAllMothsTitle">
            <div class="titleInfo">
                <span>{{ yearsInfo }}</span>
                <span>年绩效成绩</span>
            </div>
            <div class="year-right">
                <el-select v-model="curreorgId" placeholder="请选择公司" @change="orgChartDrowData" class="year-select-mr10">
                    <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="month" 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>
.allOrgAxisCares {
    display: block;
    width: 100%;
    height: 280px;
}
.orgAllMothsTitle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.span_icon_left {
    margin-right: 10px;
}

.titleInfo {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
}

.year-right {
    display: flex;
}

.year-select-mr10 {
    margin-right: 10px;
    width: 250px;
}
</style>