diff --git a/src/MainScreen.vue b/src/MainScreen.vue index 0b2d30a..82b50f2 100644 --- a/src/MainScreen.vue +++ b/src/MainScreen.vue @@ -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, diff --git a/src/components/mainscreen/SumRate.vue b/src/components/mainscreen/SumRate.vue index 639e426..4cade47 100644 --- a/src/components/mainscreen/SumRate.vue +++ b/src/components/mainscreen/SumRate.vue @@ -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%" }, ]); }); diff --git a/src/components/mainscreen/SumYield.vue b/src/components/mainscreen/SumYield.vue index 28696c9..0fc2311 100644 --- a/src/components/mainscreen/SumYield.vue +++ b/src/components/mainscreen/SumYield.vue @@ -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 }, ]); }); diff --git a/src/components/mainscreen/TodayRate.vue b/src/components/mainscreen/TodayRate.vue index 3863427..f48eac0 100644 --- a/src/components/mainscreen/TodayRate.vue +++ b/src/components/mainscreen/TodayRate.vue @@ -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%" }, ]); }); diff --git a/src/components/mainscreen/TodayYield.vue b/src/components/mainscreen/TodayYield.vue index fa1acd2..c9b0d3e 100644 --- a/src/components/mainscreen/TodayYield.vue +++ b/src/components/mainscreen/TodayYield.vue @@ -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 }, ]); }); diff --git a/src/store/index.js b/src/store/index.js index 77f8d2f..2946520 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -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: () => ({ diff --git a/src/utils/useWebsocket.js b/src/utils/useWebsocket.js index e6896f5..db86bd9 100644 --- a/src/utils/useWebsocket.js +++ b/src/utils/useWebsocket.js @@ -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); }