jhbigscreen/src/pages/index/indexDlg2 copy.vue

<template>
    <MyDialog v-if="show" v-model="show" width="880px" ref="dlg">
        <template slot="title">
            <div class="warning-info-title" style="padding-left: 20px;">
                <div :class="nav == 0 ? 'active' : ''" class="nav-item" @click="toggleNav(0)">安全管理</div>
                <div :class="nav == 1 ? 'active' : ''" class="nav-item" @click="toggleNav(1)">质量管理</div>
            </div>
        </template>
        <el-table v-if="nav == 0" :data="tableData" class="mytable" height="500" style="width: 100%;background: transparent;"
            ref="fbsubordinateUnit">

            <el-table-column prop="prj" label="项目名称"> </el-table-column>
            <el-table-column prop="node" label="节点名称" width="150" class-name="text-left">
                <template slot-scope="scope">
                    <span style="color:#01A9FF;font-size: 12px;">{{ scope.row.node }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="days" label="逾期天数">
                <template slot-scope="scope">
                    <span style="color:red">{{ scope.row.days }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="计划完成时间">

            </el-table-column>
        </el-table>

        <el-table v-else :data="tableData" class="mytable" style="width: 100%;background: transparent;"
            ref="fbsubordinateUnit">

            <el-table-column prop="prj" label="项目名称2"> </el-table-column>
            <el-table-column prop="node" label="节点名称2" width="150" class-name="text-left">
                <template slot-scope="scope">
                    <span style="color:#01A9FF;font-size: 12px;">{{ scope.row.node }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="days" label="逾期天数2">
                <template slot-scope="scope">
                    <span style="color:red">{{ scope.row.days }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="计划完成时间2">

            </el-table-column>
        </el-table>

    </MyDialog>
</template>

<script>
import '@/components/module/module-one-1-1'
import MyDialog from '../components/MyDialog'
export default {
    components: {
        MyDialog
    },
    data() {
        return {
            nav: 0,
            show: false,
            tableData: []
        };
    },

    mounted() {
        window.dlg2 = this
        this.tableData = [
            { prj: '项目一', node: '招采', days: 5, date: '2023.06.04' },
            { prj: '项目二', node: '报建审批及地勘施工', days: 10, date: '2023.05.31' },
            { prj: '项目三', node: '前期工作', days: 3, date: '2023.06.06' },
            { prj: '项目四', node: '市政道路施工', days: 4, date: '2023.06.05' },
            { prj: '项目一', node: '招采', days: 5, date: '2023.06.04' },
            { prj: '项目二', node: '报建审批及地勘施工', days: 10, date: '2023.05.31' },
            { prj: '项目三', node: '前期工作', days: 3, date: '2023.06.06' },
            { prj: '项目四', node: '市政道路施工', days: 4, date: '2023.06.05' },
            { prj: '项目一', node: '招采', days: 5, date: '2023.06.04' },
            { prj: '项目二', node: '报建审批及地勘施工', days: 10, date: '2023.05.31' },
            { prj: '项目三', node: '前期工作', days: 3, date: '2023.06.06' },
            { prj: '项目四', node: '市政道路施工', days: 4, date: '2023.06.05' },
            { prj: '项目一', node: '招采', days: 5, date: '2023.06.04' },
            { prj: '项目二', node: '报建审批及地勘施工', days: 10, date: '2023.05.31' },
            { prj: '项目三', node: '前期工作', days: 3, date: '2023.06.06' },
            { prj: '项目四', node: '市政道路施工', days: 4, date: '2023.06.05' },
            { prj: '项目一', node: '招采', days: 5, date: '2023.06.04' },
            { prj: '项目二', node: '报建审批及地勘施工', days: 10, date: '2023.05.31' },
            { prj: '项目三', node: '前期工作', days: 3, date: '2023.06.06' },
            { prj: '项目四', node: '市政道路施工', days: 4, date: '2023.06.05' },
            { prj: '项目一', node: '招采', days: 5, date: '2023.06.04' },
            { prj: '项目二', node: '报建审批及地勘施工', days: 10, date: '2023.05.31' },
            { prj: '项目三', node: '前期工作', days: 3, date: '2023.06.06' },
            { prj: '项目四', node: '市政道路施工', days: 4, date: '2023.06.05' },
            { prj: '项目一', node: '招采', days: 5, date: '2023.06.04' },
            { prj: '项目二', node: '报建审批及地勘施工', days: 10, date: '2023.05.31' },
            { prj: '项目三', node: '前期工作', days: 3, date: '2023.06.06' },
            { prj: '项目四', node: '市政道路施工', days: 4, date: '2023.06.05' },
            { prj: '项目一', node: '招采', days: 5, date: '2023.06.04' },
            { prj: '项目二', node: '报建审批及地勘施工', days: 10, date: '2023.05.31' },
            { prj: '项目三', node: '前期工作', days: 3, date: '2023.06.06' },
            { prj: '项目四', node: '市政道路施工', days: 4, date: '2023.06.05' },
            { prj: '项目一', node: '招采', days: 5, date: '2023.06.04' },
            { prj: '项目二', node: '报建审批及地勘施工', days: 10, date: '2023.05.31' },
            { prj: '项目三', node: '前期工作', days: 3, date: '2023.06.06' },
            { prj: '项目四', node: '市政道路施工', days: 4, date: '2023.06.05' },
        ]
    },

    methods: {
        toggleNav(n) {
            this.nav = n;
        },
        showDialog() {
            this.show = true
        }
    },
};
</script>

<style lang="less" scoped>
.mytable {
    /deep/ th .cell {
        color: aquamarine;
    }
}

.warning-info-title {
    .nav-item {
        color: #fff;

        &.active {
            color: #6de9f7;
        }
    }
}</style>