meidu2021/daju/WebRoot/webpage/cn/com/lzt/personnelbasearchivesmanage/staffContractStatisticsList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<style>
    select {
        width: 120px;
    }
</style>
<link rel="stylesheet" type="text/css" href="css/commoncss.css"/>
<div class="easyui-layout" fit="true">
    <div region="center" style="padding:0px;border:0px">
        <t:datagrid name="staffContractStatisticsList" checkbox="false"
                    pagination="false" fitColumns="true" title="员工劳动关系统计" onLoadSuccess="onLoadSuccess2"
                    actionUrl="personnelBaseArchivesManageController.do?staffContractStatisticsListDatagrid"
                    idField="id" fit="true"
                    queryMode="group">
            <t:dgCol title="id" field="id" hidden="true" queryMode="single" width="120"></t:dgCol>
            <t:dgCol title="数据总计" field="sumData" hidden="true" queryMode="single" width="120"></t:dgCol>
            <t:dgCol title="部门集合" field="departNameList" hidden="true" queryMode="single" width="120"></t:dgCol>
            <t:dgCol title="员工性质集合" field="natureNameList" hidden="true" queryMode="single" width="120"></t:dgCol>
            <t:dgCol title="员工性别集合" field="genderList" hidden="true" queryMode="single" width="120"></t:dgCol>
        </t:datagrid>
        <%--显示图片区域--%>
        <div class="showDataBox">

        </div>
    </div>
</div>

<script type="text/javascript">
    //table请求返回对象暂存对象
    var initData = []

    function onLoadSuccess2(obj) {
        // 初始化完成后要清空showDataBox
        $('.showDataBox').empty();
        var sumData = {};
        var departNameList = [];
        var natureNameList = [];
        var genderList = [];
        if (obj.rows && obj.rows.length > 0) {
            initData = obj.rows[0];
            if (initData) {
                sumData = initData["sumData"];
                departNameList = initData["departNameList"];
                natureNameList = initData["natureNameList"];
                genderList = initData["genderList"];
                // console.log('员工合同到期管理页面初始化请求数据All：',departNameList,natureNameList,genderList,sumData);
                var showHtml = `<div class="showDataMain"><div><div>所属公司部门</div>`
                var thHtmlItem = ``;
                //循环所有的员工性质集合
                natureNameList.forEach(item => {
                    thHtmlItem += `<div class="flex_direction_column"><div>` + item + `</div><div class="flex_direction">`
                    //循环性别集合
                    genderList.forEach(item2 => {
                        thHtmlItem += `<div>` + item2 + `</div>`;
                    })
                    thHtmlItem += `</div></div>`
                })
                thHtmlItem += `<div>合计</div></div>`;
                showHtml += thHtmlItem;
                var trHtmlItem = ``;
                // 数据清洗
                var sumHtmlList = {};
                departNameList.forEach(item => {
                    trHtmlItem += `<div><div>` + item + `</div>`;
                    var totalNumber = 0;
                    natureNameList.forEach(item2 => {
                        trHtmlItem += `<div class="flex_direction">`;
                        genderList.forEach(item3 => {
                            if ((item + item2 + item3) in sumData) {
                                totalNumber += sumData[item + item2 + item3];
                                trHtmlItem += `<div>` + sumData[item + item2 + item3] + `</div>`;
                            } else {
                                trHtmlItem += `<div style="color:#cccccc;">0</div>`;
                            }
                            if((item2+item3) in sumHtmlList){
                                // 存在
                                sumHtmlList[item2+item3] += (item + item2 + item3) in sumData ? sumData[item + item2 + item3] : 0;
                            }else{
                                // 不存在
                                sumHtmlList[item2+item3] = (item + item2 + item3) in sumData ? sumData[item + item2 + item3] : 0;
                            }
                        })
                        trHtmlItem += `</div>`;
                    })
                    trHtmlItem += `<div>` + totalNumber + `</div></div>`;
                })
                showHtml += trHtmlItem;
                var totalHtml = ``;
                totalHtml += `<div><div>合计</div>`;
                var sumNumber = 0;
                natureNameList.forEach(item2=>{
                    totalHtml += `<div class="flex_direction">`;
                    genderList.forEach(item3=>{
                        if((item2+item3) in sumHtmlList){
                            sumNumber += sumHtmlList[item2 + item3];
                            totalHtml += `<div>` + sumHtmlList[item2 + item3] + `</div>`;
                        }else{
                            totalHtml += `<div style="color:#cccccc;">0</div>`;
                        }
                    })
                    totalHtml += `</div>`;
                })
                totalHtml += `<div>` + sumNumber + `</div></div>`;
                showHtml += totalHtml;
                showHtml += `</div>`;
                $('.showDataBox').append(showHtml);
            }
        } else {
            var noData = `<div class="no_data"><div class="no_data_title">暂无数据</div><div class="no_data_info"><span class="refresh_btu" onclick="refreshPage()"><i class="fa fa-refresh"/>刷新一下</span>或者过一段时间再试试吧！</div></div>`;
            $('.showDataBox').append(noData);
        }
    };

    //发送请求
    function lockuploadify(url) {
        $.ajax({
            async: false,
            cache: false,
            type: 'POST',
            url: url,
            error: function () {
            },
            success: function (data) {
                var d = data;
                if (d.success) {
                    var msg = d.msg;
                    tip(msg);
                    $('#staffContractStatisticsList').datagrid('reload');
                }
            }
        });
    }

    //刷新页面
    function refreshPage() {
        $('#staffContractStatisticsList').datagrid('reload');
    };


