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="劳务人员概况" class="labor-base">
                <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="劳务人员七天出勤趋势" class="labor-week-att">
                <my-chart :key="chartKey" id="prj_labor_chart2" width="100%" height="calc(100% - 40px)" :render="renderChart2"></my-chart>
            </module-one-1-1>
            <module-one-1-1 label="劳务人员年龄分布">
                <my-chart :key="chartKey" id="prj_labor_chart3" width="100%" height="calc(100% - 0px)" :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-labor-real">
                <div class="real-item" v-for="(item, index) in realList" :key="index">
                    <div class="real-item-type" :class="'is-'+item.inOutType">{{ item.inOutType==='out'?'出':'进' }}</div>
                    <el-image class="real-item-img" fit="cover" :src="item.img" :preview-src-list="[item.img]"></el-image>
                    <div class="real-item-name">{{ item.name }}</div>
                    <div class="real-item-work-type">
                        <span>{{ item.workType }}</span>
                    </div>
                    <div class="real-item-time">
                        <span>{{item.inOutType==='in'?'进场时间：':'出场时间：'}} {{ item.inoutDate }}</span>
                    </div>
                </div>
            </module-one-1-2>
        </el-col>
        <el-col :span="6" class="h100">
            <module-one-1-1 label="工种占比分布" class="chart-module4" :key="chartKey">
                <project-overview-chart
                    :htmlShow="true"
                    :key="'ai4' +chartKey"
                    :sp="''"
                    :fn="changeChart4"
                    :maintitle="workerTotal"
                    :legend-opt="legendOpt"
                    :typedata="workerGroupList"
                    :text="'总人数'"
                    :height="chart4Height"
                ></project-overview-chart>
            </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="人员预警" class="prj-labor-alert">
                <div class="alert-list scroll">
                    <table>
                        <thead>
                            <tr>
                                <th>姓名</th>
                                <th>单位</th>
                                <th>缺勤天数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in alertList" :key="index">
                                <td>{{ item.name }}</td>
                                <td>{{ item.companyName }}</td>
                                <td>{{ item.id }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </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,
            chart4Height: 230,
            chart2Height: 230,
            selProject: null,
            attendanceNav: 0,
            attendanceTotal: 0,
            attendanceData: [
                { text: '普通工种', value: 0, id: 0 },
                { text: '特殊工种', value: 0, id: 0 },
                { text: '管理人员', value: 0, id: 0 },
            ],
            legendOpt: {},
            overviewDatas: [],
            nativeList: [],
            ageList: [],
            weekData: [],
            workerTotal: 0,
            workerGroupList: [],
            realList: [],
            alertList: [],
        }
    },
    methods: {
        changeChart4(opt) {
            if (this.$dpi() == '1K') {
                opt.legend[0].left = 200
                return opt
            } else if (this.$dpi() == '2K') {
                opt.legend[0].left = 290
                return opt
            } else {
                opt.legend[0].left = 500
                return opt
            }
        },
        setOpts() {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            this.legendOpt = {
                icon: 'rect',
                orient: 'vertical',
                itemWidth: '50%',
                left: 240,
                right: '10%',
                itemWidth: 20,
                itemGap: 20,
                itemHeight: 20,
                type: 'scroll',
                pageTextStyle: {
                    color: '#c3dbfd',
                    fontSize: is1K ? 12 : is2K ? 16 : 20,
                },
                scroll: {
                    y: is1K ? 300 : is2K ? 500 : 600,
                    bar: {
                        show: true,
                        width: 5,
                        height: 10,
                    },
                },
                textStyle: {
                    padding: [0, 0, 0, 0],
                    fontSize: is1K ? 12 : is2K ? 14 : 20,
                    color: '#c3dbfd',
                    align: 'center',
                    rich: {
                        name: {
                            fontSize: is1K ? 12 : is2K ? 14 : 20,
                            color: '#c3dbfd',
                            padding: [5, 2, 5, 2],
                        },
                        percent: {
                            fontSize: is1K ? 12 : is2K ? 14 : 20,
                            color: '#4676FD',
                            padding: [0, 2, 0, 2],
                        },
                    },
                },
            }
        },
        init() {
            if (!this.selProject) {
                return
            }
            this.loadAttendanceData()
            this.getGroupByWorker()
            this.groupAttendanceLastWeek()
            this.getWorkerCountGroupByType()
            this.getRealAttendance()
            this.getAttendanceAlert()
            setTimeout(this.init,3*60*1000);
        },
        resize() {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            this.chart4Height = is1K ? 230 : is2K ? 360 : 595
            this.chart2Height = is1K ? 567 : is2K ? 800 : 1250
            this.chartKey++
        },
        getAttendanceAlert() {
            this.$api.labor.getAttendanceAlert(this.selProject.vendorsCode, this.selProject.id).then((d) => {
                this.alertList = d.data.map((it) => {
                    return it
                })
            })
        },
        getRealAttendance() {
            this.$api.labor.getRealAttendance(this.selProject.vendorsCode, this.selProject.id).then((d) => {
                this.realList = d.data.map((it) => {
                    it.name = it.workerName||it.userName;
                    it.workType = it.workTypeName||it.subDeptGroupName
                    it.img = it.scanPhoto||it.inPhoto||it.outPhoto
                    if(it.outTime){
                        it.inOutType = 'out'
                        it.inoutDate = it.outTime
                    }else if(it.inTime){
                        it.inOutType = 'in'
                        it.inoutDate = it.inTime
                    }else if (it.attendanceOutTime) {
                        it.inOutType = 'out'
                        it.inoutDate = it.attendanceInTime
                    } else {
                        it.inOutType = 'in'
                        it.inoutDate = it.attendanceTime
                    }
                    return it
                })
            })
        },
        getWorkerCountGroupByType() {
            this.$api.labor.getWorkerCountGroupByType(this.selProject.vendorsCode, this.selProject.id).then((d) => {
                let sum = 0
                d.data.forEach((item) => {
                    item.id = item.id || item.comId
                    sum += item.id ? item.id : 0
                })
                this.workerTotal = sum
                this.workerGroupList = d.data.map((item) => {
                    return {
                        name: item.workTypeName || item.craftPostName,
                        value: item.id ? item.id : 0,
                    }
                })
                this.chartKey++
            })
        },
        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,
                       
                    }
                })
                this.chartKey++
            })
        },
        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) {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            const areaOption = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            backgroundColor: '#6a7985',
                            textStyle: {
                                fontSize: is1K ? 12 : is2K ? 16 : 20,
                            },
                        },
                    },
                },
                xAxis: {
                    type: 'category',
                    data: this.weekData.map((item) => item.name),
                    axisLabel: {
                        textStyle: {
                            color: '#0df2c8',
                            fontSize: is1K ? 12 : is2K ? 16 : 20,
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    axisLabel: {
                        textStyle: {
                            color: '#0df2c8',
                            fontSize: is1K ? 12 : is2K ? 16 : 20,
                        },
                    },
                },
                series: [
                    {
                        name: '出勤人数',
                        type: 'line',
                        areaStyle: {
                            color: 'rgba(13, 204, 242,0.5)', // 设置面积背景颜色为红色
                        },
                        label: {
                            show: true,
                            position: 'top', // 值标签显示在折线点上方
                            textStyle: {
                                color: '#0df2c8', // 设置标签文字颜色为红色
                                fontSize: is1K ? 12 : is2K ? 16 : 20,
                            },
                        },
                        data: this.weekData.map((item) => item.value),
                    },
                ],
            }
            return areaOption
        },
        renderChart3(opt) {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            let pieOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} 岁 <br/> {c} 人 ({d}%)',
                    textStyle: {
                        fontSize: is1K ? 12 : is2K ? 16 : 20,
                    },
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 'center',
                    data: this.ageList.map((it) => it.name),
                    textStyle: {
                        color: '#19c0e6',
                        fontSize: is1K ? 12 : is2K ? 16 : 20,
                    },
                },
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: this.ageList,
                        label: {
                            normal: {
                                formatter: '{b}\n{c}',
                                textStyle: {
                                    color: '#0df2c8',
                                    fontSize: is1K ? 12 : is2K ? 16 : 20,
                                },
                            },
                            emphasis: {
                                formatter: '{b}\n{c}',
                                textStyle: {
                                    color: '#0df2c8',
                                    fontSize: is1K ? 12 : is2K ? 16 : 20,
                                },
                            },
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                            },
                        },
                    },
                ],
            }
            return pieOption
        },
        renderChart5(opt) {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            const pieOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)',
                    textStyle: {
                        fontSize: is1K ? 12 : is2K ? 16 : 20,
                    },
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['50%', '70%'], // 设置为圆环图
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                formatter: '{b}\n{c}',
                                textStyle: {
                                    color: '#0df2c8',
                                    fontSize: is1K ? 12 : is2K ? 16 : 20,
                                },
                            },
                            emphasis: {
                                formatter: '{b}\n{c}',
                                textStyle: {
                                    color: '#0df2c8',
                                    fontSize: is1K ? 12 : is2K ? 16 : 20,
                                },
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: is1K ? 12 : is2K ? 16 : 20,
                                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.resize()
            }
        })
        this.setOpts()
        this.resize()
    },
}
</script>

