HTML в новой версии 8.3.14 на примере 3-х JavaScript библиотек: AmCharts, HighCharts, DHTMLX




Принцип обмена данными из 1С с сайтом (на MySQL) и выдачи (публикации) этих данных по запросу.
PHP-Скрипт автоматической загрузки данных из файла данных в формате CSV в базу данных сайта работающего на WordPress.

В продолжение моей темы: 1С:Альфа-Авто Автосалон Автосервис: обмен с сайтом.
С помощью данного скрипта можно загружать в автоматическом режиме, по расписанию, данные сервисных книжек (ремонтов авто) из 1С:Альфа-Авто Автосалон Автосервис.
Также можно загружать данные в ручном режиме: для этого делается скрытая страница, где размещается специальная кнопка.
Комментарии размещенные внутри скрипта разъяснят логику и порядок действия.
Комментарии с "/////    echo" использовались для отладки.
Дополнительно создана таблица для журналирования результатов загрузки данных.
Скрипт включает в себя защиту от SQL инъекций (думаю безопасность соблюдена в полной мере).
В кратце:
1. Пишется скрипт, который запускает этот.
2. Создается регламентное задание в WordPress, по которому запускается скрипт из п.1. 
3. Этот скрипт осуществляет проверку на существование файла обмена в папке.
4. Если данные не новые, загрузка не производится.
5. Если данные новые, очищается таблица сервисных книжек.
6. Загружаются новые данные.

Собственно сам скрипт:

<?php // Полная загрузка сервисных книжек, создан 2024-01-05 12:44:55

global $wpdb2;
global $failure;
global $file_hist;

/////  echo '<H2><b>Старт загрузки</b></H2><br>';

$failure=FALSE;
//подключаемся к базе
$wpdb2 = include_once 'connection.php'; ; // подключаемся к MySQL
// если не удалось подключиться, и нужно оборвать PHP с сообщением об этой ошибке
if (!empty($wpdb2->error))
{
/////   echo '<H2><b>Ошибка подключения к БД, завершение.</b></H2><br>';
$failure=TRUE;
wp_die( $wpdb2->error );
}

$m_size_file=0;
$m_mtime_file=0;
$m_comment='';
/////проверка существования файлов выгрузки из 1С
////файл выгрузки сервисных книжек
$file_hist = ABSPATH.'/_1c_alfa_exchange/AA_hist.csv';
if (!file_exists($file_hist))
{
/////   echo '<H2><b>Файл обмена с сервисными книжками не существует.</b></H2><br>';
$m_comment='Файл обмена с сервисными книжками не существует';
$failure=TRUE;
}

/////инициируем таблицу лога
/////если не существует файла то возврат и ничего не делаем
if ($failure){
///включает защиту от SQL инъекций и данные можно передавать как есть, например: $_GET['foo']
/////   echo '<H2><b>Попытка вставить запись в лог таблицу</b></H2><br>';
$insert_fail_zapros=$wpdb2->insert('vin_logs', array('time_stamp'=>time(),'last_mtime_upload'=>$m_mtime_file,'last_size_upload'=>$m_size_file,'comment'=>$m_comment));
wp_die();
/////    echo '<H2><b>Возврат в начало.</b></H2><br>';
return $failure;
}
/////проверка лога загрузки, что бы не загружать тоже самое
$masiv_data_file=stat($file_hist);   ////передаем в массив свойство файла
$m_size_file=$masiv_data_file[7];    ////получаем размер файла
$m_mtime_file=$masiv_data_file[9];   ////получаем дату модификации файла
////создаем запрос на получение последней удачной загрузки
////выбираем по штампу времени создания (редактирования) файла загрузки AA_hist.csv, $m_mtime_file

/////   echo '<H2><b>Размер файла: '.$m_size_file.'</b></H2><br>';
/////   echo '<H2><b>Штамп времени файла: '.$m_mtime_file.'</b></H2><br>';
/////   echo '<H2><b>Формирование запроса на выборку из лога</b></H2><br>';
////препарируем запрос
$text_zaprosa=$wpdb2->prepare("SELECT * FROM `vin_logs` WHERE `last_mtime_upload` = %s", $m_mtime_file);
$results=$wpdb2->get_results($text_zaprosa);

if ($results)
{   foreach ( $results as $r)
{
////если штамп времени и размер файла совпадают, возврат
if (($r->last_mtime_upload==$m_mtime_file) && ($r->last_size_upload==$m_size_file))
{////echo '<H2><b>Возврат в начало, т.к. найдена запись в логе.</b></H2><br>';
$insert_fail_zapros=$wpdb2->insert('vin_logs', array('time_stamp'=>time(),'last_mtime_upload'=>$m_mtime_file,'last_size_upload'=>$m_size_file,'comment'=>'Загрузка отменена, новых данных нет, т.к. найдена запись в логе.'));
wp_die();
return $failure;
}
}
}
////если данные новые, пишем в лог запись о начале загрузки
/////echo '<H2><b>Попытка вставить запись о начале загрузки в лог таблицу</b></H2><br>';
$insert_fail_zapros=$wpdb2->insert('vin_logs', array('time_stamp'=>time(),'last_mtime_upload'=>0, 'last_size_upload'=>$m_size_file, 'comment'=>'Начало загрузки'));

////очищаем таблицу
$clear_tbl_zap=$wpdb2->prepare("TRUNCATE TABLE %s", 'vin_history');
$clear_tbl_zap_repl=str_replace("'","`",$clear_tbl_zap);
$results=$wpdb2->query($clear_tbl_zap_repl);
/////   echo '<H2><b>Очистка таблицы сервисных книжек</b></H2><br>';
if (empty($results))
{
/////   echo '<H2><b>Ошибка очистки таблицы книжек, завершение.</b></H2><br>';
//// если очистка не удалась, возврат
$failure=TRUE;
wp_die();
return $failure;
}

////загружаем данные
$table='vin_history';         // Имя таблицы для импорта
//$file_hist Имя CSV файла, откуда берется информация     // (путь от корня web-сервера)
$delim=';';          // Разделитель полей в CSV файле
$enclosed='"';      // Кавычки для содержимого полей
$escaped='\

37 Comments

  1. rpgshnik

    УРА УРА УРА! Даже не обратил внимание на такую роскошь в 8.3.14.

    Reply
  2. JIEX@

    Забавно

    Reply
  3. manlak

    шикарно

    Reply
  4. KEV8383

    шедеврально

    Reply
  5. CyberCerber

    замечательно

    Reply
  6. Sla

    Огромная работа! Респектище!!!

    Возможно ли подключить к-л библиотеку для динамической проверки орфографии (подчеркивать красным как в Word-e)?

    Reply
  7. loda

    А чем google charts не устроил.

    Reply
  8. Synoecium

    (7) а еще Chart.js и с десяток других библиотек. Целью статьи не является сравнение всех библиотек, это скорее демонстрация возможностей HTML поля в 1С на новой платформе, поэтому я взял то, с чем сам пробовал работать. Для интересующихся отличиями и возможностями рекомендую самим пройти по сайтам с демо примерами и подобрать нужный фреймворк, также обзорную информацию можно получить вот здесь: https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_libraries

    Reply
  9. loda

    (8) Понятно. Просто вдруг в google charts что то не понравилось и вы могли бы этим поделиться.

    Спасибо за проделанную работу.

    Reply
  10. Synoecium

    (6) попробуйте API Яндекс.Спеллер https://tech.yandex.ru/speller/, там есть REST интерфейс, который можно использовать на любой версии платформы 1С, проверяя то, что ввел пользователь в реквизит формы. По идее через JSON интерфейс тоже можно использовать этот API, но зачем? Разве что для какого нибудь продвинутого текстового редактора, который будет выдавать варианты подчеркнутых слов.

    Для онлайн сервисов обычно есть ограничения, например у Яндекса:

    на количество обращений к Сервису — в размере 10 тысяч обращений в сутки;

    на объем проверяемого текста — в размере 10 миллионов символов в сутки.

    Можно еще рассмотреть оффлайн спеллер, но для этого вам нужен будет словарь корректных слов, по которому надо искать слова из текста, введенного пользователем. Это можно сделать даже средствами 1с, если устроит производительность (навскидку, грузим словарь в соответствие и парсим текст наколеночным парсером в 1с, чтобы проверять отдельные слова в соответствии)

    Reply
  11. dmarenin

    (0) проксирование в контекст 1с js eventов не завезли еще(в вашем примере перемещение, создание ганта например)? а то есть там поле Документ.defaultView.V8EventProxyObject а что с ним делать пока не понятно. Кто то уже знает?

    Reply
  12. antonio_i

    Супер. Наконец-таки это свершилось! (почти)

    Reply
  13. dmarenin

    (11) кто не понял, сможет ли web kit в 3.14 так? если да то как?

    Reply
  14. amd1986

    кто нибудь знает как подключить веб камеру к «Поле HTML документа»? Не используя внешних компонент и ресурсов. Т.е. уже встроенными средствами 1С. На 8.3.14.

    Reply
  15. Synoecium

    (14) покопался в вопросе подключения камеры в HTML5, в общем в веб клиенте работает (первый раз нужно разрешить использовать камеру), а вот в тонком клиенте запустить не получилось. Скорее всего тонкий клиент не поддерживает использование GetUserMedia(). Если кто в курсе как подключить, пишите в комментариях.

    Прикрепляю обработку, которая демонстрирует захват с камеры в веб-клиенте.

    Reply
  16. dmarenin

    (15) поле html в веб-клиенте — это iframe. через него дотянутся до родительского окна вряд ли получится.

    Reply
  17. amd1986

    (16)Жалко. Очень хотелось доработать механизм распознавания лиц из 1С не используя внешние компоненты. Придется пока костылять по старому..

    Reply
  18. amd1986

    (15) Спасибо!

    Reply
  19. KAV2

    Интересно, работает ли обработка событий? То есть чтобы по клику открыть расшифровку в СКД?

    Reply
  20. Synoecium

    (19) имеете ввиду чтобы в 1с СКД отчете при расшифровке ячейки показывать html поле с javascript визуализацией? По идее делается достаточно просто. Или вы имеете ввиду другую обработку событий — события из javascript диаграммы, перехватываемые в 1с?

    Reply
  21. KAV2

    (20) Да, я имею в виду второе, то есть перехват клика по html, и открытие уже 1С-ного отчета в качестве расшифровки.

    Reply
  22. kuznecov_egor

    (21) Было бы интересно, если бы кто-нибудь пояснит, как это делается)

    Reply
  23. Synoecium

    (21) Смотрите, у поля html в 1с есть событие ПриНажатии(), в нем есть доступ к данным события через параметр «ДанныеСобытия», в нем уже надо смотреть какие данные вам нужны для конретной диаграммы.

    Например, в моей обработке есть диаграмма HighCharts->User Supplied Data, добавляем следующий обработчик нажатия на поле html:

    &НаКлиенте
    Процедура ХТМЛтекстПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    Сообщить(«x = «+ДанныеСобытия.Event.xAxis[«0»].value);
    Сообщить(«y = «+ДанныеСобытия.Event.yAxis[«0»].value);
    КонецПроцедуры
    

    теперь при создании точки на диаграмме в 1с будет выводиться сообщение с её координатами

    Reply
  24. KAV2

    (23) Спасибо! Здорово что это работает в 8.3.14!

    Reply
  25. molot

    Блин, ну всё отлично работает в 8.3.14, но… В яндекс-картах перетаскивание не работает вообще никак! Вот печаль-беда… Может, я что не так делаю…

    Reply
  26. Steelvan

    Как вариант, взаимодействие ПолеHTMLДокумента <-> 1С можно настроить через веб-гнезда с использованием библиотеки https://infostart.ru/public/937068/

    Не проверял, выкладка теоретическая

    Обработка (на которой находится ПолеHTMLДокумента) при открытии должна запускать сервер веб-гнезд с прослушиванием определенного местного порта, например 127.0.0.1:2347. Соответственно, если обработок несколько, то порт++.

    ПолеHTMLДокумента должно содержать js код для работы с веб-гнездами. ПолеHTMLДокумента при открытии должно создавать соединение с этим сервером, которое работает в оба конца для приема и передачи. И через веб-гнездо выполнять двусторонний обмен данными ПолеHTMLДокумента <-> 1С при разных событиях в ПолеHTMLДокумента или в 1С.

    Для тонкого клиента должно работать.

    Reply
  27. s_vidyakin

    (22) Ничего сложного, вставляете в HTML data-атрибуты и при клике считываете, передаете в 1С функцию

    Reply
  28. gudun_ku

    Вопрос — зачем оборачивать все это великолепие в формы 1С?

    Reply
  29. Steelvan

    (28) Намек на попытку компенсировать ущербность ? 😉

    Reply
  30. acanta

    (29) Она оказалась неудачной? Жаль. Надеюсь, что не последняя.

    Reply
  31. jif

    Есть возможность, например в User Supplied Data, изменять представление точки? т.е. другую фигуру, либо картинку? Спасибо!

    Reply
  32. Synoecium

    (31) да, причем возможности довольно широкие. Посмотрите пример по ссылке:

    https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/sa­mples/highcharts/plotoptions/series-marker-symbol/

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

    вкратце надо добавить в раздел series блок такого вида (для примера сделаем треугольные отметки радиусом 10):

              marker: {
    radius: 10,
    symbol: ‘triangle’
    },
    Reply
  33. jif

    Спасибо за труд!! Интересная статья!

    Reply
  34. axelerleo

    Коллеги, а кто ответит на простой вопрос — как теперь в чудесной и прекрасной 8.3.14 обращаться к элементам DOM модели из 1С?

    Document.getElementByID теперь нет, какие альтернативы? перебирать дерево DOM, оно же «ВнешнийОбъект»?

    Reply
  35. SlavaKron

    (34) getElementByID у ВнешнийОбъект работает точно так же как и у КомОбъекта.

    Reply
  36. axelerleo

    (35)Спасибо! Уже сам разобрался. Это мои кривые ручонки. Забыл про кейс-сенситив 🙁

    Reply
  37. curdate

    В 8.3.13 дергали поле html документа с параметрами в адресе, а в событии ДокументСформирован забирали результат из Элемент.Документ.url. Ну и дальше http запросами…

    А в 8.3.15 событие ДокументСформирован после авторизации не вызывается, а как найти ответ в «ПриНажатии» — не понятно:(

    Reply

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *