График работы сотрудников

1 Июл
2012

Хотел бы поделиться с вами опытом создания распорядка рабочего дня сотрудников, запись клиентов, например загрузку постов на СТО или работу врачей в больнице. Что-то похожее я видел в 1C: Рарус-Автосервис. Разумеется, область применения не ограничивается только этими сферами. Пример реализован c использованием mysql, php, jquery.


Для начала создаем базу данных со следующими полями

  `id` int(5)  AUTO_INCREMENT,
  `id_исполнителя` int(5) ,
  `id_процесса` int(5) ,
  `дата начала` int(10) ,
  `дата окончания` int(10) ,
  `статус выполнения` enum('0','1','2','3') 


Далее создаем форму с необходимыми полями для заполнения соответствующих полей базы. В рабочей версии выбор исполнителя сопряжен в группами, за которыми в свою очередь закреплены определенные виды работ.

Далее, после того, как данные работы внесены в базу, необходимо их отобразить.

В нашем примере мы создадим только 1 фунцию для вывода, в аргументы которой будет передаваться переменная с размерами нашего графика, ведь порой требуется его уместить в крохотное окошко, а порой и в широкоформатный монитор.

function today ($yesterday,$date,$id_performer,$database_name,$convert,$showHours,$tomorrow,$zoom,$show_edit_button)


Поясню некоторые:
$yesterday – по клику должен показываться график на вчерашний день
$id_performer – id исполнителя, для которого выводится график
$tomorrow – по клику отображается график на завтрашний день
$show_edit_button – проверка, имеет ли право пользователь редактировать время работы исполнителя
$zoom – ширина всего графика в пикселях. Скажу сразу график не резиновый, то есть он не формируется исходя из передаваемого параметра $zoom, а задан четко для двух размеров: 900 и 420. “Гибкость” возможно реализовать по желанию.

Далее в зависимости от $zoom происходит определение css свойств графика: padding, margin, height, font-size и т.д.

    if ($zoom == 900){
                    $width = ($value - $key-5)/1.23; //Ширина блока работы формируется в зависимости от времени начала работы и времени окончания
                   
                    $paddingleft = ($key - $p)/1.23;// Количество пикселей для отступа слева. $key в данном случае – ключа массива в цикле 
foreach ($time AS $key => $value). $time – массив со временем начал работ и временем окончания.
                }


У графика есть 3 блока:
1) Фамилия исполнителя
2) Временной интервал
3) Непосредственно время загрузки поста
Фамилия извлекается в зависимости от $id_performer, поэтому трудность составляют 2 и 3 пункты. Трудность заключается в масштабировании временных интервалов, например, с 12 до 13 и под ним необходимо нарисовать график с необходимым padding-left.

image

Сначала выведем временные интервалы

echo "<table width='$width' style='border:1px dashed black; margin-left:".$marginlefthours."' cellpadding='0px' cellspacing='0px' rules='all' >
                <tr>";
                for ($p = 9;  $p < 20; $p++) {
                    echo "<td align='center' width='".$tdwidth."' style='font-size:$fontsize'>";
                    if ($zoom == 900){
                        echo "c $p $do ";
                        echo $p+1;
                    }
                    if ($zoom == 420){
                        echo $p.'-';
                        echo $p+1;
                    }
                    echo "</td>";
                }
        echo "</tr></table>";


Как видно, время рабочего дня у нас ограничено 9 и 20 часами. Ширина графика: 900px.

Данный интервал принимает вид:

image

Далее необходимо показать временные интервалы загрузки:

 echo "<div class='$div_color' id='performersTiming' uniqNumber = '$id_performer$timeBus' datestart='$date_start' uric='$uric' id_performer='$id_performer' thisid='$id_of_bp'  
style='
position:absolute; 
left:$paddingleft; 
border:1px solid black;  
width: $width; 
top:0px;
bottom:0px; 
overflow:hidden;
padding:2px;
height:$divheight;
border-radius:2px;' 
paddingleft='$paddingleft'>";

Очень большой див со множеством аттрибутов и переменных для jquery выборки. Здесь лишь подставляются значения $width и $paddingleft, которые мы вычислили ранее. В нем указывается адрес клиента и любые данные, которые потребуются. Но необязательно засунуть туда как можно больше информации, чуть далее вы увидите, что для этого предусмотрены другие инструменты.

if ($zoom == 900){             
                    echo "$adress_full<br />$performerFio "; //Непосредственно сами данные, в случае, если табличка у нас широкая.
                }
echo "</div>
<div id='performersTiming_div' name='viewInfo_$id_of_bp' 
style='margin-left: -999em;
position: absolute;
width:400px;
background-color:yellow;
border:1px solid black;
padding:3px;
border:3px solid black;
border-radius:5px;
margin-top:4em;z-index:1;
font-size:10px'>

$adress_full<br />
$performerFio<br />
$performerPhone<br />
$comment_massive

</div>"; 


Здесь рисуется div, который изначально скрыт, но появляется, когда мы наводим курсор на время работы с клиентом.

$('#performersTiming').live('mouseover',function() {

    	$(perfTimeInfo).css({'margin-left':paddingleft,'margin-top':'50px'});

    }).live('mouseout', function () {    

    	$(perfTimeInfo).css({'margin-left':'-999em'});

});

Здесь уже можем задавать более широкие поля с информацией.

Средствами jquery обеспечивается вывод еще более полной информации при клике на время работы исполнителя.
$('#performersTiming').live('click',function(){
	$(ShowInfo).load('../news/view_performdata.php', {
		'id_worker':id_worker,
		' id': id, 
	});
});

В конечном итоге получается график, который представлен на рисунке ниже.

image

В рабочей версии также реализована возможность показа графика по клику на завтрашний день, на определенный день недели 1 человека, на определенный день недели группы человек, график работы на любой месяц 1 человека. Возможно, они будут освещены в дальнейших обзорах.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх