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

<template>
    <div class="project-checked main-page">
        <el-col :span="6" class="h100">
            <module-one-1-1 label="举牌验收数量统计" class="chart1-group">
                <project-overview-chart :htmlShow="true" :key="'ai1' + chart1Key" :sp="''" :fn="changeChart1"
                    :maintitle="groupTotal" :legend-opt="groupLendOpt" :typedata="groupData" text="验收数"
                    :height="chart1Height"></project-overview-chart>
            </module-one-1-1>
            <module-one-2-1 label="本周验收列表" class="week-group">
                <template v-if="weekData.length == 0">
                    <div class="no-data">
                        <div class="no-data-conten">
                            <img src="images/nodata.png" style="width: 240px;" />
                            <div class="no-data">暂无数据</div>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="week-list scroll" :key="weekKey">
                        <div class="week-item" v-for="(it, index) in weekData" :key="index" @click="handleWeekItemClick(it, $event)">
                            <div class="item-left">
                                <el-image :src="it.image" :preview-src-list="it.images" fit="cover" />
                            </div>
                            <div class="item-right">
                                <div class="item-right-row">
                                    <span :class="'check-state check-state-' + it.checkResultColor">{{
                                        it.checkResultName }}</span>
                                    <span class="check-date">{{ it.checkingDate }}</span>
                                </div>
                                <div class="item-right-row">
                                    <div class="item-label">工序部位:</div>
                                    <div class="item-data">{{ it.workingPosition }}</div>
                                </div>
                                <div class="item-right-row">
                                    <div class="item-label">班组长:</div>
                                    <div class="item-data">{{ it.groupDeptUserName }}({{ it.groupDeptUser }})</div>
                                </div>

                                <div class="item-right-row">
                                    <div class="item-label">技术员:</div>
                                    <div class="item-data">{{ it.technicianUserName }}({{ it.technicianUser }})</div>
                                </div>

                                <div class="item-right-row">
                                    <div class="item-label">监理专员:</div>
                                    <div class="item-data">{{ it.superviseUserName }}({{ it.superviseUser }})</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </module-one-2-1>

        </el-col>
        <el-col :span="18" class="h100">

            <module-one-2-3 label="举牌验收列表" class="h66 list-group">
                <div class="head-title-tab" :key="chart1Key">
                    <div :class="nav == 1 ? 'head-nav active' : 'head-nav'" @click="doNav(1)">已验收({{
                        getCheckedCount(1) }})</div>
                    <div :class="nav == 0 ? 'head-nav active' : 'head-nav'" @click="doNav(0)">未验收({{
                        getCheckedCount(0) }})</div>
                </div>

                <template v-if="listData.length == 0">
                    <div class="no-data">
                        <div class="no-data-conten">
                            <img src="images/nodata.png" style="width: 240px;" />
                            <div class="no-data">暂无数据</div>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="list-data scroll" :key="listKey">
                        <div class="week-item" v-for="(it, index) in weekData" :key="index" @click="handleWeekItemClick(it, $event)">
                            <div class="item-left" >
                                <el-image :src="it.image" :preview-src-list="it.images" fit="cover" />
                            </div>
                            <div class="item-right">
                                <div class="item-right-row">
                                    <span :class="'check-state check-state-' + it.checkResultColor">{{
                                        it.checkResultName }}</span>
                                    <span class="check-date">{{ it.checkingDate }}</span>
                                </div>
                                <div class="item-right-row">
                                    <div class="item-label">工序部位:</div>
                                    <div class="item-data">{{ it.workingPosition }}</div>
                                </div>
                                <div class="item-right-row">
                                    <div class="item-label">班组长:</div>
                                    <div class="item-data">{{ it.groupDeptUserName }}({{ it.groupDeptUser }})</div>
                                </div>

                                <div class="item-right-row">
                                    <div class="item-label">技术员:</div>
                                    <div class="item-data">{{ it.technicianUserName }}({{ it.technicianUser }})</div>
                                </div>

                                <div class="item-right-row">
                                    <div class="item-label">监理专员:</div>
                                    <div class="item-data">{{ it.superviseUserName }}({{ it.superviseUser }})</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <el-pagination layout="total,prev, pager, next" :hide-on-single-page="true"
                        @current-change="handleCurrentChange" :total="total" :page-size="size"
                        :current-page.sync="index" class="bg-pagination"></el-pagination>

                </template>
            </module-one-2-3>
            <module-one-1-3 label="举牌验收技术员统计" class="h33 group-technician">
                <template v-if="technicianData.length == 0">
                    <div class="no-data">
                        <div class="no-data-conten">
                            <img src="images/nodata.png" style="width: 240px;" />
                            <div class="no-data">暂无数据</div>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <my-chart :key="chart2Key" id="project-safety-check-chart2" width="100%" height="100%"
                        :render="renderChart2"></my-chart>
                </template>
            </module-one-1-3>
        </el-col>
        <projectCheckedDetailDialog ref="detailDlg" />
    </div>
</template>

<script>
import debounce from "lodash.debounce";
import projectCheckedDetailDialog from '@/views/check/projectCheckedDetailDialog.vue'
export default {
    components: {
        projectCheckedDetailDialog
    },
    data() {
        return {
            dpi: "",
            chartKey: 0,
            selProject: null,
            // 举牌验收数量统计
            chart1Key: 0,
            chart1Height: 200,
            groupTotal: 0,
            groupLendOpt: {
            },
            groupData: [
            ],
            // 举牌验收技术员统计
            chart2Key: 0,
            chart2Height: 200,
            technicianData: [],
            //本周验收列表
            weekKey: 0,
            weekData: [],
            //举牌验收列表
            nav: 1,
            listData: [],
            total: 0,
            size: 9,
            index: 1,
            listKey: 10000,
        }
    },
    mounted() {
        this.$store.dispatch("ChangeNav", 403);
        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.resize();
        this.setOpts();
    },
    methods: {
        setOpts() {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            this.groupLendOpt = {
                icon: 'rect',
                orient: 'horizontal',
                itemWidth: '50%',
                left: 240,
                right: '10%',
                itemWidth: 20,
                itemGap: 20,
                itemHeight: 20,
                textStyle: {
                    padding: [0, 0, 0, 0],
                    fontSize: is1K ? 10 : is2K ? 14 : 16,
                    color: '#c3dbfd',
                    align: 'center',
                    rich: {
                        name: {
                            fontSize: is1K ? 10 : is2K ? 14 : 16,
                            color: '#c3dbfd',
                            padding: [5, 2, 5, 2],
                        },
                        percent: {
                            fontSize: is1K ? 10 : is2K ? 14 : 16,
                            color: '#4676FD',
                            padding: [0, 2, 0, 2],
                        },
                    },
                },
            }
        },
        init() {
            if (!this.selProject) {
                return
            }
            this.chartKey++;
            this.loadGroupData();
            this.loadGroupByTechnician();
            this.loadWeekProjectChecked();
            this.nav = -1;
            this.doNav(1);
        },
        resize() {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            this.chart1Height = is1K ? 230 : is2K ? 360 : 595
            this.chart1Key++;
            this.chart2Key++;
        },
        getCheckedCount(n) {
            let obj = this.groupData.find(item => item.name == (n == 1 ? '已验收' : '未验收'))
            return obj ? obj.value : 0
        },
        showDetail(row){
            this.$refs.detailDlg.showDialog(row);
        },
        handleWeekItemClick(row, event) {
            // 检查点击的是否在图片区域内
            const target = event.target;
            const imageContainer = event.currentTarget.querySelector('.item-left');
            if (imageContainer && !imageContainer.contains(target)) {
                this.showDetail(row);
            }
        },
        doNav(n) {
            if (this.nav == n) {
                return;
            }
            this.nav = n;
            this.index = 1;
            this.loadDataList();
        },
        handleCurrentChange(n) {
            this.index = n
            this.loadDataList();
        },
        loadDataList() {
            let param = {
                projectId: this.selProject.id,
                checkResult: this.nav == 1 ? 99 : 100,
                pageNum: this.index,
                pageSize: this.size,
            }
            this.$api.checked.listProjectChecked(param).then(res => {
                this.total = res.total + 88;
                this.listData = this.mapData(res);
                this.listKey++;
            });
        },
        loadWeekProjectChecked() {
            let param = {
                projectId: this.selProject.id,
                remark: "lastWeek",
                pageNum: 1,
                pageSize: 100,
            }
            this.$api.checked.listProjectChecked(param).then(res => {
                this.weekData = this.mapData(res);
                for (i = 0; i < 8; i++) {
                    this.weekData.push(this.weekData[0])
                }
                this.weekKey++;
            })
        },
        mapData(res) {
            return (res.rows || []).map(item => {
                if (item.imageUrls) {
                    item.images = item.imageUrls.split(',');
                    item.image = item.images[0];
                    for(let i=0;i<6;i++){
                        item.images.push(item.images[0])
                    }
                } else {
                    item.image = "";
                    item.images = []
                }

                if (item.checkingFiles) {
                    item.checkImages = item.checkingFiles.split(',');
                    item.checkImage = item.images[0];
                } else {
                    item.checkImage = "";
                    item.checkImages = []
                }

                if (item.checkResult == 1 && item.approveStatus == 100) {
                    item.checkResultName = "验收通过";
                    item.checkResultColor = 1;
                } else {
                    item.checkResultName = "验收不通过";
                    item.checkResultColor = 2;
                }

                return item;
            });
        },
        loadGroupData() {
            this.$api.checked.groupByStatus(this.selProject.id).then(res => {
                let cnt = 0;
                let tmps = (res.data || []).map(it => {
                    return {
                        name: it.title,
                        value: it.cnt
                    }
                });
                tmps.forEach(it => {
                    cnt += it.value;
                });
                this.groupData = tmps;
                this.groupTotal = cnt;
                this.chart1Key++;
            })

        },
        changeChart1(opt) {
            if (this.$dpi() == '1K') {
                opt.legend[0].left = 200
                return opt
            } else if (this.$dpi() == '2K') {
                opt.legend[0].left = 360
                return opt
            } else {
                opt.legend[0].left = 500
                return opt
            }
        },
        loadGroupByTechnician() {
            this.$api.checked.groupByTechnician(this.selProject.id).then(res => {
                this.technicianData = res;
                this.chart2Key++;
            })
        },
        renderChart2(opt) {
            let is1K = this.$dpi() == '1K'
            let is2K = this.$dpi() == '2K'
            let option = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '0%',
                    top: '15%',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: (v) => {
                        return v
                    },
                    textStyle: {
                        fontSize: is1K ? 12 : is2K ? 14 : 24,
                    },
                },
                legend: {
                    top: is1K ? '0%' : is2K ? '0%' : '0%',
                    left: 'center',
                    itemWidth: is1K ? 25 : is2K ? 30 : 40,
                    itemHeight: is1K ? 14 : is2K ? 20 : 20,
                    itemGap: is1K ? 20 : is2K ? 30 : 40,
                    textStyle: {
                        color: '#fff',
                        fontSize: is1K ? 14 : is2K ? 20 : 30,
                    },
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.technicianData.map((it) => it.name),
                        axisLabel: {
                            width: is1K ? 60 : is2K ? 140 : 220,
                            margin: 15,
                            fontSize: is1K ? 12 : is2K ? 14 : 22,
                            overflow: 'break',
                            color: '#a2c8f9',
                        },
                        splitLine: {
                            lineStyle: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        minInterval: 1,
                        axisLabel: {
                            formatter: '{value}',
                            color: '#2ec2b3',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        splitLine: {
                            lineStyle: {
                                opacity: 0.1,
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '已验收',
                        type: 'bar',
                        barGap: '0%',
                        barWidth: '20%',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#7ddff2',
                        },
                        itemStyle: {
                            color: '#4974ff',
                        },
                        data: this.technicianData.map((it) => it.accepted),
                    },
                    {
                        name: '待验收',
                        type: 'bar',
                        barGap: '0%',
                        barWidth: '20%',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#4DAAFC',
                            fontSize: is1K ? 12 : is2K ? 14 : 24,
                        },
                        lineStyle: {
                            color: '#006594',
                        },
                        itemStyle: {
                            color: '#52aef7',
                        },
                        data: this.technicianData.map((it) => it.toBe),
                    },
                ],
            }
            return option
        },
    }
}
</script>

