@@ -2,50 +2,24 @@ | |||||
import { ref, onMounted } from "vue"; | import { ref, onMounted } from "vue"; | ||||
import MainPage from "./MainPage.vue"; | import MainPage from "./MainPage.vue"; | ||||
import Slider from "./components/Slider.vue"; | import Slider from "./components/Slider.vue"; | ||||
import Client from "./utils/ws"; | |||||
import useWebsocket from "./utils/useWebsocket"; | |||||
import { useWsStore } from "./store"; | import { useWsStore } from "./store"; | ||||
const store = useWsStore(); | const store = useWsStore(); | ||||
const url = "ws://192.168.1.101:8082/QbMonitoring/websocket"; | |||||
// use websocket | |||||
let urlPath = document.location.pathname; | let urlPath = document.location.pathname; | ||||
if (urlPath === "/") { | if (urlPath === "/") { | ||||
urlPath = "/1-1"; | urlPath = "/1-1"; | ||||
} | } | ||||
new Client( | |||||
{ | |||||
url: url + urlPath, | |||||
name: urlPath, | |||||
}, | |||||
(message) => { | |||||
try { | |||||
const data = JSON.parse(message.data); | |||||
console.log("message", JSON.parse(message.data)); | |||||
if ("specificationChanges" in data) { | |||||
console.log("[*] setting data1"); | |||||
// 分屏推送1数据 | |||||
store.updateData("1", data); | |||||
} else if ("deliveryNotification" in data) { | |||||
// 分屏推送3数据 | |||||
console.log("[*] setting data3"); | |||||
store.updateData("3", data); | |||||
} else { | |||||
// 分屏推送2数据 | |||||
console.log("[*] setting data2"); | |||||
store.updateData("2", data); | |||||
} | |||||
} catch (err) { | |||||
console.log("[x] 未解析的ws数据: ", err); | |||||
} | |||||
} | |||||
); | |||||
useWebsocket(store, urlPath); | |||||
// size setting | |||||
const size = ref(80); | const size = ref(80); | ||||
onMounted(() => { | onMounted(() => { | ||||
setSize(size.value); | setSize(size.value); | ||||
}); | }); | ||||
// style update | |||||
const styles = ref({}); | const styles = ref({}); | ||||
function setSize(value) { | function setSize(value) { | ||||
const v = (value / 100).toFixed(2); | const v = (value / 100).toFixed(2); | ||||
@@ -1,10 +1,13 @@ | |||||
<script setup> | <script setup> | ||||
import { ref, onMounted } from 'vue'; | |||||
import * as echarts from 'echarts'; | |||||
import Container from './Base/Container.vue'; | |||||
import { useWsStore } from '../store' | |||||
import { ref, onMounted } from "vue"; | |||||
import * as echarts from "echarts"; | |||||
import Container from "./Base/Container.vue"; | |||||
import { useWsStore } from "../store"; | |||||
import charSetup from "./HourChartOptions"; | |||||
const store = useWsStore(); | const store = useWsStore(); | ||||
const chartChart = ref(null); | const chartChart = ref(null); | ||||
const chart = ref(null); | |||||
// 小时数据 | // 小时数据 | ||||
const hourData = ref([]); | const hourData = ref([]); | ||||
// store.$subscribe((mutation, state) => { | // store.$subscribe((mutation, state) => { | ||||
@@ -19,28 +22,8 @@ const hourData = ref([]); | |||||
// }); | // }); | ||||
onMounted(() => { | onMounted(() => { | ||||
chartChart.value.classList.add('h-full'); | |||||
const mc = echarts.init(chartChart.value); | |||||
mc.setOption({ | |||||
grid: { | |||||
top: 24, | |||||
bottom: 24, | |||||
left: 24, | |||||
right: 24, | |||||
}, | |||||
tooltip: {}, | |||||
xAxis: { | |||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], | |||||
}, | |||||
yAxis: {}, | |||||
series: [ | |||||
{ | |||||
name: '销量', | |||||
type: 'bar', | |||||
data: [5, 20, 36, 10, 10, 20], | |||||
}, | |||||
], | |||||
}); | |||||
chartChart.value.classList.add("h-full"); | |||||
chart.value = echarts.init(chartChart.value); | |||||
}); | }); | ||||
</script> | </script> | ||||
@@ -0,0 +1,40 @@ | |||||
export const options = { | |||||
grid: { | |||||
top: "5%", | |||||
bottom: "5%", | |||||
left: "3%", | |||||
right: "3%", | |||||
containLabel: true, | |||||
}, | |||||
xAxis: { | |||||
type: "category", | |||||
data: [], | |||||
axisLabel: { | |||||
fontSize: 24, | |||||
}, | |||||
}, | |||||
yAxis: { | |||||
type: "value", | |||||
axisLabel: { | |||||
fontSize: 24, | |||||
}, | |||||
minInterval: 1, | |||||
}, | |||||
series: [ | |||||
{ | |||||
data: [], | |||||
type: "bar", | |||||
showBackground: true, | |||||
backgroundStyle: { | |||||
color: "rgba(180, 180, 180, 0.2)", | |||||
}, | |||||
}, | |||||
], | |||||
}; | |||||
export default function setup(echartInstance, timeArr, dataArr) { | |||||
const options = { ...options }; | |||||
options.xAxis.data = timeArr; | |||||
options.series[0].data = dataArr; | |||||
echartInstance.setOption(options); | |||||
} |
@@ -0,0 +1,55 @@ | |||||
import Client from "./ws"; | |||||
export default function useWebsocket(store, path) { | |||||
connect0(store); | |||||
connectPath(store, path); | |||||
} | |||||
const url = "ws://192.168.1.101:8082/QbMonitoring/websocket"; | |||||
function connectPath(store, path) { | |||||
new Client( | |||||
{ | |||||
url: url + path, | |||||
name: path, | |||||
}, | |||||
(message) => { | |||||
try { | |||||
const data = JSON.parse(message.data); | |||||
console.log("message", JSON.parse(message.data)); | |||||
if ("specificationChanges" in data) { | |||||
console.log("[*] setting data1"); | |||||
// 分屏推送1数据 | |||||
store.updateData("1", data); | |||||
} else if ("deliveryNotification" in data) { | |||||
// 分屏推送3数据 | |||||
console.log("[*] setting data3"); | |||||
store.updateData("3", data); | |||||
} else { | |||||
// 分屏推送2数据 | |||||
console.log("[*] setting data2"); | |||||
store.updateData("2", data); | |||||
} | |||||
} catch (err) { | |||||
console.log("[x] 未解析的ws数据: ", err); | |||||
} | |||||
} | |||||
); | |||||
} | |||||
function connect0(store) { | |||||
new Client( | |||||
{ | |||||
url: url + "/0", | |||||
name: "/0", | |||||
}, | |||||
(message) => { | |||||
try { | |||||
const data = JSON.parse(message.data); | |||||
console.log("message --- 0 ---> ", JSON.parse(message.data)); | |||||
} catch (err) { | |||||
console.log("[x] 未解析的ws数据: ", err); | |||||
} | |||||
} | |||||
); | |||||
} |