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 // Полная загрузка сервисных книжек, создан 2026-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 не будет опубликован. Обязательные поля помечены *