<style lang="less">
.project-labor {
    .chart-module4 {
        .chart-gif {
            left: 50px;
        }
        .chart-text {
            top: 63px;
            left: 50px;
        }
    }
    .prj-labor-real {
        .module-ctx {
            position: relative;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            font-size: 12px;
            .real-item {
                height: 100%;
                width: 25%;
                position: relative;
                overflow: hidden;
                .real-item-type {
                    position: absolute;
                    font-size: 20px;
                    font-weight: bold;
                    z-index: 10;
                    &.is-in {
                        color: #00ffd0;
                    }
                    &.is-out {
                        color: #cc6933;
                    }
                }
                .real-item-img {
                    height: calc(100% - 60px);
                    padding: 0px 40px;
                    .el-image__inner {
                        width: unset;
                    }
                }
                .real-item-name {
                    text-align: center;
                }
                .real-item-work-type {
                    text-align: center;
                    line-height: 30px;
                    span {
                        color: #33b7bd;
                        border: solid 1px #33b7bd;
                        border-radius: 5px;
                        padding: 0 10px;
                    }
                }
                .real-item-time {
                    font-size: 10px;
                    text-align: center;
                    color: #33b7bd;
                }
            }
        }
    }
    .prj-labor-alert {
        .module-ctx {
            height: calc(100% - 40px);
            line-height: 30px;
            .alert-list {
                height: 100%;
                overflow-y: auto;
                th {
                    color: #00ffd0;
                }
                td {
                    font-size: 12px;
                    text-align: center;
                }
            }
        }
    }
    // 添加媒体查询支持 1920 - 2560 分辨率
    @media (min-width: 1921px) and (max-width: 2560px) {
        .labor-base {
            .attendance-info-title {
                font-size: 24px; // 增大字体;
            }
            .attendance-tag {
                .survey_content {
                    margin-top: 40px;
                    .survey_content_img {
                        width: 120px;
                        height: 120px;
                        line-height: 120px;
                        background-size: 150px 100px;
                        img {
                            width: 50px;
                            height: 50px;
                        }
                    }
                }
                .labour-survey_content_number {
                    font-size: 20px;
                    .survey_content_value {
                        span {
                            font-size: 24px;
                        }
                    }
                }
            }
        }
        .chart-module4 {
            .chart-gif {
                left: 60px;
                width: 170px;
                height: 170px;
                top: 96px !important;
            }
            .chart-text {
                left: 60px;
                width: 170px;
                height: 170px;
                top: 96px !important;
                .chart-text-title {
                    font-size: 28px;
                }
                .chart-text-sub-title {
                    font-size: 18px;
                }
            }
        }
        .prj-labor-real {
            .module-ctx {
                font-size: 16px; // 增大字体

                .real-item {
                    .real-item-type {
                        font-size: 28px; // 增大字体
                    }
                    .real-item-img {
                        padding: 0px 60px; // 调整内边距
                    }
                    .real-item-work-type {
                        line-height: 40px; // 调整行高
                        span {
                            padding: 0 15px; // 调整内边距
                        }
                    }
                    .real-item-time {
                        font-size: 14px; // 增大字体
                    }
                }
            }
        }
        .prj-labor-alert {
            .module-ctx {
                height: calc(100% - 60px);
                line-height: 40px; // 调整行高

                .alert-list {
                    th {
                        font-size: 20px; // 增大字体;
                    }
                    td {
                        font-size: 16px; // 增大字体
                    }
                }
            }
        }
    }
    @media (min-width: 2561px) {
        .labor-base {
            .attendance-info-title {
                font-size: 40px; // 增大字体;
            }
            .attendance-tag {
                .survey_content {
                    margin-top: 80px;
                    .survey_content_img {
                        width: 200px;
                        height: 200px;
                        line-height: 200px;
                        background-size: 180px 120px;
                        img {
                            width: 80px;
                            height: 80px;
                        }
                    }
                }
                .labour-survey_content_number {
                    font-size: 32px;
                    .survey_content_value {
                        span {
                            font-size: 40px;
                        }
                    }
                }
            }
        }
        .labor-week-att {
            .module-title {
                span {
                    position: relative;
                    top: -8px;
                }
            }
        }
        .chart-module4 {
            .chart-gif {
                left: 82px;
                width: 280px;
                height: 280px;
                top: 160px !important;
            }
            .chart-text {
                left: 82px;
                width: 280px;
                height: 280px;
                top: 160px !important;
                .chart-text-title {
                    font-size: 40px;
                }
                .chart-text-sub-title {
                    font-size: 32px;
                }
            }
        }
        .prj-labor-real {
            .module-ctx {
                font-size: 24px; // 增大字体

                .real-item {
                    .real-item-type {
                        font-size: 40px; // 增大字体
                    }
                    .real-item-img {
                        height: calc(100% - 140px);
                        padding: 0px 80px; // 调整内边距
                    }
                    .real-item-work-type {
                        line-height: 60px; // 调整行高
                        span {
                            padding: 0 20px; // 调整内边距
                        }
                    }
                    .real-item-time {
                        font-size: 20px; // 增大字体
                    }
                }
            }
        }
        .prj-labor-alert {
            .module-ctx {
                height: calc(100% - 60px);
                line-height: 60px; // 调整行高

                .alert-list {
                    th {
                        font-size: 28px; // 增大字体;
                    }
                    td {
                        font-size: 24px; // 增大字体
                    }
                }
            }
        }
    }
}
</style>