YZProjectCloud/yanzhu-bigscreen/src/views/projectLabor.vue

<template>
    <div class="project-labor main-page">
        <el-col :span="6" class="h100">
            <module-one-1-1 label="劳务人员概况">
                <div class="attendance-info warning-info">
                    <div class="attendance-info-title warning-info-title">
                        <div :class="attendanceNav == 0 ? 'active' : ''" @click="doAttendanceNav(0, '在岗人员')">在岗人员</div>
                        <div :class="attendanceNav == 1 ? 'active' : ''" @click="doAttendanceNav(1, '今日出勤')">今日出勤</div>
                    </div>
                    <el-row>
                        <el-col :span="8" class="attendance-tag">
                            <div class="survey_content">
                                <div class="survey_content_img">
                                    <img
                                        :src="
                      attendanceNav == 0
                        ? 'images/survey_icon_4.png'
                        : 'images/survey_icon_5.png'
                    "
                                    />
                                </div>
                            </div>
                            <div class="survey_content_number labour-survey_content_number">
                                <div class="survey_content_value">
                                    <span>{{ attendanceTotal }}</span> 人
                                </div>
                                <p>{{ attendanceNav == 0 ? "在岗人员" : "今日出勤" }}</p>
                            </div>
                        </el-col>
                        <el-col :span="16">
                            <staffSurveyChart :key="chartKey" :height="$dpi() == '1K' ? '220px' : $dpi() == '2K' ? '330px' : '550px'" :data="attendanceData" :width="140"></staffSurveyChart>
                        </el-col>
                    </el-row>
                </div>
            </module-one-1-1>
            <module-one-1-1 label="劳务人员七天出勤趋势">
                <my-chart :key="chartKey" id="prj_labor_chart2" width="100%" height="100%" :render="renderChart2"></my-chart>
            </module-one-1-1>
            <module-one-1-1 label="劳务人员年龄分布">
                <my-chart :key="chartKey" id="prj_labor_chart3" width="100%" height="100%" :render="renderChart3"></my-chart>
            </module-one-1-1>
        </el-col>
        <el-col :span="12" class="h100">
            <module-one-2-2 label class="no-title no-border">
                <my-chart :key="chartKey" id="prj-labor-map" width="100%" height="100%" :render="renderMap"></my-chart>
            </module-one-2-2>
            <module-one-1-2 label="实时进出" class="prj-plan"></module-one-1-2>
        </el-col>
        <el-col :span="6" class="h100">
            <module-one-1-1 label="工种占比分布"></module-one-1-1>
            <module-one-1-1 label="人员地区分布">
                <my-chart :key="chartKey" id="prj_labor_chart5" width="100%" height="100%" :render="renderChart5"></my-chart>
            </module-one-1-1>
            <module-one-1-1 label="人员预期"></module-one-1-1>
        </el-col>
    </div>
</template>

