skyversation
/
meidu2021


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
							<%--
  Created by IntelliJ IDEA.
  User: Liumouren
  Date: 2022/7/7
  Time: 18:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>作业计划完成情况统计查看页面</title>
    <t:base type="jquery,easyui,tools,DatePicker"></t:base>
</head>
<body style="width:calc(100% - 20px);">
    <div class="workInfoBox">
        <div class="info"><span>作业人员:</span>${workInfo[0].username}</div>
        <c:if test="${!empty workInfo[0].usernames}"><div class="info"><span>随车人员:</span>${workInfo[0].usernames}</div></c:if>
        <c:if test="${queryType == 'car'}"><div class="info"><span>作业车辆:</span>${workInfo[0].plate}</div></c:if>
        <div class="info"><span>作业路线:</span>${workInfo[0].arrangeName}</div>
        <div class="info"><span>作业日期:</span>${workInfo[0].scheduleDate}</div>
        <div class="info"><span>作业时间:</span>${workInfo[0].workTime}</div>
        <table>
            <th>序号</th>
            <th>作业区域名称</th>
            <th>作业完成状态</th>
            <th>当日作业次数</th>
            <th>作业完成时间</th>
            <c:forEach items="${workInfo}" var="item" varStatus="itemStatus">
            <tr>
                <td>${itemStatus.index + 1}</td>
                <td>${item.place_name}</td>
                <td style="color: ${!empty item.workState ? (item.workState == '已完成' ? '#67C23A' : '#F56C6C') : '#F56C6C'};font-weight: bold;">${!empty item.workState ? item.workState : '未完成'}</td>
                <td>${item.workNumberToDay}</td>
                <td class="timesBox">
                    <c:if test="${empty item.workTimes}">未知</c:if>
                    <c:if test="${!empty item.workTimes}">
                        <c:forEach items="${item.workTimes}" var="workTimeItem" varStatus="timeStatus">
                                <div class="timeBox"><div class="timesIndex">${timeStatus.index + 1}</div><div class="timesTitle">${workTimeItem}</div></div>
                        </c:forEach>
                    </c:if>
                </td>
            </tr>
            </c:forEach>
        </table>
    </div>
</body>
<script type="text/javascript">
</script>
<style>
    .workInfoBox{
        width: 100%;
        height: 100%;
    }
    *{
        font-size: 16px;
        color: #303133;
    }
    table{
        margin-top: 1rem;
        width: calc(100% - 20px);
        border-collapse: collapse;
        text-align: center;
    }
    table *{
        border: 1px solid #303133;
    }
    th,span{
        font-size: 16px;
        font-weight: bold;
        color: #303133;
    }
    span{
        color: #409EFF;
        padding-right: 0.5rem;
    }
    th{
        background-color: #C0C4CC64;
        line-height: 25px;
        padding: 0.5rem;
    }
    tr:nth-child(even){
        background-color: #409EFF16;
    }
    tr:hover{
        cursor: pointer;
        background-color: #30313316;
    }
    .workInfoBox *:not(.info){
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
    }
    .workInfoBox tr td:nth-child(2){
        user-select: text;
        -webkit-user-select: text;
        -ms-user-select: text;
        -moz-user-select: text;
    }
    td{
        color: #303133;
        line-height: 20px;
        padding: 0.5rem 0.3rem;
    }
    .info{
        font-size: 16px;
        color: #606266;
        margin-top: 0.5rem;
    }
/*    时间组件*/
    .timesBox{
        width: 210px;
    }
    .timeBox{
        margin: 3px;
        display: flex;
        width: fit-content;
        padding: 3px 5px;
        background-color: #c8ffad;
        border-radius: 3px;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        border: none;
        box-shadow: 0 0 2px 1px #30313364;
        background-image: linear-gradient(0deg, #67C23A, transparent);
    }
    .timesIndex{
        color: #FFFFFF;
        font-weight: bold;
        border-radius: 2rem;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        border: none;
        padding: 0 5px;
    }
    .timeBox:nth-child(3n+1) .timesIndex{
        background-color: #409EFF64;
    }
    .timeBox:nth-child(3n+2) .timesIndex{
        background-color: #E6A23C64;
    }
    .timeBox:nth-child(3n) .timesIndex{
        background-color: #F56C6C64;
    }
    .timesTitle{
        margin-left: 5px;
        padding: 2px 5px;
        background-color: #FFFFFF;
        border-radius: 3px;
        border: none;
        box-shadow: 0 0 2px 1px #30313364 inset;
    }
</style>