</script>
<style>
    <%--    最外层的box--%>
    .showDataBox {
        height: calc(100vh - 40px);
        margin: auto;
        display: flex;
        align-content: flex-start;
        flex-wrap: wrap;
        overflow-y: scroll !important;
    }

    .showDataMain {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: self-start;
        align-self: self-start;
        justify-content: space-evenly;
    }

    .showDataMain > div {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .showDataMain > div * {
        width: 100%;
        display: flex;
        justify-content: space-around;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .flex_direction_column {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: center;
    }

    .flex_direction_column > div:nth-child(1) {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #CCC;
        font-size: 18px;
        font-weight: 600;
        color: #606266;
    }

    .flex_direction {
        width: 100%;
        display: flex;
        align-items: center;
        align-self: center;
        padding: 5px;
        justify-content: space-around;
    }

    .showDataMain > div > div {
        padding: 5px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border: 1px solid #CCC;
    }

    /*表格中间的第一列和最后一列样式*/
    .showDataMain > div > div:nth-last-child(1), .showDataMain > div > div:nth-child(1) {
        font-size: 18px;
        font-weight: 600;
        color: #909399;
    }
    /*头部的第一列样式和最后一列样式*/
    .showDataMain > div:nth-child(1) > div:nth-last-child(1), .showDataMain > div:nth-child(1) > div:nth-child(1) {
        font-size: 20px;
        font-weight: bold;
        color: #303133;
    }
    /*结尾的总计第一列样式和最后一列样式*/
    .showDataMain > div:nth-last-child(1) > div {
        font-size: 18px;
        font-weight: bold;
        color: #303133;
    }
    .showDataMain > div:not(:nth-child(1)):hover{
        background-color: #409EFF16;
    }

    /*头部背景*/
    .showDataMain > div:nth-child(1) {
        background-color: #DCDFE6;
    }

    /*男*/
    .flex_direction > div:nth-child(1) {
        font-size: 16px;
        color: #409EFF;
    }

    /*女*/
    .flex_direction > div:nth-child(2) {
        font-size: 16px;
        color: #F56C6C;
    }

    /*单个item的box*/
    .imageItemBox {
        width: calc(20% - 30px);
        min-width: 220px;
        height: 290px;
        background-color: #FFF;
        box-shadow: 2px 2px 9px 4px #ccc;
        border-radius: 5px;
        margin: 15px;
        position: relative;
    }

    /*单个item中img的样式*/
    .imageItemImg {
        margin: 10px;
        width: calc(100% - 20px);
        height: 200px;
        border-radius: 5px;
        box-shadow: inherit;
    }

    /*蒙版图层显示*/
    .imageItemBox:hover .opt_button_box {
        height: 30px;
    }

    /*蒙版图层*/
    .opt_button_box {
        position: absolute;
        top: 10px;
        left: 10px;
        width: calc(100% - 20px);
        height: 0px;
        z-index: 10;
        border-radius: 5px;
        display: flex;
        justify-content: space-around;
        overflow: hidden;
        transition: all 0.3s;
    }

    .opt_button_box::before {
        content: "";
        position: absolute;
        width: 100%;
        background-color: rgba(0, 0, 0, 1);
        height: 30px;
        filter: blur(20px);
        z-index: -1;
    }

    /*蒙版按钮*/
    .opt_button_text {
        padding-top: 5px;
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        overflow: hidden;
    }

    /*蒙版按钮鼠标移入样式*/
    .opt_text:hover {
        cursor: pointer;
        text-decoration: underline;
        text-shadow: 1px 1px 15px;
    }

    /*蒙版按钮鼠标点击样式*/
    .opt_text:active {
        text-shadow: 1px 1px 5px #000000;
    }

    /*蒙版按钮icon*/
    .opt_icon {
        padding-right: 5px;
    }

    /*蒙版按钮文字*/
    .opt_text {
        font-weight: bold;
        font-size: 16px;
        text-shadow: 1px 1px 1px #000000;
    }

    /*蒙版预览按钮*/
    .opt_search {
        color: #409EFF;
    }

    /*蒙版添加按钮*/
    .opt_add {
        color: #67C23A;
    }

    /*蒙版删除按钮*/
    .opt_del {
        color: #F56C6C;
    }

    /*蒙版下载按钮*/
    .opt_download {
        color: #67C23A;
    }

    /*车辆信息文字描述*/
    .car_info_no {
        padding: 0 10px;
        color: #409EFF;
        font-weight: bold;
    }

    /*拍摄时间文字描述*/
    .car_info_time {
        padding: 0 10px;
        color: #909399;
    }

    /*拍摄地点文字描述*/
    .car_info_position {
        padding: 0 10px;
        color: #303133;
        font-size: 15px;
    }

    /*文字描述*/
    .text_info {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -moz-user-select: none; /* Firefox私有属性 */
        -webkit-user-select: none; /* WebKit内核私有属性 */
        -ms-user-select: none; /* IE私有属性(IE10及以后) */
        -khtml-user-select: none; /* KHTML内核私有属性 */
        -o-user-select: none; /* Opera私有属性 */
        user-select: none; /* CSS3属性 */
    }

    /*车辆类型文字描述*/
    .car_info_type {
        color: #303133;
        padding: 0 5px;
    }

    /*摄像头位置文字描述*/
    .car_info_camera {
        color: #67C23A;
    }

    /*预览窗口*/
    .imagePreviewBox {
        position: fixed;
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*预览弹窗关闭按钮样式*/
    .imagePreviewRemoveBtu {
        position: fixed;
        right: calc(29vw + 10px);
        top: calc(50vh - 14vw + 10px);
        color: #FFFFFF;
        font-size: 20px;
        padding: 10px;
    }

    /*预览弹窗关闭按钮鼠标移入样式*/
    .imagePreviewRemoveBtu:hover {
        color: #F56C6C;
    }

    /*预览弹窗图片样式*/
    .imagePreviewItem {
        width: 42vw;
        min-width: 600px;
        height: 28vw;
        min-height: 400px;
        margin: auto;
    }

    /*卡片选择按钮提示BOX*/
    .car_info_checkbox {
        position: absolute;
        bottom: 10px;
        right: 10px;
        transition: all 0.3s;
    }

    /*卡片选择按钮icon*/
    .checkbox_icon {
        color: #DCDFE6;
        padding: 10px;
    }

    /*卡片选择按钮icon鼠标移入样式*/
    .checkbox_icon:hover {
        color: #E4E7ED;
        cursor: pointer;
    }

    /*卡片选择按钮icon选中样式*/
    .selected_car {
        color: #409EFF;
    }

    /*卡片选择按钮icon选中状态鼠标移入样式*/
    .selected_car:hover {
        color: #409EFF;
        cursor: pointer;
    }

    /*表格隐藏*/
    .datagrid-view {
        display: none;
    }

    /*暂无数据字体样式*/
    .no_data {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        -moz-user-select: none; /* Firefox私有属性 */
        -webkit-user-select: none; /* WebKit内核私有属性 */
        -ms-user-select: none; /* IE私有属性(IE10及以后) */
        -khtml-user-select: none; /* KHTML内核私有属性 */
        -o-user-select: none; /* Opera私有属性 */
        user-select: none; /* CSS3属性 */
    }

    .no_data_title {
        color: #C0C4CC;
        font-size: 60px;
        font-weight: bold;
        text-shadow: 2px 2px 0px #909399, 3px 3px 3px #e6a23c;
        letter-spacing: 50px;
        line-height: 100px;
        font-family: 华文彩云;
    }

    .no_data_info {
        color: #e6a23c;
        font-size: 14px;
        letter-spacing: 3px;
        font-family: "Hiragino Sans GB", STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", "Droid Sans", "wenquanyi micro hei", Helvetica, Tahoma, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
    }

    /*刷新按钮样式*/
    .refresh_btu {
        cursor: pointer;
        color: #409EFF;
    }

    .refresh_btu:hover {
        text-decoration: underline;
        text-shadow: 0px 1px 3px #CCCCCC;
    }

    /*上传时间范围查询~样式*/
    .datagrid-toolbar form > span:nth-last-child(1) > span:nth-last-child(2) {
        width: 8px !important;
    }
</style>