update websocket and store
This commit is contained in:
parent
8ff6fd02df
commit
52a9111a19
@ -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,
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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: () => ({
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user