@@ -2,50 +2,24 @@ | |||
import { ref, onMounted } from "vue"; | |||
import MainPage from "./MainPage.vue"; | |||
import Slider from "./components/Slider.vue"; | |||
import Client from "./utils/ws"; | |||
import useWebsocket from "./utils/useWebsocket"; | |||
import { useWsStore } from "./store"; | |||
const store = useWsStore(); | |||
const url = "ws://192.168.1.101:8082/QbMonitoring/websocket"; | |||
// use websocket | |||
let urlPath = document.location.pathname; | |||
if (urlPath === "/") { | |||
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); | |||
onMounted(() => { | |||
setSize(size.value); | |||
}); | |||
// style update | |||
const styles = ref({}); | |||
function setSize(value) { | |||
const v = (value / 100).toFixed(2); | |||
@@ -1,10 +1,13 @@ | |||
<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 chartChart = ref(null); | |||
const chart = ref(null); | |||
// 小时数据 | |||
const hourData = ref([]); | |||
// store.$subscribe((mutation, state) => { | |||
@@ -19,28 +22,8 @@ const hourData = ref([]); | |||
// }); | |||
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> | |||
@@ -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); | |||
} | |||
} | |||
); | |||
} |