<style lang="less">
.project-checked {
    .screen-module {
        &.h66 {
            height: calc(66% - 20px) !important;
        }

        &.h33 {
            height: calc(33% - 20px) !important;
        }
    }

    .chart1-group {

        .chart-gif,
        .chart-text {
            left: 51px !important;
            top: 63px !important;
        }
    }

    .no-data {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .no-data-conten {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }

    .week-group {
        .module-ctx {
            padding: 0px;

            .week-list {
                max-height: 100%;
                overflow-y: auto;
                padding: 10px;

                .week-item {
                    &:first-child {
                        margin-top: 0px;
                    }
                }
            }
        }
    }

    .list-group {
        .module-ctx {
            padding: 0px;

            .head-title-tab {
                padding: 10px 0px;
                position: relative;
                top: 10px;
                left: 10px;
            }

            .list-data {
                height: calc(100% - 90px);
                overflow-y: auto;
                padding: 10px;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(3, 1fr);
                gap: 10px;
            }

        }
    }

    .week-item {
        background-color: #0000001a;
        border: solid 1px #99999988;
        margin-top: 10px;
        border-radius: 5px;
        display: flex;
        flex-flow: row;
        align-items: center;
        padding: 8px;
        cursor: pointer;

        .item-left {
            width: 40%;
            height: 100%;
        }

        .item-right {
            color: #3da2ff;
            font-size: 12px;
            padding-left: 8px;
            flex-grow: 1;

            .item-right-row {
                display: flex;
                flex-flow: row;
                line-height: 24px;
                position: relative;
                .item-label{
                     color: #32e1e4;
                }
                .check-state {
                    display: inline-block;
                    line-height: 20px;
                    padding: 2px 4px;
                    border-radius: 4px;

                    &.check-state-1 {
                        color: #09f509;
                        background: #01b24954;
                    }

                    &.check-state-2 {
                        color: #192c64;
                        background: #6abee9;
                    }
                }

                .check-date {
                    position: absolute;
                    right: 4px;
                    color: #fff;
                }
            }
        }

    }
}
</style>