update websocket and store
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
bovenliggende
8ff6fd02df
commit
52a9111a19
@ -10,6 +10,7 @@ import SumYield from "./components/mainscreen/SumYield.vue";
|
||||
import TodayRate from "./components/mainscreen/TodayRate.vue";
|
||||
import SumRate from "./components/mainscreen/SumRate.vue";
|
||||
import FullEqList from "./FullEqList.vue";
|
||||
import { connect0 } from "./utils/useWebsocket";
|
||||
|
||||
const mainContainer = ref(null);
|
||||
const props = defineProps({
|
||||
@ -19,6 +20,9 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
const store = useWsStore();
|
||||
|
||||
connect0(store);
|
||||
|
||||
const alarmList = ref(
|
||||
(store.data1.alarmArrList || []).map((item, index) => ({
|
||||
id: item.id,
|
||||
|
||||
@ -50,14 +50,14 @@ const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
data: datalist.map((item) => item * 100),
|
||||
data: datalist,
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
// formatter: (params) => {
|
||||
// console.log("params", datalist[params.dataIndex]);
|
||||
// },
|
||||
formatter: '{c}%',
|
||||
formatter: "{c}%",
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
@ -112,20 +112,20 @@ function __apply(yieldArray) {
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
// __apply(state.data2.lineSumProductYield);
|
||||
__apply([
|
||||
{ name: "钢1线", data: 0.32 },
|
||||
{ name: "钢2线", data: 0.91 },
|
||||
{ name: "钢3线", data: 0.54 },
|
||||
]);
|
||||
__apply(state.mainDataChart.lineSumProductYield);
|
||||
// __apply([
|
||||
// { name: "钢1线", data: 0.32 },
|
||||
// { name: "钢2线", data: 0.91 },
|
||||
// { name: "钢3线", data: 0.54 },
|
||||
// ]);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
__apply([
|
||||
{ name: "钢1线", data: 0.32 },
|
||||
{ name: "钢2线", data: 0.91 },
|
||||
{ name: "钢3线", data: 0.54 },
|
||||
{ name: "钢1线", data: "0%" },
|
||||
{ name: "钢2线", data: "0%" },
|
||||
{ name: "钢3线", data: "0%" },
|
||||
]);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -114,23 +114,22 @@ function __apply(yieldArray) {
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
// __apply(state.data2.classTodayProductYield);
|
||||
// __apply(state.data2.classTodayProductYield);
|
||||
__apply([
|
||||
{ name: "钢1线", data: 11 },
|
||||
{ name: "钢2线", data: 22 },
|
||||
{ name: "钢3线", data: 33 },
|
||||
{ name: "合计", data: 66 },
|
||||
]);
|
||||
__apply(state.mainDataChart.lineSumProductData);
|
||||
// __apply([
|
||||
// { name: "钢1线", data: 11 },
|
||||
// { name: "钢2线", data: 22 },
|
||||
// { name: "钢3线", data: 33 },
|
||||
// { name: "合计", data: 66 },
|
||||
// ]);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
__apply([
|
||||
{ name: "钢1线", data: 11 },
|
||||
{ name: "钢2线", data: 22 },
|
||||
{ name: "钢3线", data: 33 },
|
||||
{ name: "合计", data: 66 },
|
||||
{ name: "钢1线", data: 0 },
|
||||
{ name: "钢2线", data: 0 },
|
||||
{ name: "钢3线", data: 0 },
|
||||
{ name: "合计", data: 0 },
|
||||
]);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -50,14 +50,15 @@ const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
data: datalist.map((item) => item * 100),
|
||||
data: datalist,
|
||||
// data: datalist.map((item) => item * 100),
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
// formatter: (params) => {
|
||||
// console.log("params", datalist[params.dataIndex]);
|
||||
// },
|
||||
formatter: '{c}%',
|
||||
formatter: "{c}%",
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
@ -80,11 +81,11 @@ function loadData(yieldArray) {
|
||||
if (yieldArray == undefined || yieldArray?.length == 0) return null;
|
||||
for (let i = 0; i < yieldArray.length; ++i) {
|
||||
if (yieldArray[i].name == "钢1线") {
|
||||
result[0] = parseFloat(yieldArray[i].data);
|
||||
result[0] = parseFloat(yieldArray[i].data) || 0.0;
|
||||
} else if (yieldArray[i].name == "钢2线") {
|
||||
result[1] = parseFloat(yieldArray[i].data);
|
||||
result[1] = parseFloat(yieldArray[i].data) || 0.0;
|
||||
} else if (yieldArray[i].name == "钢3线") {
|
||||
result[2] = parseFloat(yieldArray[i].data);
|
||||
result[2] = parseFloat(yieldArray[i].data) || 0.0;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
@ -112,20 +113,20 @@ function __apply(yieldArray) {
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
// __apply(state.data2.classTodayProductYield);
|
||||
__apply([
|
||||
{ name: "钢1线", data: 0.32 },
|
||||
{ name: "钢2线", data: 0.91 },
|
||||
{ name: "钢3线", data: 0.54 },
|
||||
]);
|
||||
__apply(state.mainDataChart.lineTodayProductYield);
|
||||
// __apply([
|
||||
// { name: "钢1线", data: 0.32 },
|
||||
// { name: "钢2线", data: 0.91 },
|
||||
// { name: "钢3线", data: 0.54 },
|
||||
// ]);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
__apply([
|
||||
{ name: "钢1线", data: 0.32 },
|
||||
{ name: "钢2线", data: 0.91 },
|
||||
{ name: "钢3线", data: 0.54 },
|
||||
{ name: "钢1线", data: "0%" },
|
||||
{ name: "钢2线", data: "0%" },
|
||||
{ name: "钢3线", data: "0%" },
|
||||
]);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -114,22 +114,22 @@ function __apply(yieldArray) {
|
||||
|
||||
// 订阅
|
||||
store.$subscribe((mutation, state) => {
|
||||
// __apply(state.data2.classTodayProductYield);
|
||||
__apply([
|
||||
{ name: "钢1线", data: 11 },
|
||||
{ name: "钢2线", data: 22 },
|
||||
{ name: "钢3线", data: 33 },
|
||||
{ name: "合计", data: 66 },
|
||||
]);
|
||||
__apply(state.mainDataChart.lineTodayProductData);
|
||||
// __apply([
|
||||
// { name: "钢1线", data: 11 },
|
||||
// { name: "钢2线", data: 22 },
|
||||
// { name: "钢3线", data: 33 },
|
||||
// { name: "合计", data: 66 },
|
||||
// ]);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartChart.value.classList.add("h-full");
|
||||
__apply([
|
||||
{ name: "钢1线", data: 11 },
|
||||
{ name: "钢2线", data: 22 },
|
||||
{ name: "钢3线", data: 33 },
|
||||
{ name: "合计", data: 66 },
|
||||
{ name: "钢1线", data: 0 },
|
||||
{ name: "钢2线", data: 0 },
|
||||
{ name: "钢3线", data: 0 },
|
||||
{ name: "合计", data: 0 },
|
||||
]);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -2,9 +2,11 @@ import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
|
||||
export const useWsStore = defineStore("wsData", () => {
|
||||
const data1 = ref({ test: "hello world" });
|
||||
const data1 = ref({});
|
||||
const data2 = ref({});
|
||||
const data3 = ref({});
|
||||
const mainDataChart = ref({});
|
||||
const mainDataAlarm = ref({});
|
||||
|
||||
function updateData(category, data) {
|
||||
switch (category) {
|
||||
@ -16,12 +18,19 @@ export const useWsStore = defineStore("wsData", () => {
|
||||
break;
|
||||
case "3":
|
||||
data3.value = { ...data3.value, ...data };
|
||||
break;
|
||||
case "main-chart":
|
||||
mainDataChart.value = { ...mainDataChart.value, ...data };
|
||||
break;
|
||||
case "main-alarm":
|
||||
mainDataAlarm.value = { ...mainDataAlarm.value, ...data };
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return { data1, data2, data3, updateData };
|
||||
return { data1, data2, data3, mainDataChart, mainDataAlarm, updateData };
|
||||
});
|
||||
// export const useWsStore = defineStore('wsData', {
|
||||
// state: () => ({
|
||||
|
||||
@ -6,7 +6,8 @@ export default function useWebsocket(store, path, excludePaths = []) {
|
||||
connectPath(store, path);
|
||||
}
|
||||
|
||||
const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
|
||||
// const url = "ws://192.168.1.101:8082/QbMonitoring/websocket";
|
||||
const url = "ws://192.168.0.33:8082/QbMonitoring/websocket";
|
||||
function connectPath(store, path) {
|
||||
new Client(
|
||||
{
|
||||
@ -34,7 +35,8 @@ function connectPath(store, path) {
|
||||
);
|
||||
}
|
||||
|
||||
function connect0(store) {
|
||||
export function connect0(store) {
|
||||
console.log("[*] Connecting main screen........");
|
||||
new Client(
|
||||
{
|
||||
url: url + "/0",
|
||||
@ -44,6 +46,14 @@ function connect0(store) {
|
||||
try {
|
||||
const data = JSON.parse(message.data);
|
||||
console.log("message --- 0 ---> ", JSON.parse(message.data));
|
||||
|
||||
if ("lineSumProductYield" in data) {
|
||||
// 主屏推送 图表数据
|
||||
store.updateData("main-chart", data);
|
||||
} else {
|
||||
// 主屏推送 报警数据
|
||||
store.updateData("main-alarm", data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("[x] 未解析的ws数据: ", err);
|
||||
}
|
||||
|
||||
Laden…
Verwijs in nieuw issue
Block a user