update websocket and store

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-03-05 16:39:34 +08:00
parent 8ff6fd02df
commit 52a9111a19
7 changed files with 75 additions and 52 deletions

View File

@ -10,6 +10,7 @@ import SumYield from "./components/mainscreen/SumYield.vue";
import TodayRate from "./components/mainscreen/TodayRate.vue"; import TodayRate from "./components/mainscreen/TodayRate.vue";
import SumRate from "./components/mainscreen/SumRate.vue"; import SumRate from "./components/mainscreen/SumRate.vue";
import FullEqList from "./FullEqList.vue"; import FullEqList from "./FullEqList.vue";
import { connect0 } from "./utils/useWebsocket";
const mainContainer = ref(null); const mainContainer = ref(null);
const props = defineProps({ const props = defineProps({
@ -19,6 +20,9 @@ const props = defineProps({
}, },
}); });
const store = useWsStore(); const store = useWsStore();
connect0(store);
const alarmList = ref( const alarmList = ref(
(store.data1.alarmArrList || []).map((item, index) => ({ (store.data1.alarmArrList || []).map((item, index) => ({
id: item.id, id: item.id,

View File

@ -50,14 +50,14 @@ const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
series: [ series: [
{ {
type: "line", type: "line",
data: datalist.map((item) => item * 100), data: datalist,
label: { label: {
show: true, show: true,
position: "top", position: "top",
// formatter: (params) => { // formatter: (params) => {
// console.log("params", datalist[params.dataIndex]); // console.log("params", datalist[params.dataIndex]);
// }, // },
formatter: '{c}%', formatter: "{c}%",
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
}, },
@ -112,20 +112,20 @@ function __apply(yieldArray) {
// //
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
// __apply(state.data2.lineSumProductYield); __apply(state.mainDataChart.lineSumProductYield);
__apply([ // __apply([
{ name: "钢1线", data: 0.32 }, // { name: "1线", data: 0.32 },
{ name: "钢2线", data: 0.91 }, // { name: "2线", data: 0.91 },
{ name: "钢3线", data: 0.54 }, // { name: "3线", data: 0.54 },
]); // ]);
}); });
onMounted(() => { onMounted(() => {
chartChart.value.classList.add("h-full"); chartChart.value.classList.add("h-full");
__apply([ __apply([
{ name: "钢1线", data: 0.32 }, { name: "钢1线", data: "0%" },
{ name: "钢2线", data: 0.91 }, { name: "钢2线", data: "0%" },
{ name: "钢3线", data: 0.54 }, { name: "钢3线", data: "0%" },
]); ]);
}); });
</script> </script>

View File

@ -114,23 +114,22 @@ function __apply(yieldArray) {
// //
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
// __apply(state.data2.classTodayProductYield); __apply(state.mainDataChart.lineSumProductData);
// __apply(state.data2.classTodayProductYield); // __apply([
__apply([ // { name: "1线", data: 11 },
{ name: "钢1线", data: 11 }, // { name: "2线", data: 22 },
{ name: "钢2线", data: 22 }, // { name: "3线", data: 33 },
{ name: "钢3线", data: 33 }, // { name: "", data: 66 },
{ name: "合计", data: 66 }, // ]);
]);
}); });
onMounted(() => { onMounted(() => {
chartChart.value.classList.add("h-full"); chartChart.value.classList.add("h-full");
__apply([ __apply([
{ name: "钢1线", data: 11 }, { name: "钢1线", data: 0 },
{ name: "钢2线", data: 22 }, { name: "钢2线", data: 0 },
{ name: "钢3线", data: 33 }, { name: "钢3线", data: 0 },
{ name: "合计", data: 66 }, { name: "合计", data: 0 },
]); ]);
}); });
</script> </script>

View File

@ -50,14 +50,15 @@ const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
series: [ series: [
{ {
type: "line", type: "line",
data: datalist.map((item) => item * 100), data: datalist,
// data: datalist.map((item) => item * 100),
label: { label: {
show: true, show: true,
position: "top", position: "top",
// formatter: (params) => { // formatter: (params) => {
// console.log("params", datalist[params.dataIndex]); // console.log("params", datalist[params.dataIndex]);
// }, // },
formatter: '{c}%', formatter: "{c}%",
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
}, },
@ -80,11 +81,11 @@ function loadData(yieldArray) {
if (yieldArray == undefined || yieldArray?.length == 0) return null; if (yieldArray == undefined || yieldArray?.length == 0) return null;
for (let i = 0; i < yieldArray.length; ++i) { for (let i = 0; i < yieldArray.length; ++i) {
if (yieldArray[i].name == "钢1线") { 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线") { } 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线") { } else if (yieldArray[i].name == "钢3线") {
result[2] = parseFloat(yieldArray[i].data); result[2] = parseFloat(yieldArray[i].data) || 0.0;
} }
} }
return result; return result;
@ -112,20 +113,20 @@ function __apply(yieldArray) {
// //
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
// __apply(state.data2.classTodayProductYield); __apply(state.mainDataChart.lineTodayProductYield);
__apply([ // __apply([
{ name: "钢1线", data: 0.32 }, // { name: "1线", data: 0.32 },
{ name: "钢2线", data: 0.91 }, // { name: "2线", data: 0.91 },
{ name: "钢3线", data: 0.54 }, // { name: "3线", data: 0.54 },
]); // ]);
}); });
onMounted(() => { onMounted(() => {
chartChart.value.classList.add("h-full"); chartChart.value.classList.add("h-full");
__apply([ __apply([
{ name: "钢1线", data: 0.32 }, { name: "钢1线", data: "0%" },
{ name: "钢2线", data: 0.91 }, { name: "钢2线", data: "0%" },
{ name: "钢3线", data: 0.54 }, { name: "钢3线", data: "0%" },
]); ]);
}); });
</script> </script>

View File

@ -114,22 +114,22 @@ function __apply(yieldArray) {
// //
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
// __apply(state.data2.classTodayProductYield); __apply(state.mainDataChart.lineTodayProductData);
__apply([ // __apply([
{ name: "钢1线", data: 11 }, // { name: "1线", data: 11 },
{ name: "钢2线", data: 22 }, // { name: "2线", data: 22 },
{ name: "钢3线", data: 33 }, // { name: "3线", data: 33 },
{ name: "合计", data: 66 }, // { name: "", data: 66 },
]); // ]);
}); });
onMounted(() => { onMounted(() => {
chartChart.value.classList.add("h-full"); chartChart.value.classList.add("h-full");
__apply([ __apply([
{ name: "钢1线", data: 11 }, { name: "钢1线", data: 0 },
{ name: "钢2线", data: 22 }, { name: "钢2线", data: 0 },
{ name: "钢3线", data: 33 }, { name: "钢3线", data: 0 },
{ name: "合计", data: 66 }, { name: "合计", data: 0 },
]); ]);
}); });
</script> </script>

View File

@ -2,9 +2,11 @@ import { defineStore } from "pinia";
import { ref } from "vue"; import { ref } from "vue";
export const useWsStore = defineStore("wsData", () => { export const useWsStore = defineStore("wsData", () => {
const data1 = ref({ test: "hello world" }); const data1 = ref({});
const data2 = ref({}); const data2 = ref({});
const data3 = ref({}); const data3 = ref({});
const mainDataChart = ref({});
const mainDataAlarm = ref({});
function updateData(category, data) { function updateData(category, data) {
switch (category) { switch (category) {
@ -16,12 +18,19 @@ export const useWsStore = defineStore("wsData", () => {
break; break;
case "3": case "3":
data3.value = { ...data3.value, ...data }; 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: default:
break; break;
} }
} }
return { data1, data2, data3, updateData }; return { data1, data2, data3, mainDataChart, mainDataAlarm, updateData };
}); });
// export const useWsStore = defineStore('wsData', { // export const useWsStore = defineStore('wsData', {
// state: () => ({ // state: () => ({

View File

@ -6,7 +6,8 @@ export default function useWebsocket(store, path, excludePaths = []) {
connectPath(store, path); 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) { function connectPath(store, path) {
new Client( new Client(
{ {
@ -34,7 +35,8 @@ function connectPath(store, path) {
); );
} }
function connect0(store) { export function connect0(store) {
console.log("[*] Connecting main screen........");
new Client( new Client(
{ {
url: url + "/0", url: url + "/0",
@ -44,6 +46,14 @@ function connect0(store) {
try { try {
const data = JSON.parse(message.data); const data = JSON.parse(message.data);
console.log("message --- 0 ---> ", 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) { } catch (err) {
console.log("[x] 未解析的ws数据: ", err); console.log("[x] 未解析的ws数据: ", err);
} }