iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-26 15:02:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

Исправлен баг графиков

Browse Source
This commit is contained in:
Dmitry Borisenko
2022-09-18 18:11:50 +02:00
parent 6d49e7181e
commit 3c7606b14d
5 changed files with 187 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
package-lock.json generated
View File

@@ -249,13 +249,13 @@
"dev": true
},
"autoprefixer": {
"version": "10.4.8",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.8.tgz",
"integrity": "sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==",
"version": "10.4.11",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.11.tgz",
"integrity": "sha512-5lHp6DgRodxlBLSkzHOTcufWFflH1ewfy2hvFQyjrblBFlP/0Yh4O/Wrg4ow8WRlN3AAUFFLAQwX8hTptzqVHg==",
"dev": true,
"requires": {
"browserslist": "^4.21.3",
"caniuse-lite": "^1.0.30001373",
"caniuse-lite": "^1.0.30001399",
"fraction.js": "^4.2.0",
"normalize-range": "^0.1.2",
"picocolors": "^1.0.0",
@@ -294,15 +294,15 @@
}
},
"browserslist": {
"version": "4.21.3",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
"integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
"version": "4.21.4",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
"integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==",
"dev": true,
"requires": {
"caniuse-lite": "^1.0.30001370",
"electron-to-chromium": "^1.4.202",
"caniuse-lite": "^1.0.30001400",
"electron-to-chromium": "^1.4.251",
"node-releases": "^2.0.6",
"update-browserslist-db": "^1.0.5"
"update-browserslist-db": "^1.0.9"
}
},
"buffer-crc32": {
@@ -342,9 +342,9 @@
"dev": true
},
"caniuse-lite": {
"version": "1.0.30001382",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001382.tgz",
"integrity": "sha512-2rtJwDmSZ716Pxm1wCtbPvHtbDWAreTPxXbkc5RkKglow3Ig/4GNGazDI9/BVnXbG/wnv6r3B5FEbkfg9OcTGg==",
"version": "1.0.30001402",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001402.tgz",
"integrity": "sha512-Mx4MlhXO5NwuvXGgVb+hg65HZ+bhUYsz8QtDGDo2QmaJS2GBX47Xfi2koL86lc8K+l+htXeTEB/Aeqvezoo6Ew==",
"dev": true
},
"chalk": {
@@ -527,9 +527,9 @@
"dev": true
},
"electron-to-chromium": {
"version": "1.4.227",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.227.tgz",
"integrity": "sha512-I9VVajA3oswIJOUFg2PSBqrHLF5Y+ahIfjOV9+v6uYyBqFZutmPxA6fxocDUUmgwYevRWFu1VjLyVG3w45qa/g==",
"version": "1.4.254",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.254.tgz",
"integrity": "sha512-Sh/7YsHqQYkA6ZHuHMy24e6TE4eX6KZVsZb9E/DvU1nQRIrH4BflO/4k+83tfdYvDl+MObvlqHPRICzEdC9c6Q==",
"dev": true
},
"error-ex": {
@@ -1731,9 +1731,9 @@
"dev": true
},
"update-browserslist-db": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz",
"integrity": "sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==",
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz",
"integrity": "sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==",
"dev": true,
"requires": {
"escalade": "^3.1.1",

2
package.json
View File

@@ -10,7 +10,7 @@
"devDependencies": {
"@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"autoprefixer": "^10.4.8",
"autoprefixer": "^10.4.11",
"postcss": "^8.4.16",
"postcss-load-config": "^3.1.4",
"prettier": "^2.7.1",

192
src/App.svelte
View File

@@ -92,6 +92,7 @@
let layoutJson = [];
let layoutJsonArrayParced = false;
let layoutReceivingCompleted = false;
let settingsJson = {};
let settingsJsonParced = false;
@@ -166,8 +167,6 @@
router.subscribe(handleNavigation);
function handleNavigation() {
console.log("[i]", "handle navigation");
currentPageName = $router.path.toString();
//не нужно очищать переменные когда переходим на страницу разработчика
@@ -276,7 +275,6 @@
function wsEventAdd(ws) {
if (socket[ws]) {
let ip = getIP(ws);
if (debug) console.log("[i]", ip, ws, "web socket events added");
socket[ws].addEventListener("open", function (event) {
if (debug) console.log("[i]", ip, ws, "completed connecting");
markDeviceStatus(ws, true);
@@ -357,7 +355,6 @@
if (data.includes("/log|")) {
data = data.replace("/log|", "");
//let msg = data.toString();
if (debug) console.log("", data);
addCoreMsg(data);
}
@@ -377,7 +374,7 @@
scenarioJson = JSON.parse(scenarioJsonResult);
scenarioJson = scenarioJson;
scenarioJsonParced = true;
if (debug) console.log("✔", "scenarioJson parced", scenarioJson);
if (debug) console.log("✔", "scenarioJson parced");
onParced();
}
};
@@ -445,9 +442,13 @@
}
//сборщик layoutJson пакетов
if (data === "/st/layout.json") {
layoutReceivingCompleted = false;
}
if (data === "/end/layout.json") {
//createLayoutUnderLoading(ws);
console.log("[1]", ws, "blob package received");
//как только прилетел весь блоб мы начнем его читать ридером и заодно запросим json-ы всех параметров
combineLayoutsInOne(ws);
wsSendMsg(ws, "/statuses|"); ///params|
}
//сборщик paramsJson сообщений
if (data.includes('"params":"')) {
@@ -458,19 +459,25 @@
...JSON.parse(data),
};
paramsJson = paramsJson;
console.log("[i] paramsJson:", paramsJson);
createLayoutUnderLoading(ws);
console.log("[4]", ws, "collecting params");
updateAllStatuses(ws);
onParced();
}
}
//сборщик statusJson сообщений
if (data.includes('"status":')) {
if (data.includes('"status"')) {
if (IsJsonParse(data)) {
let statusJson = JSON.parse(data);
udateStatusOfWidget(statusJson);
if (debug) console.log("[i] status", ip, ws, statusJson);
if (Array.isArray(statusJson.status)) {
updateWidgetArr(statusJson);
if (debug) console.log("[i] status (arr)", ws, JSON.stringify(statusJson));
} else {
updateWidget(statusJson);
if (debug) console.log("[i] status (dgt)", ws, JSON.stringify(statusJson));
}
}
//если сообщение является массивом
}
}
//сообщения типа Blob-------------------------------------------------------------------------------------//
@@ -500,30 +507,71 @@
}
}
//функция создающая общий json всех виджетов под загрузкой (не имеющая события завершения)
async function createLayoutUnderLoading(ws) {
//***********************************************************dashboard***************************************************************/
//слияние layout-ов всех устройств в общий layout
async function combineLayoutsInOne(ws) {
var bb = layoutJsonArray[ws].getBlob();
let reader = new FileReader();
reader.readAsText(bb);
reader.onload = () => {
let devLayout = JSON.parse(reader.result);
udateStatusOfDevWidgets(devLayout, ws);
layoutJson = layoutJson.concat(devLayout);
console.log("[2]", ws, "blob package pushed to layout");
sortingLayout();
};
}
//данная функция обновляет статусы виджетов одного устройства при загрузке страницы dashboard
function udateStatusOfDevWidgets(devLayout, ws) {
function sortingLayout() {
//сортируем весь layout по алфавиту
layoutJson.sort(function (a, b) {
if (a.descr < b.descr) {
return -1;
}
if (a.descr > b.descr) {
return 1;
}
return 0;
});
//формируем json всех карточек
pages = [];
const newPage = Array.from(new Set(Array.from(layoutJson, ({ page }) => page)));
newPage.forEach(function (item, i, arr) {
pages = [
...pages,
JSON.parse(
JSON.stringify({
page: item,
})
),
];
});
//сортируем карточки по алфавиту
pages.sort(function (a, b) {
if (a.page < b.page) {
return -1;
}
if (a.page > b.page) {
return 1;
}
return 0;
});
layoutReceivingCompleted = true;
layoutJson = layoutJson;
console.log("[3]", "layout sort");
}
function updateAllStatuses(ws) {
for (const [key, value] of Object.entries(paramsJson)) {
for (let i = 0; i < devLayout.length; i++) {
let topic = devLayout[i].topic;
for (let i = 0; i < layoutJson.length; i++) {
let topic = layoutJson[i].topic;
if (topic) {
devLayout[i].ws = ws;
layoutJson[i].ws = ws;
topic = topic.substring(topic.lastIndexOf("/") + 1, topic.length);
if (key === topic) {
console.log("[i]", "updated " + topic, value);
devLayout[i].status = value;
console.log("[i]", "updated =>" + topic, value);
layoutJson[i].status = value;
break;
}
}
@@ -531,13 +579,12 @@
}
}
//данная функция обновляет статусы всех виджетов хранящихся в layoutJson
function udateStatusOfWidget(newStatusJson) {
//обработка интервально прилетающих статусов
function updateWidget(newStatusJson) {
for (let i = 0; i < layoutJson.length; i++) {
let topic = layoutJson[i].topic;
if (topic === newStatusJson.topic) {
layoutJson[i] = jsonConcat(layoutJson[i], newStatusJson);
//layoutJson[i].status = newStatusJson.status;
//получен ответ - выключаем красный цвет
layoutJson[i].sent = false;
break;
@@ -545,6 +592,37 @@
}
}
//если статус виджета это массив и его нужно накопить
function updateWidgetArr(newStatusJson) {
console.log("[i]", "collecting arrays");
let error = true;
if (layoutJson.length > 0) {
for (let i = 0; i < layoutJson.length; i++) {
let topic = layoutJson[i].topic;
if (topic === newStatusJson.topic) {
error = false;
layoutJson[i] = jsonConcatEx(layoutJson[i], newStatusJson);
let prevArr = layoutJson[i].status; //который был в layout
let newArr = newStatusJson.status; //тот что получили
if (prevArr) {
//если что то было в layout то делаем слияние
prevArr = [...prevArr, ...newArr];
layoutJson[i].status = prevArr;
} else {
//если ничего не было то просто запишем новый
layoutJson[i].status = newArr;
}
//получен ответ - выключаем красный цвет
layoutJson[i].sent = false;
}
}
} else {
console.log("[E]", "layoutJson missing");
}
if (error) console.log("[E]", "topic not found ", newStatusJson.topic);
}
function jsonConcat(o1, o2) {
for (var key in o2) {
o1[key] = o2[key];
@@ -552,6 +630,16 @@
return o1;
}
//объединяем исклчая статус так как статус в данном случае накопительная переменная
function jsonConcatEx(o1, o2) {
for (var key in o2) {
if (key !== "status") {
o1[key] = o2[key];
}
}
return o1;
}
async function onParced() {
if (currentPageName === "/|") {
clearParcedFlags();
@@ -579,7 +667,7 @@
if (debug) console.log("✔✔", "system data parced");
systemReady = true;
}
if (currentPageName === "/dev|" && errorsJsonParced && settingsJsonParced && configJsonParced && itemsJsonParced) {
if (currentPageName === "/dev|" && errorsJsonParced && settingsJsonParced && configJsonParced && itemsJsonParced && paramsJsonParced) {
clearParcedFlags();
getVersionsList();
if (debug) console.log("✔✔", "dev data parced");
@@ -598,7 +686,7 @@
function saveSett() {
var size = Object.keys(settingsJson).length;
console.log("[i]", "settingsJson length: " + size);
//console.log("[i]", "settingsJson length: " + size);
if (size > 5) {
jsonArrWrite(deviceList, "ip", getIP(selectedWs), "name", settingsJson.name);
deviceList = deviceList;
@@ -616,7 +704,7 @@
function saveMqtt() {
var size = Object.keys(settingsJson).length;
console.log("[i]", "settingsJson length: " + size);
//console.log("[i]", "settingsJson length: " + size);
if (size > 5) {
wsSendMsg(selectedWs, "/sgnittes|" + JSON.stringify(settingsJson));
} else {
@@ -667,7 +755,7 @@
input.page = config.page;
input.topic = settingsJson.root + "/" + config.id + "-date";
input.descr = config.descr;
console.log("[i]", "topic ", widget.topic);
//console.log("[i]", "topic ", widget.topic);
layout.push(input);
}
error = false;
@@ -676,9 +764,9 @@
error = true;
}
}
if (error) console.log("[e]", "error, widget not found: " + setWidget);
if (error) console.log("[E]", "error, widget not found: " + setWidget);
}
if (debug) console.log("[i] layout:", JSON.stringify(layout));
//if (debug) console.log("[i] layout:", JSON.stringify(layout));
return layout;
}
@@ -710,7 +798,7 @@
clearParcedFlags();
if (debug) console.log("[i]", "all app data cleared");
//if (debug) console.log("[i]", "all app data cleared");
}
function clearParcedFlags() {
@@ -718,6 +806,7 @@
widgetsJsonParced = false;
itemsJsonParced = false;
layoutJsonArrayParced = false;
layoutReceivingCompleted = false;
settingsJsonParced = false;
errorsJsonParced = false;
ssidJsonParced = false;
@@ -780,43 +869,6 @@
});
}
//***********************************************************dashboard***************************************************************/
function sortingLayout() {
//сортируем весь layout по алфавиту
layoutJson.sort(function (a, b) {
if (a.descr < b.descr) {
return -1;
}
if (a.descr > b.descr) {
return 1;
}
return 0;
});
//формируем json всех карточек
pages = [];
const newPage = Array.from(new Set(Array.from(layoutJson, ({ page }) => page)));
newPage.forEach(function (item, i, arr) {
pages = [
...pages,
JSON.parse(
JSON.stringify({
page: item,
})
),
];
});
//сортируем карточки по алфавиту
pages.sort(function (a, b) {
if (a.page < b.page) {
return -1;
}
if (a.page > b.page) {
return 1;
}
return 0;
});
}
//***********************************************************logging******************************************************************/
const addCoreMsg = (msg) => {
if (coreMessages.length >= LOG_MAX_MESSAGES) {
@@ -1032,7 +1084,7 @@
function onCheck() {
let width = screen.width;
console.log("width", width);
//console.log("width", width);
if (width < 900) {
preventMove = true;
} else {
@@ -1196,7 +1248,7 @@
</Route>
{#if devMode}
<Route path="/dev">
<DevPage show={devReady} layoutJson={layoutJson} errorsJson={errorsJson} settingsJson={settingsJson} configJson={configJson} itemsJson={itemsJson} />
<DevPage show={devReady} layoutJson={layoutJson} errorsJson={errorsJson} settingsJson={settingsJson} configJson={configJson} itemsJson={itemsJson} paramsJson={paramsJson} />
</Route>
<Route path="/files">
<FilesPage show={systemReady} />

4
src/pages/Dev.svelte
View File

@@ -19,6 +19,7 @@
export let settingsJson;
export let configJson;
export let itemsJson;
export let paramsJson;
</script>
<div class="grd-3col1">
@@ -37,4 +38,7 @@
<Card title="itemsJson">
<textarea on:input={itemsJson} rows="23" class="w-full" id="4">{syntaxHighlight(JSON.stringify(itemsJson))}</textarea>
</Card>
<Card title="paramsJson">
<textarea on:input={paramsJson} rows="23" class="w-full" id="4">{syntaxHighlight(JSON.stringify(paramsJson))}</textarea>
</Card>
</div>

76
src/widgets/Chart.svelte
View File

@@ -8,49 +8,49 @@
export let widget;
//необходимые по умолчанию значения из за тупости библиотеки
let labels = [0, 0];
let values = [0, 0];
let datachart = {
labels: labels,
labels: [0, 0],
datasets: [
{
name: widget.descr,
values: values,
values: [0, 0],
},
],
};
let prevStatus = {};
let firstTime = true;
let labels = [];
let values = [];
let axisOptions = { xAxisMode: "tick", xIsSeries: true };
let lineOptions;
let collectingDataArray = [];
let prevSatus = [];
if (widget.pointRadius == "0") {
lineOptions = { regionFill: 1, hideDots: 1, spline: 1 };
} else {
lineOptions = { regionFill: 1, dotSize: 3, spline: 1 };
}
$: widget.status, collectDataToArr();
$: widget, collectDataToArr();
function collectDataToArr() {
if (widget.status && Array.isArray(widget.status)) {
//отсекаем лишние события изменения переменной widget
if (prevSatus !== widget.status) {
console.log("[i]", "collecting chart data to array, topic:", widget.topic);
let incomingDataArr = widget.status;
if (prevStatus !== widget.status && !firstTime) {
if (Array.isArray(widget.status)) {
console.log("[i]", "=======================================================");
prevStatus = widget.status;
console.log("[i]", "array:", incomingDataArr);
collectingDataArray = [...collectingDataArray, ...incomingDataArr];
for (let i = 0; i < collectingDataArray.length; i++) {
labels[i] = getHHMM(collectingDataArray[i].x);
values[i] = [collectingDataArray[i].y1];
for (let i = 0; i < widget.status.length; i++) {
if (i === 0) {
labels[i] = getDDMM(widget.status[i].x);
} else {
labels[i] = getHHMM(widget.status[i].x);
}
values[i] = [widget.status[i].y1];
}
//console.log("[i]", JSON.stringify(widget.status));
if (widget.maxCount == 0 || widget.maxCount == "0") {
clearCart();
@@ -67,12 +67,9 @@
},
],
};
prevSatus = widget.status;
datachart = datachart;
}
} else {
console.log("[i]", "skipping event, topic:", widget.topic);
}
firstTime = false;
}
function getHHMM(timestamp) {
@@ -80,16 +77,26 @@
return ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2);
}
function getDDMM(timestamp) {
var date = new Date(timestamp * 1000);
let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();
return day + "." + month + "." + year;
}
function clearCart() {
collectingDataArray = [];
labels = [0, 0];
values = [0, 0];
widget.status = [];
labels = [];
values = [];
datachart = {
labels: [0],
labels: [0, 0],
datasets: [
{
name: widget.descr,
values: [0],
values: [0, 0],
},
],
};
@@ -100,6 +107,5 @@
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="inline-block italic align-top text-center text-gray-500 txt-sz">{!widget.descr ? "" : widget.descr}</label>
</div>
<div hight="200">
<Chart data={datachart} type="line" lineOptions={lineOptions} axisOptions={axisOptions} />
</div>
<Chart data={datachart} type="line" lineOptions={lineOptions} axisOptions={axisOptions} height="200" padding="0px" />