上传新绩效系统

上传新绩效系统

src/ExamineContrast copy 2.vue

@@ -0,0 +1,546 @@
+<template>
+    <div class="contrast-container scroll-bar" style="padding-top: 10px;">
+
+        <div class="flex-box-ce title-box" style="" v-if="selectExamineList && selectExamineList.length > 0">
+            <div class="title">已选择的考核列表:</div>
+            <el-button size="mini" @click="dialogVisible = true">查看更多</el-button>
+        </div>
+
+
+        <div v-if="selectExamineList && selectExamineList.length > 0" class="template-list"
+            style="background: #f7f7f7; padding: 10px 10px 0 0; margin: 0 20px; border-radius: 4px;">
+            <template size="small" v-for="(item, index) in selectExamineList">
+                <el-tag :key="item.reviewPackageId" style="margin: 0 0 10px 10px;" closable
+                    @close="handleTagDelete(index)">
+                    {{ item.title }}
+                </el-tag>
+            </template>
+        </div>
+
+        <div v-else class="flex-box-ce" style="padding: 0 20px;">
+            <el-button size="mini" @click="dialogVisible = true" style="margin-left: auto;">查看更多</el-button>
+        </div>
+
+        <el-tabs v-model="activeName" @tab-click="handleClick"
+            style="width: 100%; padding: 0 20px; box-sizing: border-box;">
+            <el-tab-pane label="表格" name="0">
+                <el-table v-if="userList && userList.length > 0" ref="tableRef" custom-class="openAnimAbcd" id="mytable"
+                    :data="userList" style="width: 100%; " border stripe :header-cell-style="{ background: '#f5f7fa' }"
+                    v-loading="loading">
+                    <el-table-column prop="employeeName" label="姓名" align="center">
+                    </el-table-column>
+                    <el-table-column :label="item.title" v-for="(item, index) in selectExamineList"
+                        :key="item.reviewPackageId" align="center">
+                        <template slot-scope="scope">
+                            <div v-for="user in item.users">
+                                <span v-if="user.employeeId == scope.row.employeeId">{{ user.score }}</span>
+                            </div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="地图" name="1" style="width: 100%;">
+                <div v-if="treeData && JSON.stringify(treeData) !== '{}'" class="flex-box-ce scroll-bar"
+                    style="width: 100%; justify-content: center; overflow-x: auto;">
+                    <vue2-org-tree :data="treeData" style="width: 100%;" />
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+
+        <el-dialog title="请选择需要对比的考核列表" center :visible.sync="dialogVisible" width="600px"
+            :before-close="dialogBeforeClose">
+            <div>
+                <div class="search-box">
+                    <el-select v-model="cycleType" placeholder="请选择周期类型" @change="changeCircle" style="width: 100px;"
+                        size="mini">
+                        <el-option v-for="item in cycleOptions" :key="item.value" :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+
+                    <el-date-picker v-model="date" type="daterange" align="right" unlink-panels range-separator="至"
+                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
+                        :picker-options="pickerOptions" @change="changeDate" style="width: 300px; margin: 0 10px;"
+                        size="mini">
+                    </el-date-picker>
+
+                    <el-select v-model="status" placeholder="请选择" style="width: 100px;" @change="changeStatus"
+                        size="mini">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+
+                    <el-button plain round size="mini" style="margin-left: 10px;" @click="reset">重 置</el-button>
+                </div>
+                <div class="package-list">
+                    <div class="template-list scroll-bar">
+                        <template v-if="examineList && examineList.length > 0">
+                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
+                                @change="handleCheckAllChange" style="margin-bottom: 10px;">全选</el-checkbox>
+                            <el-checkbox-group v-model="selectExamineIds" size="small" @change="changeSelectExamineIds">
+                                <template v-for="item in examineList">
+                                    <el-checkbox :key="item.reviewPackageId" :label="item.reviewPackageId" border>
+                                        {{ item.title }}
+                                    </el-checkbox>
+                                </template>
+                            </el-checkbox-group>
+                        </template>
+                        <template v-else>
+                            <div class="flex-box-ce" style="justify-content: center;">
+                                <noData content="暂无数据" imgW="120px" imgH="80px"></noData>
+                            </div>
+                        </template>
+                    </div>
+                    <div class="choose-template scroll-bar">
+                        <el-button plain round size="mini" @click="clear">清 空</el-button>
+                        <div class="line"></div>
+                        <template v-for="(item, index) in chooseExamineList">
+                            <div class="flex-box-ce choose-template-item" style="justify-content: space-between;">
+                                <div>{{ item.title }}</div>
+                                <i class="el-icon-close" @click="deleteItem(index)"></i>
+                            </div>
+                        </template>
+                        <div ref="placeholder" style="height: 50px;"></div>
+                    </div>
+                </div>
+
+            </div>
+            <div slot="footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="confirm">确 定</el-button>
+            </div>
+        </el-dialog>
+
+        <div style="height: 50px;"></div>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import moment from 'moment';
+
+export default {
+    data() {
+        return {
+            checkAll: false,
+            isIndeterminate: true,
+            dialogVisible: false,
+            activeName: "0",
+            loading: false,
+            treeData: {},
+            // 周期类型 0-未定义 1-年度 2-半年度 3-季度 4-月度
+            cycleType: '-1',
+            cycleOptions: [
+                { label: "全部", value: '-1' },
+                { label: "未定义", value: '0' },
+                { label: "年度", value: '1' },
+                { label: "半年度", value: '2' },
+                { label: "季度", value: '3' },
+                { label: "月度", value: '4' },
+            ],
+            status: -1,
+            options: [{
+                value: -1,
+                label: '全部'
+            }, {
+                value: '0',
+                label: '未完成'
+            }, {
+                value: '1',
+                label: '已完成'
+            }],
+            params: {
+                startDate: '',
+                endDate: '',
+                status: -1, // 不传默认返回全部 0-未完成 1-已完成
+            },
+
+            pickerOptions: {
+                shortcuts: [{
+                    text: '最近一周',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近一个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近三个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }]
+            },
+            date: [],
+            examineList: [], // 考核表列表
+            tableHeader: [],
+            tableData: [],
+            userList: [],
+            selectExamineIds: [],
+            selectExamineList: [],
+            chooseExamineList: []
+        }
+    },
+    // watch: {
+    //     chooseExamineList(v) {
+    //         this.selectExamineList = this.chooseExamineList
+    //     }
+    // },
+    filters: {
+        formatDate(val) {
+            if (val) return moment(val).format('YYYY-MM-DD')
+            else return "--"
+        }
+    },
+    computed: {
+        ...mapGetters(['user_info']),
+        // selectExamineList() {
+        //     return this.examineList.filter(item => this.selectExamineIds.includes(item.reviewPackageId))
+        // }
+    },
+    created() {
+        this.getRecords();
+        this.dialogVisible = true;
+    },
+    methods: {
+        deleteItem(index) {
+            let chooseIndex = this.selectExamineIds.findIndex(select => select == this.chooseExamineList[index].reviewPackageId)
+            this.selectExamineIds.splice(chooseIndex, 1)
+            this.chooseExamineList.splice(index, 1)
+        },
+
+        changeSelectExamineIds(v) {
+            console.log(this.selectExamineIds)
+            if (v && v.length > 0) {
+                this.examineList.forEach(examine => {
+                    this.selectExamineIds.forEach(val => {
+                        if (val == examine.reviewPackageId) this.chooseExamineList.push(examine)
+                    })
+                })
+                this.chooseExamineList = Array.from(new Set(this.chooseExamineList.map(JSON.stringify))).map(JSON.parse);
+            } else {
+                // this.selectExamineIds = []
+            }
+            
+        },
+        handleCheckAllChange(v) {
+
+            if (v) {
+                this.examineList.forEach(examine => {
+                    this.selectExamineIds.push(examine.reviewPackageId)
+                })
+                this.examineList.forEach(examine => {
+                    this.selectExamineIds.forEach(val => {
+                        if (val == examine.reviewPackageId) this.chooseExamineList.push(examine)
+                    })
+                })
+                this.isIndeterminate = true;
+                this.checkAll = true;
+                this.$nextTick(() => {
+                    if (this.$refs.placeholder) this.$refs.placeholder.scrollIntoView(false);
+                })
+            } else {
+                this.selectExamineIds = [];
+                this.isIndeterminate = false;
+                this.checkAll = false;
+                if (this.examineList && this.examineList.length > 0) {
+                    let examineIds = this.examineList.map(item => item.reviewPackageId)
+                    this.chooseExamineList = this.chooseExamineList.filter(choose => !examineIds.includes(choose.reviewPackageId))
+                }
+
+            }
+        },
+
+        chooseExamine(item) {
+            if (this.selectExamineIds.includes(item.reviewPackageId)) {
+                let index = this.selectExamineIds.findIndex(item => item.reviewPackageId);
+                this.selectExamineIds.splice(index, 1)
+            } else {
+                this.selectExamineIds.push(item.reviewPackageId);
+            }
+            if (this.selectExamineIds.length === this.examineList.length) {
+                this.isIndeterminate = true;
+                this.checkAll = true;
+            } else {
+                this.isIndeterminate = false;
+                this.checkAll = false;
+            }
+            if (this.activeName == '0') this.initTableData()
+            if (this.activeName == '1') this.initTreeData()
+        },
+
+        handleTagDelete(index) {
+            // 最后一个不能删除
+            if (this.selectExamineList && this.selectExamineList.length > 1)
+                this.selectExamineList.splice(index, 1)
+        },
+        getRecords() {
+            this.loading = true;
+
+            if (this.status === '-1') this.params.status = '' // 不传默认返回全部
+            else this.params.status = this.status
+            if (this.cycleType == '-1') this.params = { ...this.params }
+            else {
+                this.params = { ...this.params, cycleType: this.cycleType }
+            }
+            this.$axiosUser("get", `/performance/statistics/packages/${this.user_info.site_id}`, this.params).then(res => {
+                this.loading = false;
+                let { data: { data: { list, total }, code } } = res;
+                this.examineList = list;
+                if (this.examineList && this.examineList.length > 0) {
+                    this.examineList.map(item => {
+                        this.chooseExamineList.forEach(choose => {
+                            if (item.reviewPackageId == choose.reviewPackageId)
+                                this.selectExamineIds.push(item.reviewPackageId)
+                        })
+                    })
+                }
+
+                this.treeData = {
+                    id: 0,
+                    label: "考核对比",
+                    children: []
+                }
+                // this.selectExamineIds = [];
+            })
+        },
+        initTableData() {
+            let userList = [];
+            let selectExamineList = [];
+
+            this.examineList && this.examineList.forEach(item => {
+                this.selectExamineIds.forEach(selectExamineId => {
+                    if (item.reviewPackageId == selectExamineId) {
+                        selectExamineList.push(item)
+                    }
+                })
+
+            })
+
+            selectExamineList.forEach(item => {
+                let { reviewPackageId, title, users } = item;
+                if (users && users.length > 0) {
+                    users.forEach(user => {
+                        let { employeeName, employeeId } = user
+                        userList.push({ employeeName, employeeId })
+                    })
+                }
+            })
+            this.userList = userList.reduce((acc, obj) => {
+                // 检查当前对象是否已经存在于结果数组中
+                if (!acc.find(item => item.employeeId === obj.employeeId)) { // 假设我们通过id来判断唯一性
+                    acc.push(obj);
+                }
+                return acc;
+            }, []);
+
+        },
+        initTreeData() {
+            this.selectExamineList.forEach(item => {
+                item.id = Date.now() + Math.floor(Math.random() * 10000);
+                item.label = item.title;
+                item.children = item.users;
+                item.users.forEach(user => {
+                    user.id = Date.now() + Math.floor(Math.random() * 10000);
+                    user.label = user.employeeName + ", " + (user.score ? user.score : 0);
+                })
+            })
+            this.treeData = {
+                id: 0,
+                label: "考核对比",
+                children: this.selectExamineList
+            }
+        },
+        handleClick(tab, event) {
+            if (this.activeName == '0') this.initTableData()
+            if (this.activeName == '1') this.initTreeData()
+        },
+        // 日期选择时间
+        changeDate(v) {
+            if (v && v.length > 0) {
+                this.params.startDate = v[0] || ''
+                this.params.endDate = v[1] || ''
+                this.getRecords();
+            }
+
+        },
+        //选择周期
+        changeCircle(v) {
+            this.getRecords();
+        },
+        // 选择状态
+        changeStatus(v) {
+            this.getRecords();
+        },
+        // 重置搜索条件
+        reset() {
+            this.cycleType = '-1'
+            this.status = -1
+            this.date = []
+            this.params = {
+                startDate: '',
+                endDate: '',
+                status: -1, // 不传默认返回全部 0-未完成 1-已完成
+            }
+            this.getRecords();
+        },
+
+        // 清空选择的考核列表
+        clear() {
+            this.selectExamineIds = [];
+            this.chooseExamineList = [];
+        },
+        dialogBeforeClose() {
+            this.dialogVisible = false;
+        },
+        confirm() {
+            this.selectExamineList = this.chooseExamineList;
+            if (this.activeName == '0') this.initTableData()
+            if (this.activeName == '1') this.initTreeData()
+            this.dialogVisible = false;
+        }
+    },
+
+}
+
+</script>
+
+
+
+<style scoped="scoped" lang="scss">
+.contrast-container {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+
+    .el-icon-close {
+        transition: all 0.2s;
+
+        &:hover {
+            font-size: 16px;
+        }
+    }
+
+    .search-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+    }
+
+    .title-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        padding: 0 20px;
+
+        .title {
+            color: #999;
+            font-size: 14px;
+            font-weight: bold;
+        }
+    }
+
+    .package-list {
+        width: 100%;
+        height: 400px;
+        display: flex;
+        margin-top: 10px;
+        border: 1px solid #f7f7f7;
+
+        .template-list {
+            width: 50%;
+            height: 400px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #f7f7f7;
+            padding: 10px;
+            box-sizing: border-box;
+
+            .el-checkbox-group {
+                width: 100% !important;
+                height: 100% !important;
+
+                .el-checkbox {
+                    margin: 0;
+                    width: 200px;
+                    margin-bottom: 10px;
+                }
+
+            }
+        }
+
+        .choose-template {
+            width: 50%;
+            height: 400px;
+            overflow-y: auto;
+            padding: 10px;
+            box-sizing: border-box;
+
+            .line {
+                width: 90%;
+                height: 1px;
+                background-color: #f7f7f7;
+                margin: 10px auto;
+            }
+
+            &-item {
+                width: 90%;
+                height: 30px;
+                line-height: 30px;
+                padding-left: 10px;
+                border-bottom: 1px solid #f7f7f7;
+                margin: 0 auto 10px auto;
+                box-sizing: border-box;
+            }
+        }
+    }
+
+
+    .table-box {
+        width: 100%;
+        padding: 0 20px;
+        box-sizing: border-box;
+    }
+
+    /* 设置滚动条的宽度和背景色 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+        background-color: #f9f9f9;
+    }
+
+    /* 设置滚动条滑块的样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+        border-radius: 6px;
+        background-color: #c1c1c1;
+    }
+
+    /* 设置滚动条滑块hover样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+        background-color: #a8a8a8;
+    }
+
+    /* 设置滚动条轨道的样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+        box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
+        border-radius: 6px;
+        background: #ededed;
+    }
+
+
+}
+</style>

src/ExamineContrast copy 3.vue

@@ -0,0 +1,549 @@
+<template>
+    <div class="contrast-container scroll-bar" style="padding-top: 10px;">
+
+        <div class="flex-box-ce title-box" style="" v-if="selectExamineList && selectExamineList.length > 0">
+            <div class="title">已选择的考核列表:</div>
+            <el-button size="mini" @click="dialogVisible = true">查看更多</el-button>
+        </div>
+
+
+        <div v-if="selectExamineList && selectExamineList.length > 0" class="template-list"
+            style="background: #f7f7f7; padding: 10px 10px 0 0; margin: 0 20px; border-radius: 4px;">
+            <template size="small" v-for="(item, index) in selectExamineList">
+                <el-tag :key="item.reviewPackageId" style="margin: 0 0 10px 10px;" closable
+                    @close="handleTagDelete(index)">
+                    {{ item.title }}
+                </el-tag>
+            </template>
+        </div>
+
+        <div v-else class="flex-box-ce" style="padding: 0 20px;">
+            <el-button size="mini" @click="dialogVisible = true" style="margin-left: auto;">查看更多</el-button>
+        </div>
+
+        <el-tabs v-model="activeName" @tab-click="handleClick"
+            style="width: 100%; padding: 0 20px; box-sizing: border-box;">
+            <el-tab-pane label="表格" name="0">
+                <el-table v-if="userList && userList.length > 0" ref="tableRef" custom-class="openAnimAbcd" id="mytable"
+                    :data="userList" style="width: 100%; " border stripe :header-cell-style="{ background: '#f5f7fa' }"
+                    v-loading="loading">
+                    <el-table-column prop="employeeName" label="姓名" align="center">
+                    </el-table-column>
+                    <el-table-column :label="item.title" v-for="(item, index) in selectExamineList"
+                        :key="item.reviewPackageId" align="center">
+                        <template slot-scope="scope">
+                            <div v-for="user in item.users">
+                                <span v-if="user.employeeId == scope.row.employeeId">{{ user.score }}</span>
+                            </div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="地图" name="1" style="width: 100%;">
+                <div v-if="treeData && JSON.stringify(treeData) !== '{}'" class="flex-box-ce scroll-bar"
+                    style="width: 100%; justify-content: center; overflow-x: auto;">
+                    <vue2-org-tree :data="treeData" style="width: 100%;" />
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+
+        <el-dialog title="请选择需要对比的考核列表" center :visible.sync="dialogVisible" width="700px"
+            :before-close="dialogBeforeClose">
+            <div>
+                <div class="search-box">
+                    <el-select v-model="cycleType" placeholder="请选择周期类型" @change="changeCircle" style="width: 100px;"
+                        size="mini">
+                        <el-option v-for="item in cycleOptions" :key="item.value" :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+
+                    <el-date-picker v-model="date" type="daterange" align="right" unlink-panels range-separator="至"
+                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
+                        :picker-options="pickerOptions" @change="changeDate" style="width: 300px; margin: 0 10px;"
+                        size="mini">
+                    </el-date-picker>
+
+                    <el-select v-model="status" placeholder="请选择" style="width: 100px;" @change="changeStatus"
+                        size="mini">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+
+                    <el-button plain round size="mini" style="margin-left: 10px;" @click="reset">重 置</el-button>
+                </div>
+                <div class="package-list">
+                    <el-transfer v-model="transferValue" :data="transferData" style="margin: 20px auto;"></el-transfer>
+                    <!-- <div class="template-list scroll-bar">
+                        <template v-if="examineList && examineList.length > 0">
+                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
+                                @change="handleCheckAllChange" style="margin-bottom: 10px;">全选</el-checkbox>
+                            <el-checkbox-group v-model="selectExamineIds" size="small" @change="changeSelectExamineIds">
+                                <template v-for="item in examineList">
+                                    <el-checkbox :key="item.reviewPackageId" :label="item.reviewPackageId" border>
+                                        {{ item.title }}
+                                    </el-checkbox>
+                                </template>
+                            </el-checkbox-group>
+                        </template>
+                        <template v-else>
+                            <div class="flex-box-ce" style="justify-content: center;">
+                                <noData content="暂无数据" imgW="120px" imgH="80px"></noData>
+                            </div>
+                        </template>
+                    </div>
+                    <div class="choose-template scroll-bar">
+                        <el-button plain round size="mini" @click="clear">清 空</el-button>
+                        <div class="line"></div>
+                        <template v-for="(item, index) in chooseExamineList">
+                            <div class="flex-box-ce choose-template-item" style="justify-content: space-between;">
+                                <div>{{ item.title }}</div>
+                                <i class="el-icon-close" @click="deleteItem(index)"></i>
+                            </div>
+                        </template>
+                        <div ref="placeholder" style="height: 50px;"></div>
+                    </div> -->
+                </div>
+
+            </div>
+            <div slot="footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="confirm">确 定</el-button>
+            </div>
+        </el-dialog>
+
+        <div style="height: 50px;"></div>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import moment from 'moment';
+
+export default {
+    data() {
+        return {
+            checkAll: false,
+            isIndeterminate: true,
+            dialogVisible: false,
+            activeName: "0",
+            loading: false,
+            treeData: {},
+            // 周期类型 0-未定义 1-年度 2-半年度 3-季度 4-月度
+            cycleType: '-1',
+            cycleOptions: [
+                { label: "全部", value: '-1' },
+                { label: "未定义", value: '0' },
+                { label: "年度", value: '1' },
+                { label: "半年度", value: '2' },
+                { label: "季度", value: '3' },
+                { label: "月度", value: '4' },
+            ],
+            status: -1,
+            options: [{
+                value: -1,
+                label: '全部'
+            }, {
+                value: '0',
+                label: '未完成'
+            }, {
+                value: '1',
+                label: '已完成'
+            }],
+            params: {
+                startDate: '',
+                endDate: '',
+                status: -1, // 不传默认返回全部 0-未完成 1-已完成
+            },
+            transferData: [],
+            transferValue: [],
+            pickerOptions: {
+                shortcuts: [{
+                    text: '最近一周',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近一个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近三个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }]
+            },
+            date: [],
+            examineList: [], // 考核表列表
+            tableHeader: [],
+            tableData: [],
+            userList: [],
+            selectExamineIds: [],
+            selectExamineList: [],
+            chooseExamineList: []
+        }
+    },
+    // watch: {
+    //     chooseExamineList(v) {
+    //         this.selectExamineList = this.chooseExamineList
+    //     }
+    // },
+    filters: {
+        formatDate(val) {
+            if (val) return moment(val).format('YYYY-MM-DD')
+            else return "--"
+        }
+    },
+    computed: {
+        ...mapGetters(['user_info']),
+        // selectExamineList() {
+        //     return this.examineList.filter(item => this.selectExamineIds.includes(item.reviewPackageId))
+        // }
+    },
+    created() {
+        this.getRecords();
+        this.dialogVisible = true;
+    },
+    methods: {
+        deleteItem(index) {
+            let chooseIndex = this.selectExamineIds.findIndex(select => select == this.chooseExamineList[index].reviewPackageId)
+            this.selectExamineIds.splice(chooseIndex, 1)
+            this.chooseExamineList.splice(index, 1)
+        },
+
+        changeSelectExamineIds(v) {
+            console.log(this.selectExamineIds)
+            if (v && v.length > 0) {
+                this.examineList.forEach(examine => {
+                    this.selectExamineIds.forEach(val => {
+                        if (val == examine.reviewPackageId) this.chooseExamineList.push(examine)
+                    })
+                })
+                this.chooseExamineList = Array.from(new Set(this.chooseExamineList.map(JSON.stringify))).map(JSON.parse);
+            } else {
+                // this.selectExamineIds = []
+            }
+            
+        },
+        handleCheckAllChange(v) {
+
+            if (v) {
+                this.examineList.forEach(examine => {
+                    this.selectExamineIds.push(examine.reviewPackageId)
+                })
+                this.examineList.forEach(examine => {
+                    this.selectExamineIds.forEach(val => {
+                        if (val == examine.reviewPackageId) this.chooseExamineList.push(examine)
+                    })
+                })
+                this.isIndeterminate = true;
+                this.checkAll = true;
+                this.$nextTick(() => {
+                    if (this.$refs.placeholder) this.$refs.placeholder.scrollIntoView(false);
+                })
+            } else {
+                this.selectExamineIds = [];
+                this.isIndeterminate = false;
+                this.checkAll = false;
+                if (this.examineList && this.examineList.length > 0) {
+                    let examineIds = this.examineList.map(item => item.reviewPackageId)
+                    this.chooseExamineList = this.chooseExamineList.filter(choose => !examineIds.includes(choose.reviewPackageId))
+                }
+
+            }
+        },
+
+        chooseExamine(item) {
+            if (this.selectExamineIds.includes(item.reviewPackageId)) {
+                let index = this.selectExamineIds.findIndex(item => item.reviewPackageId);
+                this.selectExamineIds.splice(index, 1)
+            } else {
+                this.selectExamineIds.push(item.reviewPackageId);
+            }
+            if (this.selectExamineIds.length === this.examineList.length) {
+                this.isIndeterminate = true;
+                this.checkAll = true;
+            } else {
+                this.isIndeterminate = false;
+                this.checkAll = false;
+            }
+            if (this.activeName == '0') this.initTableData()
+            if (this.activeName == '1') this.initTreeData()
+        },
+
+        handleTagDelete(index) {
+            // 最后一个不能删除
+            if (this.selectExamineList && this.selectExamineList.length > 1)
+                this.selectExamineList.splice(index, 1)
+        },
+        getRecords() {
+            this.loading = true;
+            if (this.status === '-1') this.params.status = '' // 不传默认返回全部
+            else this.params.status = this.status
+            if (this.cycleType == '-1') this.params = { ...this.params }
+            else this.params = { ...this.params, cycleType: this.cycleType }
+            this.$axiosUser("get", `/performance/statistics/packages/${this.user_info.site_id}`, this.params).then(res => {
+                this.loading = false;
+                let { data: { data: { list, total }, code } } = res;
+                this.examineList = list;
+                this.transferData = this.examineList.map(item => ({
+                    key: item.reviewPackageId,
+                    label: item.title
+                }))
+                if (this.examineList && this.examineList.length > 0) {
+                    this.examineList.map(item => {
+                        this.chooseExamineList.forEach(choose => {
+                            if (item.reviewPackageId == choose.reviewPackageId)
+                                this.selectExamineIds.push(item.reviewPackageId)
+                        })
+                    })
+                }
+
+                this.treeData = {
+                    id: 0,
+                    label: "考核对比",
+                    children: []
+                }
+                // this.selectExamineIds = [];
+            })
+        },
+        initTableData() {
+            let userList = [];
+            let selectExamineList = [];
+
+            this.examineList && this.examineList.forEach(item => {
+                this.transferValue.forEach(selectExamineId => {
+                    if (item.reviewPackageId == selectExamineId) {
+                        selectExamineList.push(item)
+                    }
+                })
+
+            })
+
+            selectExamineList.forEach(item => {
+                let { reviewPackageId, title, users } = item;
+                if (users && users.length > 0) {
+                    users.forEach(user => {
+                        let { employeeName, employeeId } = user
+                        userList.push({ employeeName, employeeId })
+                    })
+                }
+            })
+            this.userList = userList.reduce((acc, obj) => {
+                // 检查当前对象是否已经存在于结果数组中
+                if (!acc.find(item => item.employeeId === obj.employeeId)) { // 假设我们通过id来判断唯一性
+                    acc.push(obj);
+                }
+                return acc;
+            }, []);
+
+        },
+        initTreeData() {
+            this.selectExamineList.forEach(item => {
+                item.id = Date.now() + Math.floor(Math.random() * 10000);
+                item.label = item.title;
+                item.children = item.users;
+                item.users.forEach(user => {
+                    user.id = Date.now() + Math.floor(Math.random() * 10000);
+                    user.label = user.employeeName + ", " + (user.score ? user.score : 0);
+                })
+            })
+            this.treeData = {
+                id: 0,
+                label: "考核对比",
+                children: this.selectExamineList
+            }
+        },
+        handleClick(tab, event) {
+            if (this.activeName == '0') this.initTableData()
+            if (this.activeName == '1') this.initTreeData()
+        },
+        // 日期选择时间
+        changeDate(v) {
+            if (v && v.length > 0) {
+                this.params.startDate = v[0] || ''
+                this.params.endDate = v[1] || ''
+                this.getRecords();
+            }
+
+        },
+        //选择周期
+        changeCircle(v) {
+            console.log(v);
+            this.getRecords();
+        },
+        // 选择状态
+        changeStatus(v) {
+            this.getRecords();
+        },
+        // 重置搜索条件
+        reset() {
+            this.cycleType = '-1'
+            this.status = -1
+            this.date = []
+            this.params = {
+                startDate: '',
+                endDate: '',
+                status: -1, // 不传默认返回全部 0-未完成 1-已完成
+            }
+            this.getRecords();
+        },
+
+        // 清空选择的考核列表
+        clear() {
+            this.selectExamineIds = [];
+            this.chooseExamineList = [];
+        },
+        dialogBeforeClose() {
+            this.dialogVisible = false;
+        },
+        confirm() {
+            this.selectExamineList = this.examineList.filter(item => this.transferValue.indexOf(item.reviewPackageId) >= 0);
+            if (this.activeName == '0') this.initTableData()
+            if (this.activeName == '1') this.initTreeData()
+            this.dialogVisible = false;
+        }
+    },
+
+}
+
+</script>
+
+
+
+<style scoped="scoped" lang="scss">
+.contrast-container {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+
+    .el-icon-close {
+        transition: all 0.2s;
+
+        &:hover {
+            font-size: 16px;
+        }
+    }
+
+    .search-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+    }
+
+    .title-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        padding: 0 20px;
+
+        .title {
+            color: #999;
+            font-size: 14px;
+            font-weight: bold;
+        }
+    }
+
+    .package-list {
+        width: 100%;
+        height: 400px;
+        margin-top: 10px;
+        border: 1px solid #f7f7f7;
+
+        .template-list {
+            width: 50%;
+            height: 400px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #f7f7f7;
+            padding: 10px;
+            box-sizing: border-box;
+
+            .el-checkbox-group {
+                width: 100% !important;
+                height: 100% !important;
+
+                .el-checkbox {
+                    margin: 0;
+                    width: 200px;
+                    margin-bottom: 10px;
+                }
+
+            }
+        }
+
+        .choose-template {
+            width: 50%;
+            height: 400px;
+            overflow-y: auto;
+            padding: 10px;
+            box-sizing: border-box;
+
+            .line {
+                width: 90%;
+                height: 1px;
+                background-color: #f7f7f7;
+                margin: 10px auto;
+            }
+
+            &-item {
+                width: 90%;
+                height: 30px;
+                line-height: 30px;
+                padding-left: 10px;
+                border-bottom: 1px solid #f7f7f7;
+                margin: 0 auto 10px auto;
+                box-sizing: border-box;
+            }
+        }
+    }
+
+
+    .table-box {
+        width: 100%;
+        padding: 0 20px;
+        box-sizing: border-box;
+    }
+
+    /* 设置滚动条的宽度和背景色 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+        background-color: #f9f9f9;
+    }
+
+    /* 设置滚动条滑块的样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+        border-radius: 6px;
+        background-color: #c1c1c1;
+    }
+
+    /* 设置滚动条滑块hover样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+        background-color: #a8a8a8;
+    }
+
+    /* 设置滚动条轨道的样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+        box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
+        border-radius: 6px;
+        background: #ededed;
+    }
+
+
+}
+</style>

src/ExamineContrast copy.vue

@@ -0,0 +1,537 @@
+<template>
+    <div class="contrast-container scroll-bar" style="padding-top: 10px;">
+
+        <div class="flex-box-ce title-box" style="" v-if="selectExamineList && selectExamineList.length > 0">
+            <div class="title">已选择的考核列表:</div>
+            <el-button size="mini" @click="dialogVisible = true">查看更多</el-button>
+        </div>
+
+
+        <div v-if="selectExamineList && selectExamineList.length > 0" class="template-list"
+            style="background: #f7f7f7; padding: 10px 10px 0 0; margin: 0 20px; border-radius: 4px;">
+            <template size="small" v-for="(item, index) in selectExamineList">
+                <el-tag :key="item.reviewPackageId" style="margin: 0 0 10px 10px;" closable
+                    @close="handleTagDelete(index)">
+                    {{ item.title }}
+                </el-tag>
+            </template>
+        </div>
+
+        <div v-else class="flex-box-ce" style="padding: 0 20px;">
+            <el-button size="mini" @click="dialogVisible = true" style="margin-left: auto;">查看更多</el-button>
+        </div>
+
+        <el-tabs v-model="activeName" @tab-click="handleClick"
+            style="width: 100%; padding: 0 20px; box-sizing: border-box;">
+            <el-tab-pane label="表格" name="0">
+                <el-table v-if="userList && userList.length > 0" ref="tableRef" custom-class="openAnimAbcd" id="mytable"
+                    :data="userList" style="width: 100%; " border stripe :header-cell-style="{ background: '#f5f7fa' }"
+                    v-loading="loading">
+                    <el-table-column prop="employeeName" label="姓名" align="center">
+                    </el-table-column>
+                    <el-table-column :label="item.title" v-for="(item, index) in selectExamineList"
+                        :key="item.reviewPackageId" align="center">
+                        <template slot-scope="scope">
+                            <div v-for="user in item.users">
+                                <span v-if="user.employeeId == scope.row.employeeId">{{ user.score }}</span>
+                            </div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="地图" name="1" style="width: 100%;">
+                <div v-if="treeData && JSON.stringify(treeData) !== '{}'" class="flex-box-ce scroll-bar"
+                    style="width: 100%; justify-content: center; overflow-x: auto;">
+                    <vue2-org-tree :data="treeData" style="width: 100%;" />
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+
+        <el-dialog title="请选择需要对比的考核列表" center :visible.sync="dialogVisible" width="600px"
+            :before-close="dialogBeforeClose">
+            <div>
+                <div class="search-box">
+                    <el-select v-model="cycleType" placeholder="请选择周期类型" @change="changeCircle" style="width: 100px;"
+                        size="mini">
+                        <el-option v-for="item in cycleOptions" :key="item.value" :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+
+                    <el-date-picker v-model="date" type="daterange" align="right" unlink-panels range-separator="至"
+                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
+                        :picker-options="pickerOptions" @change="changeDate" style="width: 300px; margin: 0 10px;"
+                        size="mini">
+                    </el-date-picker>
+
+                    <el-select v-model="status" placeholder="请选择" style="width: 100px;" @change="changeStatus"
+                        size="mini">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+
+                    <el-button plain round size="mini" style="margin-left: 10px;" @click="reset">重 置</el-button>
+                </div>
+                <div class="package-list">
+                    <div class="template-list scroll-bar">
+                        <template v-if="examineList && examineList.length > 0">
+                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
+                                @change="handleCheckAllChange" style="margin-bottom: 10px;">全选</el-checkbox>
+                            <el-checkbox-group v-model="selectExamineIds" size="small" @change="changeSelectExamineIds">
+                                <template v-for="item in examineList">
+                                    <el-checkbox :key="item.reviewPackageId" :label="item.reviewPackageId" border>
+                                        {{ item.title }}
+                                    </el-checkbox>
+                                </template>
+                            </el-checkbox-group>
+                        </template>
+                        <template v-else>
+                            <div class="flex-box-ce" style="justify-content: center;">
+                                <noData content="暂无数据" imgW="120px" imgH="80px"></noData>
+                            </div>
+                        </template>
+                    </div>
+                    <div class="choose-template scroll-bar">
+                        <el-button plain round size="mini" @click="clear">清 空</el-button>
+                        <div class="line"></div>
+                        <template v-for="(item, index) in chooseExamineList">
+                            <div class="flex-box-ce choose-template-item" style="justify-content: space-between;">
+                                <div>{{ item.title }}</div>
+                                <i class="el-icon-close" @click="deleteItem(index)"></i>
+                            </div>
+                        </template>
+                        <div ref="placeholder" style="height: 50px;"></div>
+                    </div>
+                </div>
+
+            </div>
+            <div slot="footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="confirm">确 定</el-button>
+            </div>
+        </el-dialog>
+
+        <div style="height: 50px;"></div>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import moment from 'moment';
+
+export default {
+    data() {
+        return {
+            checkAll: false,
+            isIndeterminate: true,
+            dialogVisible: false,
+            activeName: "0",
+            loading: false,
+            treeData: {},
+            // 周期类型 0-未定义 1-年度 2-半年度 3-季度 4-月度
+            cycleType: '-1',
+            cycleOptions: [
+                { label: "全部", value: '-1' },
+                { label: "未定义", value: '0' },
+                { label: "年度", value: '1' },
+                { label: "半年度", value: '2' },
+                { label: "季度", value: '3' },
+                { label: "月度", value: '4' },
+            ],
+            status: -1,
+            options: [{
+                value: -1,
+                label: '全部'
+            }, {
+                value: '0',
+                label: '未完成'
+            }, {
+                value: '1',
+                label: '已完成'
+            }],
+            params: {
+                startDate: '',
+                endDate: '',
+                status: -1, // 不传默认返回全部 0-未完成 1-已完成
+            },
+
+            pickerOptions: {
+                shortcuts: [{
+                    text: '最近一周',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近一个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近三个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }]
+            },
+            date: [],
+            examineList: [], // 考核表列表
+            tableHeader: [],
+            tableData: [],
+            userList: [],
+            selectExamineIds: [],
+            selectExamineList: [],
+            chooseExamineList: []
+        }
+    },
+    filters: {
+        formatDate(val) {
+            if (val) return moment(val).format('YYYY-MM-DD')
+            else return "--"
+        }
+    },
+    computed: {
+        ...mapGetters(['user_info']),
+        // selectExamineList() {
+        //     return this.examineList.filter(item => this.selectExamineIds.includes(item.reviewPackageId))
+        // }
+    },
+    created() {
+        this.getRecords();
+        this.dialogVisible = true;
+    },
+    methods: {
+        deleteItem(index) {
+            let chooseIndex = this.selectExamineIds.findIndex(select => select == this.chooseExamineList[index].reviewPackageId)
+            this.selectExamineIds.splice(chooseIndex, 1)
+            this.chooseExamineList.splice(index, 1)
+        },
+
+        changeSelectExamineIds(v) {
+            if (v && v.length > 0) {
+                this.examineList.forEach(examine => {
+                    this.selectExamineIds.forEach(val => {
+                        if (val == examine.reviewPackageId) this.chooseExamineList.push(examine)
+                    })
+                })
+            }
+
+        },
+        handleCheckAllChange(v) {
+
+            if (v) {
+                this.examineList.forEach(examine => {
+                    this.selectExamineIds.push(examine.reviewPackageId)
+                })
+                this.examineList.forEach(examine => {
+                    this.selectExamineIds.forEach(val => {
+                        if (val == examine.reviewPackageId) this.chooseExamineList.push(examine)
+                    })
+                })
+                this.isIndeterminate = true;
+                this.checkAll = true;
+                this.$nextTick(() => {
+                    if (this.$refs.placeholder) this.$refs.placeholder.scrollIntoView(false);
+                })
+            } else {
+                this.selectExamineIds = [];
+                this.isIndeterminate = false;
+                this.checkAll = false;
+                if (this.examineList && this.examineList.length > 0) {
+                    let examineIds = this.examineList.map(item => item.reviewPackageId)
+                    this.chooseExamineList = this.chooseExamineList.filter(choose => !examineIds.includes(choose.reviewPackageId))
+                }
+
+            }
+        },
+
+        chooseExamine(item) {
+            if (this.selectExamineIds.includes(item.reviewPackageId)) {
+                let index = this.selectExamineIds.findIndex(item => item.reviewPackageId);
+                this.selectExamineIds.splice(index, 1)
+            } else {
+                this.selectExamineIds.push(item.reviewPackageId);
+            }
+            if (this.selectExamineIds.length === this.examineList.length) {
+                this.isIndeterminate = true;
+                this.checkAll = true;
+            } else {
+                this.isIndeterminate = false;
+                this.checkAll = false;
+            }
+            if (this.activeName == '0') this.initTableData()
+            if (this.activeName == '1') this.initTreeData()
+        },
+
+        handleTagDelete(index) {
+            // 最后一个不能删除
+            if (this.selectExamineList && this.selectExamineList.length > 1)
+                this.selectExamineList.splice(index, 1)
+        },
+        getRecords() {
+            this.loading = true;
+
+            if (this.status === '-1') this.params.status = '' // 不传默认返回全部
+            else this.params.status = this.status
+            if (this.cycleType == '-1') this.params = { ...this.params }
+            else {
+                this.params = { ...this.params, cycleType: this.cycleType }
+            }
+            this.$axiosUser("get", `/performance/statistics/packages/${this.user_info.site_id}`, this.params).then(res => {
+                this.loading = false;
+                let { data: { data: { list, total }, code } } = res;
+                this.examineList = list;
+                if (this.examineList && this.examineList.length > 0) {
+                    this.examineList.map(item => {
+                        this.chooseExamineList.forEach(choose => {
+                            if (item.reviewPackageId == choose.reviewPackageId)
+                                this.selectExamineIds.push(item.reviewPackageId)
+                        })
+                    })
+                }
+
+                this.treeData = {
+                    id: 0,
+                    label: "考核对比",
+                    children: []
+                }
+                // this.selectExamineIds = [];
+            })
+        },
+        initTableData() {
+            let userList = [];
+            let selectExamineList = [];
+
+            this.examineList && this.examineList.forEach(item => {
+                this.selectExamineIds.forEach(selectExamineId => {
+                    if (item.reviewPackageId == selectExamineId) {
+                        selectExamineList.push(item)
+                    }
+                })
+
+            })
+
+            selectExamineList.forEach(item => {
+                let { reviewPackageId, title, users } = item;
+                if (users && users.length > 0) {
+                    users.forEach(user => {
+                        let { employeeName, employeeId } = user
+                        userList.push({ employeeName, employeeId })
+                    })
+                }
+            })
+            this.userList = userList.reduce((acc, obj) => {
+                // 检查当前对象是否已经存在于结果数组中
+                if (!acc.find(item => item.employeeId === obj.employeeId)) { // 假设我们通过id来判断唯一性
+                    acc.push(obj);
+                }
+                return acc;
+            }, []);
+
+        },
+        initTreeData() {
+            this.selectExamineList.forEach(item => {
+                item.id = Date.now() + Math.floor(Math.random() * 10000);
+                item.label = item.title;
+                item.children = item.users;
+                item.users.forEach(user => {
+                    user.id = Date.now() + Math.floor(Math.random() * 10000);
+                    user.label = user.employeeName + ", " + (user.score ? user.score : 0);
+                })
+            })
+            this.treeData = {
+                id: 0,
+                label: "考核对比",
+                children: this.selectExamineList
+            }
+        },
+        handleClick(tab, event) {
+            if (this.activeName == '0') this.initTableData()
+            if (this.activeName == '1') this.initTreeData()
+        },
+        // 日期选择时间
+        changeDate(v) {
+            if (v && v.length > 0) {
+                this.params.startDate = v[0] || ''
+                this.params.endDate = v[1] || ''
+                this.getRecords();
+            }
+
+        },
+        //选择周期
+        changeCircle(v) {
+            this.getRecords();
+        },
+        // 选择状态
+        changeStatus(v) {
+            this.getRecords();
+        },
+        // 重置搜索条件
+        reset() {
+            this.cycleType = '-1'
+            this.status = -1
+            this.date = []
+            this.params = {
+                startDate: '',
+                endDate: '',
+                status: -1, // 不传默认返回全部 0-未完成 1-已完成
+            }
+            this.getRecords();
+        },
+
+        // 清空选择的考核列表
+        clear() {
+            this.selectExamineIds = [];
+            this.chooseExamineList = [];
+        },
+        dialogBeforeClose() {
+            this.dialogVisible = false;
+        },
+        confirm() {
+            this.selectExamineList = this.examineList.filter(item => this.selectExamineIds.includes(item.reviewPackageId))
+            if (this.activeName == '0') this.initTableData()
+            if (this.activeName == '1') this.initTreeData()
+            this.dialogVisible = false;
+        }
+    },
+
+}
+
+</script>
+
+
+
+<style scoped="scoped" lang="scss">
+.contrast-container {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+
+    .el-icon-close {
+        transition: all 0.2s;
+
+        &:hover {
+            font-size: 16px;
+        }
+    }
+
+    .search-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+    }
+
+    .title-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        padding: 0 20px;
+
+        .title {
+            color: #999;
+            font-size: 14px;
+            font-weight: bold;
+        }
+    }
+
+    .package-list {
+        width: 100%;
+        height: 400px;
+        display: flex;
+        margin-top: 10px;
+        border: 1px solid #f7f7f7;
+
+        .template-list {
+            width: 50%;
+            height: 400px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #f7f7f7;
+            padding: 10px;
+            box-sizing: border-box;
+
+            .el-checkbox-group {
+                width: 100% !important;
+                height: 100% !important;
+
+                .el-checkbox {
+                    margin: 0;
+                    width: 200px;
+                    margin-bottom: 10px;
+                }
+
+            }
+        }
+
+        .choose-template {
+            width: 50%;
+            height: 400px;
+            overflow-y: auto;
+            padding: 10px;
+            box-sizing: border-box;
+
+            .line {
+                width: 90%;
+                height: 1px;
+                background-color: #f7f7f7;
+                margin: 10px auto;
+            }
+
+            &-item {
+                width: 90%;
+                height: 30px;
+                line-height: 30px;
+                padding-left: 10px;
+                border-bottom: 1px solid #f7f7f7;
+                margin: 0 auto 10px auto;
+                box-sizing: border-box;
+            }
+        }
+    }
+
+
+    .table-box {
+        width: 100%;
+        padding: 0 20px;
+        box-sizing: border-box;
+    }
+
+    /* 设置滚动条的宽度和背景色 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+        background-color: #f9f9f9;
+    }
+
+    /* 设置滚动条滑块的样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+        border-radius: 6px;
+        background-color: #c1c1c1;
+    }
+
+    /* 设置滚动条滑块hover样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+        background-color: #a8a8a8;
+    }
+
+    /* 设置滚动条轨道的样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+        box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
+        border-radius: 6px;
+        background: #ededed;
+    }
+
+
+}
+</style>

src/ExamineContrast.vue

@@ -0,0 +1,549 @@
+<template>
+    <div class="contrast-container scroll-bar" style="padding-top: 10px;">
+
+        <div class="flex-box-ce title-box" style="" v-if="selectExamineList && selectExamineList.length > 0">
+            <div class="title">已选择的考核列表:</div>
+            <el-button size="mini" @click="dialogVisible = true">查看更多</el-button>
+        </div>
+
+
+        <div v-if="selectExamineList && selectExamineList.length > 0" class="template-list"
+            style="background: #f7f7f7; padding: 10px 10px 0 0; margin: 0 20px; border-radius: 4px;">
+            <template size="small" v-for="(item, index) in selectExamineList">
+                <el-tag :key="item.reviewPackageId" style="margin: 0 0 10px 10px;" closable
+                    @close="handleTagDelete(index)">
+                    {{ item.title }}
+                </el-tag>
+            </template>
+        </div>
+
+        <div v-else class="flex-box-ce" style="padding: 0 20px;">
+            <el-button size="mini" @click="dialogVisible = true" style="margin-left: auto;">查看更多</el-button>
+        </div>
+
+        <el-tabs v-model="activeName" @tab-click="handleClick"
+            style="width: 100%; padding: 0 20px; box-sizing: border-box;">
+            <el-tab-pane label="表格" name="0">
+                <el-table v-if="userList && userList.length > 0" ref="tableRef" custom-class="openAnimAbcd" id="mytable"
+                    :data="userList" style="width: 100%; " border stripe :header-cell-style="{ background: '#f5f7fa' }"
+                    v-loading="loading">
+                    <el-table-column prop="employeeName" label="姓名" align="center">
+                    </el-table-column>
+                    <el-table-column :label="item.title" v-for="(item, index) in selectExamineList"
+                        :key="item.reviewPackageId" align="center">
+                        <template slot-scope="scope">
+                            <div v-for="user in item.users">
+                                <span v-if="user.employeeId == scope.row.employeeId">{{ user.score }}</span>
+                            </div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="地图" name="1" style="width: 100%;">
+                <div v-if="treeData && JSON.stringify(treeData) !== '{}'" class="flex-box-ce scroll-bar"
+                    style="width: 100%; justify-content: center; overflow-x: auto;">
+                    <vue2-org-tree :data="treeData" style="width: 100%;" />
+                </div>
+            </el-tab-pane>
+        </el-tabs>
+
+        <el-dialog title="请选择需要对比的考核列表" center :visible.sync="dialogVisible" width="700px"
+            :before-close="dialogBeforeClose">
+            <div>
+                <div class="search-box">
+                    <el-select v-model="cycleType" placeholder="请选择周期类型" @change="changeCircle" style="width: 100px;"
+                        size="mini">
+                        <el-option v-for="item in cycleOptions" :key="item.value" :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+
+                    <el-date-picker v-model="date" type="daterange" align="right" unlink-panels range-separator="至"
+                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
+                        :picker-options="pickerOptions" @change="changeDate" style="width: 300px; margin: 0 10px;"
+                        size="mini">
+                    </el-date-picker>
+
+                    <el-select v-model="status" placeholder="请选择" style="width: 100px;" @change="changeStatus"
+                        size="mini">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+
+                    <el-button plain round size="mini" style="margin-left: 10px;" @click="reset">重 置</el-button>
+                </div>
+                <div class="package-list">
+                    <el-transfer v-model="transferValue" :data="transferData" style="margin: 20px auto;"></el-transfer>
+                    <!-- <div class="template-list scroll-bar">
+                        <template v-if="examineList && examineList.length > 0">
+                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
+                                @change="handleCheckAllChange" style="margin-bottom: 10px;">全选</el-checkbox>
+                            <el-checkbox-group v-model="selectExamineIds" size="small" @change="changeSelectExamineIds">
+                                <template v-for="item in examineList">
+                                    <el-checkbox :key="item.reviewPackageId" :label="item.reviewPackageId" border>
+                                        {{ item.title }}
+                                    </el-checkbox>
+                                </template>
+                            </el-checkbox-group>
+                        </template>
+                        <template v-else>
+                            <div class="flex-box-ce" style="justify-content: center;">
+                                <noData content="暂无数据" imgW="120px" imgH="80px"></noData>
+                            </div>
+                        </template>
+                    </div>
+                    <div class="choose-template scroll-bar">
+                        <el-button plain round size="mini" @click="clear">清 空</el-button>
+                        <div class="line"></div>
+                        <template v-for="(item, index) in chooseExamineList">
+                            <div class="flex-box-ce choose-template-item" style="justify-content: space-between;">
+                                <div>{{ item.title }}</div>
+                                <i class="el-icon-close" @click="deleteItem(index)"></i>
+                            </div>
+                        </template>
+                        <div ref="placeholder" style="height: 50px;"></div>
+                    </div> -->
+                </div>
+
+            </div>
+            <div slot="footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="confirm">确 定</el-button>
+            </div>
+        </el-dialog>
+
+        <div style="height: 50px;"></div>
+    </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import moment from 'moment';
+
+export default {
+    data() {
+        return {
+            checkAll: false,
+            isIndeterminate: true,
+            dialogVisible: false,
+            activeName: "0",
+            loading: false,
+            treeData: {},
+            // 周期类型 0-未定义 1-年度 2-半年度 3-季度 4-月度
+            cycleType: '-1',
+            cycleOptions: [
+                { label: "全部", value: '-1' },
+                { label: "未定义", value: '0' },
+                { label: "年度", value: '1' },
+                { label: "半年度", value: '2' },
+                { label: "季度", value: '3' },
+                { label: "月度", value: '4' },
+            ],
+            status: -1,
+            options: [{
+                value: -1,
+                label: '全部'
+            }, {
+                value: '0',
+                label: '未完成'
+            }, {
+                value: '1',
+                label: '已完成'
+            }],
+            params: {
+                startDate: '',
+                endDate: '',
+                status: -1, // 不传默认返回全部 0-未完成 1-已完成
+            },
+            transferData: [],
+            transferValue: [],
+            pickerOptions: {
+                shortcuts: [{
+                    text: '最近一周',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近一个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }, {
+                    text: '最近三个月',
+                    onClick(picker) {
+                        const end = new Date();
+                        const start = new Date();
+                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                        picker.$emit('pick', [start, end]);
+                    }
+                }]
+            },
+            date: [],
+            examineList: [], // 考核表列表
+            tableHeader: [],
+            tableData: [],
+            userList: [],
+            selectExamineIds: [],
+            selectExamineList: [],
+            chooseExamineList: []
+        }
+    },
+    // watch: {
+    //     chooseExamineList(v) {
+    //         this.selectExamineList = this.chooseExamineList
+    //     }
+    // },
+    filters: {
+        formatDate(val) {
+            if (val) return moment(val).format('YYYY-MM-DD')
+            else return "--"
+        }
+    },
+    computed: {
+        ...mapGetters(['user_info']),
+        // selectExamineList() {
+        //     return this.examineList.filter(item => this.selectExamineIds.includes(item.reviewPackageId))
+        // }
+    },
+    created() {
+        this.getRecords();
+        this.dialogVisible = true;
+    },
+    methods: {
+        deleteItem(index) {
+            let chooseIndex = this.selectExamineIds.findIndex(select => select == this.chooseExamineList[index].reviewPackageId)
+            this.selectExamineIds.splice(chooseIndex, 1)
+            this.chooseExamineList.splice(index, 1)
+        },
+
+        changeSelectExamineIds(v) {
+            console.log(this.selectExamineIds)
+            if (v && v.length > 0) {
+                this.examineList.forEach(examine => {
+                    this.selectExamineIds.forEach(val => {
+                        if (val == examine.reviewPackageId) this.chooseExamineList.push(examine)
+                    })
+                })
+                this.chooseExamineList = Array.from(new Set(this.chooseExamineList.map(JSON.stringify))).map(JSON.parse);
+            } else {
+                // this.selectExamineIds = []
+            }
+
+        },
+        handleCheckAllChange(v) {
+
+            if (v) {
+                this.examineList.forEach(examine => {
+                    this.selectExamineIds.push(examine.reviewPackageId)
+                })
+                this.examineList.forEach(examine => {
+                    this.selectExamineIds.forEach(val => {
+                        if (val == examine.reviewPackageId) this.chooseExamineList.push(examine)
+                    })
+                })
+                this.isIndeterminate = true;
+                this.checkAll = true;
+                this.$nextTick(() => {
+                    if (this.$refs.placeholder) this.$refs.placeholder.scrollIntoView(false);
+                })
+            } else {
+                this.selectExamineIds = [];
+                this.isIndeterminate = false;
+                this.checkAll = false;
+                if (this.examineList && this.examineList.length > 0) {
+                    let examineIds = this.examineList.map(item => item.reviewPackageId)
+                    this.chooseExamineList = this.chooseExamineList.filter(choose => !examineIds.includes(choose.reviewPackageId))
+                }
+
+            }
+        },
+
+        chooseExamine(item) {
+            if (this.selectExamineIds.includes(item.reviewPackageId)) {
+                let index = this.selectExamineIds.findIndex(item => item.reviewPackageId);
+                this.selectExamineIds.splice(index, 1)
+            } else {
+                this.selectExamineIds.push(item.reviewPackageId);
+            }
+            if (this.selectExamineIds.length === this.examineList.length) {
+                this.isIndeterminate = true;
+                this.checkAll = true;
+            } else {
+                this.isIndeterminate = false;
+                this.checkAll = false;
+            }
+            if (this.activeName == '0') this.initTableData()
+            if (this.activeName == '1') this.initTreeData()
+        },
+
+        handleTagDelete(index) {
+            // 最后一个不能删除
+            if (this.selectExamineList && this.selectExamineList.length > 1)
+                this.selectExamineList.splice(index, 1)
+        },
+        getRecords() {
+            this.loading = true;
+            if (this.status === '-1') this.params.status = '' // 不传默认返回全部
+            else this.params.status = this.status
+            if (this.cycleType == '-1') this.params = { ...this.params }
+            else this.params = { ...this.params, cycleType: this.cycleType }
+            this.$axiosUser("get", `/performance/statistics/packages/${this.user_info.site_id}`, this.params).then(res => {
+                this.loading = false;
+                let { data: { data: { list, total }, code } } = res;
+                this.examineList = list;
+                this.transferData = this.examineList.map(item => ({
+                    key: item.reviewPackageId,
+                    label: item.title
+                }))
+                if (this.examineList && this.examineList.length > 0) {
+                    this.examineList.map(item => {
+                        this.chooseExamineList.forEach(choose => {
+                            if (item.reviewPackageId == choose.reviewPackageId)
+                                this.selectExamineIds.push(item.reviewPackageId)
+                        })
+                    })
+                }
+
+                this.treeData = {
+                    id: 0,
+                    label: "考核对比",
+                    children: []
+                }
+                // this.selectExamineIds = [];
+            })
+        },
+        initTableData() {
+            let userList = [];
+            let selectExamineList = [];
+
+            this.examineList && this.examineList.forEach(item => {
+                this.transferValue.forEach(selectExamineId => {
+                    if (item.reviewPackageId == selectExamineId) {
+                        selectExamineList.push(item)
+                    }
+                })
+
+            })
+
+            selectExamineList.forEach(item => {
+                let { reviewPackageId, title, users } = item;
+                if (users && users.length > 0) {
+                    users.forEach(user => {
+                        let { employeeName, employeeId } = user
+                        userList.push({ employeeName, employeeId })
+                    })
+                }
+            })
+            this.userList = userList.reduce((acc, obj) => {
+                // 检查当前对象是否已经存在于结果数组中
+                if (!acc.find(item => item.employeeId === obj.employeeId)) { // 假设我们通过id来判断唯一性
+                    acc.push(obj);
+                }
+                return acc;
+            }, []);
+
+        },
+        initTreeData() {
+            this.selectExamineList.forEach(item => {
+                item.id = Date.now() + Math.floor(Math.random() * 10000);
+                item.label = item.title;
+                item.children = item.users;
+                item.users.forEach(user => {
+                    user.id = Date.now() + Math.floor(Math.random() * 10000);
+                    user.label = user.employeeName + ", " + (user.score ? user.score : 0);
+                })
+            })
+            this.treeData = {
+                id: 0,
+                label: "考核对比",
+                children: this.selectExamineList
+            }
+        },
+        handleClick(tab, event) {
+            if (this.activeName == '0') this.initTableData()
+            if (this.activeName == '1') this.initTreeData()
+        },
+        // 日期选择时间
+        changeDate(v) {
+            if (v && v.length > 0) {
+                this.params.startDate = v[0] || ''
+                this.params.endDate = v[1] || ''
+                this.getRecords();
+            }
+
+        },
+        //选择周期
+        changeCircle(v) {
+            console.log(v);
+            this.getRecords();
+        },
+        // 选择状态
+        changeStatus(v) {
+            this.getRecords();
+        },
+        // 重置搜索条件
+        reset() {
+            this.cycleType = '-1'
+            this.status = -1
+            this.date = []
+            this.params = {
+                startDate: '',
+                endDate: '',
+                status: -1, // 不传默认返回全部 0-未完成 1-已完成
+            }
+            this.getRecords();
+        },
+
+        // 清空选择的考核列表
+        clear() {
+            this.selectExamineIds = [];
+            this.chooseExamineList = [];
+        },
+        dialogBeforeClose() {
+            this.dialogVisible = false;
+        },
+        confirm() {
+            this.selectExamineList = this.examineList.filter(item => this.transferValue.indexOf(item.reviewPackageId) >= 0);
+            if (this.activeName == '0') this.initTableData()
+            if (this.activeName == '1') this.initTreeData()
+            this.dialogVisible = false;
+        }
+    },
+
+}
+
+</script>
+
+
+
+<style scoped="scoped" lang="scss">
+.contrast-container {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+
+    .el-icon-close {
+        transition: all 0.2s;
+
+        &:hover {
+            font-size: 16px;
+        }
+    }
+
+    .search-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+    }
+
+    .title-box {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        padding: 0 20px;
+
+        .title {
+            color: #999;
+            font-size: 14px;
+            font-weight: bold;
+        }
+    }
+
+    .package-list {
+        width: 100%;
+        height: 400px;
+        margin-top: 10px;
+        border: 1px solid #f7f7f7;
+
+        .template-list {
+            width: 50%;
+            height: 400px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #f7f7f7;
+            padding: 10px;
+            box-sizing: border-box;
+
+            .el-checkbox-group {
+                width: 100% !important;
+                height: 100% !important;
+
+                .el-checkbox {
+                    margin: 0;
+                    width: 200px;
+                    margin-bottom: 10px;
+                }
+
+            }
+        }
+
+        .choose-template {
+            width: 50%;
+            height: 400px;
+            overflow-y: auto;
+            padding: 10px;
+            box-sizing: border-box;
+
+            .line {
+                width: 90%;
+                height: 1px;
+                background-color: #f7f7f7;
+                margin: 10px auto;
+            }
+
+            &-item {
+                width: 90%;
+                height: 30px;
+                line-height: 30px;
+                padding-left: 10px;
+                border-bottom: 1px solid #f7f7f7;
+                margin: 0 auto 10px auto;
+                box-sizing: border-box;
+            }
+        }
+    }
+
+
+    .table-box {
+        width: 100%;
+        padding: 0 20px;
+        box-sizing: border-box;
+    }
+
+    /* 设置滚动条的宽度和背景色 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+        background-color: #f9f9f9;
+    }
+
+    /* 设置滚动条滑块的样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+        border-radius: 6px;
+        background-color: #c1c1c1;
+    }
+
+    /* 设置滚动条滑块hover样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+        background-color: #a8a8a8;
+    }
+
+    /* 设置滚动条轨道的样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+        box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
+        border-radius: 6px;
+        background: #ededed;
+    }
+
+
+}
+</style>

src/ExamineRecord.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="record-container">
+        <!-- 左边 考核列表组件 -->
+        <LeftExamineRecord @selectRow="handleSeleRow" />
+        <!-- 右边 考核明细组件 -->
+        <RightExamineRecord v-if="JSON.stringify(detailInfo) !== '{}'" :detailInfo="detailInfo" :cateList="cateList" />
+    </div>
+</template>
+
+
+<script>
+import { mapGetters } from 'vuex';
+import RightExamineRecord from "./ExamineRecord/RightExamineRecord" // 考核列表组件
+import LeftExamineRecord from "./ExamineRecord/LeftExamineRecord" // 考核列表组件
+export default {
+    components: {
+        RightExamineRecord,
+        LeftExamineRecord
+    },
+    data() {
+        return {
+            detailInfo: {},
+            cateList: [], // 考核分类
+        }
+    },
+    created() {
+        this.getCateList()
+    },
+    computed: {
+        ...mapGetters(['user_info']),
+    },
+    methods: {
+        handleSeleRow(reviewPackageId) {
+            // 获取考核详情
+            let url = `/performance/statistics/package/info/${this.user_info.site_id}/${reviewPackageId}`
+            this.$axiosUser("get", url, {}).then(res => {
+                let { data: { data: { cateIds, indicators, startTime, endTime, title, distribution: { items }, users }, code } } = res
+                this.detailInfo = { data: { data: { cateIds, indicators, startTime, endTime, title, distribution: { items }, users }, code }, reviewPackageId }
+            })
+        },
+        // 考核分类列表
+        getCateList() {
+            let url = `/performance/cate/list/${this.user_info.site_id}`;
+            // this.loading = true
+            this.$axiosUser('get', url).then(res => {
+                let { data: { code, data: { list, total } } } = res
+                if (code == 1) {
+                    this.cateList = list;
+                }
+
+            })
+        },
+    }
+};
+</script>
+
+
+<style scoped="scoped" lang="scss">
+.record-container {
+    width: 100%;
+    height: 100%;
+    background-color: #f0f4fa;
+    display: flex;
+    justify-content: space-between;
+
+    /* 设置滚动条的宽度和背景色 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+        background-color: #f9f9f9;
+    }
+
+    /* 设置滚动条滑块的样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
+        border-radius: 6px;
+        background-color: #c1c1c1;
+    }
+
+    /* 设置滚动条滑块hover样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
+        background-color: #a8a8a8;
+    }
+
+    /* 设置滚动条轨道的样式 */
+    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
+        box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
+        border-radius: 6px;
+        background: #ededed;
+    }
+}
+</style>