<script>
import debounce from 'lodash.debounce'
import staffSurveyChart from '@/components/staffSurveyChart.vue'
export default {
    components: { staffSurveyChart },
    data() {
        return {
            dpi: '',
            chartKey: 0,
            selProject: null,
            attendanceNav: 0,
            attendanceTotal: 0,
            attendanceData: [
                { text: '普通工种', value: 0, id: 0 },
                { text: '特殊工种', value: 0, id: 0 },
                { text: '管理人员', value: 0, id: 0 },
            ],
            nativeList: [],
            ageList: [],
            weekData: [],
        }
    },
    methods: {
        init() {
            if (!this.selProject) {
                return
            }
            this.loadAttendanceData()
            this.getGroupByWorker()
            this.groupAttendanceLastWeek()
        },
        groupAttendanceLastWeek() {
            this.$api.labor.groupAttendanceLastWeek(this.selProject.vendorsCode, this.selProject.id).then((d) => {
                this.weekData = d.data.map((it) => {
                    return {
                        name: it.dt.substring(5).replace('-', '.'),
                        value: it.cnt,
                        //value: it.cnt + parseInt(Math.random() * 100),
                    }
                })
            })
        },
        getGroupByWorker() {
            this.$api.labor.groupByWorker(this.selProject.vendorsCode, this.selProject.id).then((d) => {
                this.nativeList = (d.data.native || []).map((it) => {
                    it.name = it.nativePlace
                    it.value = it.count
                    return it
                })
                this.ageList = (d.data.age || []).map((it) => {
                    it.name = ['', '18~30', '30~40', '40~55', '55岁以上'][it.age]
                    it.value = it.count
                    return it
                })
                this.chartKey++
            })
        },
        renderChart2(opt) {
            const areaOption = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            backgroundColor: '#6a7985',
                        },
                    },
                },
                xAxis: {
                    type: 'category',
                    data: this.weekData.map((item) => item.name),
                    axisLabel: {
                        textStyle: {
                            color: '#0df2c8',
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    axisLabel: {
                        textStyle: {
                            color: '#0df2c8',
                        },
                    },
                },
                series: [
                    {
                        name: '出勤人数',
                        type: 'line',
                        areaStyle: {
                            color: 'rgba(13, 204, 242,0.5)', // 设置面积背景颜色为红色
                        },
                        label: {
                            show: true,
                            position: 'top', // 值标签显示在折线点上方
                            textStyle: {
                                color: '#0df2c8', // 设置标签文字颜色为红色
                            },
                        },
                        data: this.weekData.map((item) => item.value),
                    },
                ],
            }
            return areaOption
        },
        renderChart3(opt) {
            let pieOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} 岁 <br/> {c} 人 ({d}%)',
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 'center',
                    data: this.ageList.map((it) => it.name),
                    textStyle: {
                        color: '#19c0e6',
                    },
                },
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: this.ageList,
                        label: {
                            normal: {
                                formatter: '{b}\n{c}',
                                textStyle: {
                                    color: '#0df2c8',
                                },
                            },
                            emphasis: {
                                formatter: '{b}\n{c}',
                                textStyle: {
                                    color: '#0df2c8',
                                },
                            },
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                            },
                        },
                    },
                ],
            }
            return pieOption
        },
        renderChart5(opt) {
            const pieOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)',
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['50%', '70%'], // 设置为圆环图
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                formatter: '{b}\n{c}',
                                textStyle: {
                                    color: '#0df2c8',
                                },
                            },
                            emphasis: {
                                formatter: '{b}\n{c}',
                                textStyle: {
                                    color: '#0df2c8',
                                },
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold',
                            },
                        },

                        data: this.nativeList,
                    },
                ],
            }
            return pieOption
        },
        doAttendanceNav(n) {
            this.attendanceNav = n
            this.loadAttendanceData()
        },
        loadJhAttendanceData() {
            let data = {
                id: this.attendanceNav,
                projectId: this.selProject.id,
                attendanceTime: this.$dt(new Date()).format('YYYY-MM-DD'),
            }
            let ajax = this.$api.detail.groupByComany
            if (this.attendanceNav != 1) {
                ajax = this.$api.detail.groupAllByComany
            }
            ajax(data).then((d) => {
                let tmps = d.data || []
                const func = (ids) => {
                    let sum = 0
                    tmps.filter((it) => ids.includes(it.companyTypeId))
                        .map((it) => it.id)
                        .forEach((it) => {
                            sum += it * 1
                        })
                    return sum
                }

                this.attendanceTotal = 0
                this.attendanceData = [
                    { text: '劳务人员', value: func(['0', '2', '3', '4', '5']) },
                    { text: '监理人员', value: func(['8']) },
                    { text: '总包人员', value: func(['1', '6']) },
                ]
                this.attendanceData.forEach((it) => {
                    this.attendanceTotal += it.value
                })
            })
        },
        loadUniAttendanceData() {
            let ajax = this.$api.detail.groupByCraftType
            let posData = {
                comId: this.selProject.comId,
                projectId: this.selProject.id,
            }
            if (this.attendanceNav == 1) {
                ajax = this.$api.detail.groupByCraftTypeByAttendance
                posData.createTime = this.$dt(new Date()).format('YYYY-MM-DD')
                //posData.createTime = '2024-10-13'
            }
            ajax(posData).then((d) => {
                this.attendanceData = (d.data || []).map((it) => {
                    return {
                        text: it.createBy,
                        value: it.id || 0,
                        id: it.craftType,
                    }
                })
                let count = 0
                this.attendanceData.forEach((it) => {
                    count += it.value
                })
                this.attendanceTotal = count
            })
        },
        renderMap(opt, myChart) {
            let mapName = 'china'
            let data = this.nativeList
            let geoCoordMap = {}

            /*获取地图数据*/

            let mapFeatures = echarts.getMap(mapName).geoJson.features
            let allData = []
            mapFeatures.forEach(function (v) {
                // 地区名称
                var name = v.properties.name
                // 地区经纬度
                geoCoordMap[name] = v.properties.cp
                allData.push({
                    name: name,
                    value: 0,
                })
            })

            let max = 880,
                min = 3 // todo
            let maxSize4Pin = 80,
                minSize4Pin = 20

            let convertData = function (data, lbl) {
                let res = []
                if (lbl == 1) {
                    data = allData
                }
                for (let i = 0; i < data.length; i++) {
                    let geoCoord = geoCoordMap[data[i].name]
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value),
                        })
                    }
                }
                if (lbl == 1) {
                    return res
                }
                return res.filter((d) => d.value[2] > 0)
            }
            let option = {
                visualMap: {
                    show: false,
                    min: 0,
                    max: 200,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {
                        color: ['#00e1ff00', '#3da2ffFF'],
                        //color: ['#3B5077', '#031525'], // 蓝黑
                        // color: ['#ffc0cb', '#800080'] // 红紫
                        // color: ['#3C3B3F', '#605C3C'] // 黑绿
                        // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                        // color: ['#23074d', '#cc5333'] // 紫红
                        //color: ['#00467F', '#A5CC82'], // 蓝绿
                        // color: ['#1488CC', '#2B32B2'] // 浅蓝
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                    },
                },
                geo: {
                    show: true,
                    map: mapName,
                    label: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: false,
                        },
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7',
                        },
                    },
                },
                series: [
                    {
                        name: '散点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: convertData(data, 1),
                        symbolSize: function (val) {
                            return val[2] / 10
                        },
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true,
                            },
                            emphasis: {
                                show: true,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#05C3F9',
                            },
                        },
                    },
                    {
                        type: 'map',
                        map: mapName,
                        geoIndex: 0,
                        aspectScale: 0.75, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        select: {
                            disabled: true,
                            label: {
                                show: false,
                            },
                        },
                        data: data,
                    },
                    {
                        name: '点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'pin', //气泡
                        symbolSize: function (val) {
                            var a = (maxSize4Pin - minSize4Pin) / (max - min)
                            var b = minSize4Pin - a * min
                            b = maxSize4Pin - a * max
                            return a * val[2] + b
                        },
                        label: {
                            normal: {
                                formatter: (a) => {
                                    return a.value[2]
                                },
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 9,
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#F62157', //标志颜色
                            },
                        },
                        zlevel: 6,
                        data: convertData(data, 2),
                    },
                ],
            }
            return option
        },
        loadAttendanceData() {
            if (this.selProject.vendorsCode != 'uni') {
                this.loadJhAttendanceData()
            } else {
                this.loadUniAttendanceData()
            }
        },
    },
    mounted() {
        window.plApp = this
        this.$store.dispatch('ChangeNav', 102)
        this.$bus.$on(
            'projectChange',
            debounce((prj) => {
                this.selProject = prj
                this.init()
            })
        )
        this.selProject = this.$store.getters.selProject
        this.init()
        this.dpi = this.$dpi()
        window.addEventListener('resize', () => {
            if (this.dpi != this.$dpi()) {
                this.dpi = this.$dpi()
                this.chartKey++
            }
        })
    },
}
</script>

<style>
</style>