add websocket
This commit is contained in:
parent
2c0e0f8fd6
commit
fd0985868c
109
package-lock.json
generated
109
package-lock.json
generated
@ -17,13 +17,16 @@
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.6.0",
|
||||
"@types/ws": "^8.5.5",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"sass": "^1.32.7",
|
||||
"sass-loader": "^12.0.0",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
"vue-template-compiler": "^2.6.14",
|
||||
"ws": "^8.14.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@achrinza/node-ipc": {
|
||||
@ -2344,11 +2347,10 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/@types/node/-/node-20.1.0.tgz",
|
||||
"integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
"version": "20.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
|
||||
"integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/normalize-package-data": {
|
||||
"version": "2.4.1",
|
||||
@ -2435,11 +2437,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.5.4",
|
||||
"resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz",
|
||||
"integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
|
||||
"version": "8.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
|
||||
"integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
@ -10108,6 +10109,27 @@
|
||||
"node": ">= 10.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-bundle-analyzer/node_modules/ws": {
|
||||
"version": "7.5.9",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
|
||||
"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=8.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": "^5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-chain": {
|
||||
"version": "6.5.1",
|
||||
"resolved": "https://registry.npmmirror.com/webpack-chain/-/webpack-chain-6.5.1.tgz",
|
||||
@ -10356,28 +10378,6 @@
|
||||
"url": "https://opencollective.com/webpack"
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-dev-server/node_modules/ws": {
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-8.13.0.tgz",
|
||||
"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/webpack-merge": {
|
||||
"version": "5.8.0",
|
||||
"resolved": "https://registry.npmmirror.com/webpack-merge/-/webpack-merge-5.8.0.tgz",
|
||||
@ -10498,17 +10498,16 @@
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "7.5.9",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
|
||||
"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
|
||||
"version": "8.14.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz",
|
||||
"integrity": "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8.3.0"
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": "^5.0.2"
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
@ -12177,9 +12176,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "20.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/@types/node/-/node-20.1.0.tgz",
|
||||
"integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A==",
|
||||
"version": "20.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz",
|
||||
"integrity": "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/normalize-package-data": {
|
||||
@ -12259,9 +12258,9 @@
|
||||
}
|
||||
},
|
||||
"@types/ws": {
|
||||
"version": "8.5.4",
|
||||
"resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz",
|
||||
"integrity": "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg==",
|
||||
"version": "8.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz",
|
||||
"integrity": "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/node": "*"
|
||||
@ -17479,6 +17478,15 @@
|
||||
"opener": "^1.5.2",
|
||||
"sirv": "^1.0.7",
|
||||
"ws": "^7.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"ws": {
|
||||
"version": "7.5.9",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
|
||||
"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
"webpack-chain": {
|
||||
@ -17639,13 +17647,6 @@
|
||||
"ajv-formats": "^2.1.1",
|
||||
"ajv-keywords": "^5.1.0"
|
||||
}
|
||||
},
|
||||
"ws": {
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-8.13.0.tgz",
|
||||
"integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -17737,9 +17738,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"ws": {
|
||||
"version": "7.5.9",
|
||||
"resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
|
||||
"integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
|
||||
"version": "8.14.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz",
|
||||
"integrity": "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
|
||||
12
package.json
12
package.json
@ -4,7 +4,8 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
"build": "vue-cli-service build",
|
||||
"server": "ts-node ./src/components/yx-dark/socket-server/index.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
@ -16,12 +17,17 @@
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.6.0",
|
||||
"@types/ws": "^8.5.5",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"sass": "^1.32.7",
|
||||
"sass-loader": "^12.0.0",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^5.2.2",
|
||||
"vue-template-compiler": "^2.6.14",
|
||||
"ws": "^8.14.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -6,18 +6,41 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="yx-dark-chart"></div>
|
||||
<div class="yx-dark-chart">
|
||||
<LineChart
|
||||
key="1"
|
||||
id="line-chart-1"
|
||||
class="flex-1"
|
||||
unit="单位 kg/h"
|
||||
:legend="Object.keys(oilTable1)"
|
||||
:series="oilTable1"
|
||||
/>
|
||||
<div class="vertical-line"></div>
|
||||
<LineChart
|
||||
key="2"
|
||||
id="line-chart-2"
|
||||
class="flex-1"
|
||||
unit="单位 kg/h"
|
||||
:legend="Object.keys(oilTable2)"
|
||||
:series="oilTable2"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LineChart from "./components/LineChart.vue";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "YxDarkChart",
|
||||
components: {},
|
||||
props: {},
|
||||
components: { LineChart },
|
||||
props: ["data-source"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
computed: {
|
||||
...mapState(["oilTable1", "oilTable2"]),
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
@ -25,6 +48,23 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.yx-dark-chart {
|
||||
height: 100%;
|
||||
background: #f003;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
width: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
margin: 0 6px;
|
||||
width: 6px;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#6fe2ff,
|
||||
#52cbef80,
|
||||
transparent,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
</style>
|
||||
|
||||
364
src/components/yx-dark/containers/components/LineChart.vue
Normal file
364
src/components/yx-dark/containers/components/LineChart.vue
Normal file
@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<!-- line chart -->
|
||||
<div class="line-chart__wrapper">
|
||||
<div class="line-chart__custom-legend flex" v-if="legend.length">
|
||||
<!-- <span>产线1 - 产线5</span> -->
|
||||
<ul style="" class="flex">
|
||||
<li v-for="(v, i) in legend" :key="i">{{ v }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div :id="id" style="width: 100%; height: 100%"></div>
|
||||
<div
|
||||
v-show="legend.length === 0"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #eee0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 24px;
|
||||
color: #eee8;
|
||||
user-select: none;
|
||||
"
|
||||
>
|
||||
无数据
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts/core";
|
||||
import { LineChart } from "echarts/charts";
|
||||
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
} from "echarts/components";
|
||||
|
||||
import { LabelLayout, UniversalTransition } from "echarts/features";
|
||||
|
||||
import { CanvasRenderer } from "echarts/renderers";
|
||||
|
||||
echarts.use([
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
LineChart,
|
||||
LabelLayout,
|
||||
UniversalTransition,
|
||||
CanvasRenderer,
|
||||
]);
|
||||
|
||||
export default {
|
||||
name: "LineChart",
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: "line-chart",
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
title: { text: "default chart" },
|
||||
}),
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: "单位/m³",
|
||||
},
|
||||
legend: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
series: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
colors: [
|
||||
"#18c7f3",
|
||||
"#FFD160",
|
||||
"#F31868",
|
||||
"#30E89A",
|
||||
"#2760FF",
|
||||
"#7138FF",
|
||||
"#F318D8",
|
||||
"#C0F318",
|
||||
"#f77",
|
||||
"#19f",
|
||||
"#98f",
|
||||
],
|
||||
data: [],
|
||||
legendtext: [
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
"asdfsadf",
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
series: {
|
||||
deep: true,
|
||||
handler: function () {
|
||||
console.log("LineChart: series changed!");
|
||||
this.init();
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateXAxis() {
|
||||
const hour = +new Date().getHours();
|
||||
return Array(24)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
if (hour - index < 0) {
|
||||
return 24 + hour - index + ":00";
|
||||
}
|
||||
return hour - index + ":00";
|
||||
})
|
||||
.reverse();
|
||||
},
|
||||
init() {
|
||||
if (!this.chart)
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
top: 54,
|
||||
left: 54,
|
||||
bottom: 48,
|
||||
right: 24,
|
||||
},
|
||||
xAxis: {
|
||||
data: this.updateXAxis(),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff9",
|
||||
fontSize: 14,
|
||||
lineHeight: 2,
|
||||
margin: 16,
|
||||
rotate: 30,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: this.unit,
|
||||
nameTextStyle: {
|
||||
color: "#fff9",
|
||||
fontSize: 18,
|
||||
align: "",
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
// width: 1,
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff9",
|
||||
fontSize: 16,
|
||||
lineHeight: 2,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
// data: [100, 200, 300, 400, 500],
|
||||
},
|
||||
color: this.colors,
|
||||
// series: Array(5)
|
||||
// .fill(1)
|
||||
// .map((_, index) => ({
|
||||
// name: Math.random(),
|
||||
// type: "line",
|
||||
// symbol: "circle",
|
||||
// symbolSize: adjust(3),
|
||||
// lineStyle: {
|
||||
// width: adjust(1),
|
||||
// },
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: this.colors[index] + "33" },
|
||||
// { offset: 1, color: "transparent" },
|
||||
// ]),
|
||||
// },
|
||||
// data: Array(31)
|
||||
// .fill(1)
|
||||
// .map(() => {
|
||||
// let v = Math.floor(Math.random() * 5000);
|
||||
// while (v < 3000) v = Math.floor(Math.random() * 5000);
|
||||
// return v;
|
||||
// }),
|
||||
// })),
|
||||
series: Array(this.legend.length)
|
||||
.fill(1)
|
||||
.map((_, index) => {
|
||||
let lgd = this.legend[index];
|
||||
// console.log("series: ", lgd, index, this.series[lgd]);
|
||||
return {
|
||||
name: lgd,
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.colors[index] + "33" },
|
||||
{ offset: 1, color: "transparent" },
|
||||
]),
|
||||
},
|
||||
data: this.series[lgd],
|
||||
};
|
||||
}),
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::-webkit-scrollbar {
|
||||
// display: none;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
height: 4px;
|
||||
border-radius: 4px;
|
||||
background: #ccc3;
|
||||
}
|
||||
|
||||
// ::-webkit-scrollbar-track {
|
||||
// height: adjust(1px);
|
||||
// background: blue;
|
||||
// }
|
||||
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
ul {
|
||||
// padding: 0 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
// background: #eeec;
|
||||
// overflow-x: hidden;
|
||||
white-space: pre-wrap;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
li {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
min-width: 40px;
|
||||
margin-right: 18px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
// margin-right: adjust(16px);
|
||||
}
|
||||
|
||||
.line-chart__custom-legend {
|
||||
position: absolute;
|
||||
top: -64px;
|
||||
right: 0;
|
||||
font-size: 18px;
|
||||
font-family: Ubuntu, sans-serif;
|
||||
padding: 0;
|
||||
// max-width: 100%;
|
||||
width: 65%;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: -16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
background: #eee6;
|
||||
}
|
||||
|
||||
li:nth-child(1)::before {
|
||||
background: #18c7f3;
|
||||
}
|
||||
li:nth-child(2)::before {
|
||||
background: #ffd160;
|
||||
}
|
||||
li:nth-child(3)::before {
|
||||
background: #f31868;
|
||||
}
|
||||
li:nth-child(4)::before {
|
||||
background: #30e89a;
|
||||
}
|
||||
li:nth-child(5)::before {
|
||||
background: #2760ff;
|
||||
}
|
||||
li:nth-child(6)::before {
|
||||
background: #7138ff;
|
||||
}
|
||||
li:nth-child(7)::before {
|
||||
background: #f318d8;
|
||||
}
|
||||
li:nth-child(8)::before {
|
||||
background: #c0f318;
|
||||
}
|
||||
li:nth-child(9)::before {
|
||||
background: #f77;
|
||||
}
|
||||
li:nth-child(10)::before {
|
||||
background: #19f;
|
||||
}
|
||||
li:nth-child(11)::before {
|
||||
background: #98f;
|
||||
}
|
||||
|
||||
.line-chart__wrapper {
|
||||
position: relative;
|
||||
background: #7771;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(4px);
|
||||
box-shadow: inset 0 0 20px 4px rgba($color: #fff, $alpha: 0.1);
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
}
|
||||
</style>
|
||||
@ -133,7 +133,7 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.yx-dark-tables {
|
||||
height: 100%;
|
||||
background: #fff3;
|
||||
// background: #fff3;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
||||
952
src/components/yx-dark/socket-server/demo.json
Normal file
952
src/components/yx-dark/socket-server/demo.json
Normal file
@ -0,0 +1,952 @@
|
||||
{
|
||||
"baseInfo": {
|
||||
"fireChangeTime": "20分钟",
|
||||
"waterInTemp": "75.0",
|
||||
"lastFireChangeTime": "10分15秒",
|
||||
"kilnPressure": "94.0",
|
||||
"fireDirection": "南火",
|
||||
"waterOutTemp": "26.0"
|
||||
},
|
||||
"fan": [
|
||||
[
|
||||
"8#压延冷却风机",
|
||||
"4373Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"7#压延冷却风机",
|
||||
"4772Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"6#压延冷却风机",
|
||||
"1704Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"5#压延冷却风机",
|
||||
"3109Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"4#压延冷却风机",
|
||||
"2595Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"3#压延冷却风机",
|
||||
"8903Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"2#压延冷却风机",
|
||||
"3741Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"1#压延冷却风机",
|
||||
"9035Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"4#熔化部风机",
|
||||
"5223Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"3#熔化部风机",
|
||||
"9722Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"2#熔化部风机",
|
||||
"9617Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"1#熔化部风机",
|
||||
"7135Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"4#澄清部风机",
|
||||
"1699Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"3#澄清部风机",
|
||||
"2511Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"2#澄清部风机",
|
||||
"9780Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"1#澄清部风机",
|
||||
"3809Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"2#助燃风机",
|
||||
"435Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"1#助燃风机",
|
||||
"6270Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"2#L吊墙风机",
|
||||
"8181Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"1#L吊墙风机",
|
||||
"5587Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"2#钢碹碴池壁风机",
|
||||
"6652Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"1#钢碹碴池壁风机",
|
||||
"2000Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"2#池壁拐角风机",
|
||||
"1972Hz",
|
||||
"正常"
|
||||
],
|
||||
[
|
||||
"1#池壁拐角风机",
|
||||
"7730Hz",
|
||||
"正常"
|
||||
]
|
||||
],
|
||||
"gas": {
|
||||
"kilnGasT1": {
|
||||
"FE111R": [
|
||||
53.02,
|
||||
69.84,
|
||||
99.33,
|
||||
17.21,
|
||||
1.17,
|
||||
27.84,
|
||||
95.44,
|
||||
30.72,
|
||||
32.24,
|
||||
64.16,
|
||||
59.65,
|
||||
14.59,
|
||||
78.58,
|
||||
99.15,
|
||||
58.91,
|
||||
34.13,
|
||||
99.62,
|
||||
2.23,
|
||||
28.31,
|
||||
91.17,
|
||||
97.15,
|
||||
60.62,
|
||||
94.12,
|
||||
23.24
|
||||
],
|
||||
"FE113R": [
|
||||
22.04,
|
||||
40.78,
|
||||
75.62,
|
||||
61.01,
|
||||
72.7,
|
||||
48.46,
|
||||
32.44,
|
||||
42.51,
|
||||
59.61,
|
||||
22.86,
|
||||
32.95,
|
||||
21.32,
|
||||
23.59,
|
||||
84.16,
|
||||
55.14,
|
||||
55.71,
|
||||
10.81,
|
||||
56.53,
|
||||
75.51,
|
||||
2.85,
|
||||
27.77,
|
||||
52.42,
|
||||
43.34,
|
||||
22.04
|
||||
],
|
||||
"FE112R": [
|
||||
77.02,
|
||||
13.83,
|
||||
1.71,
|
||||
53.99,
|
||||
4.03,
|
||||
1,
|
||||
22.17,
|
||||
61.73,
|
||||
11.25,
|
||||
31.69,
|
||||
90.31,
|
||||
69.26,
|
||||
68.72,
|
||||
80.79,
|
||||
3.08,
|
||||
39.17,
|
||||
12.6,
|
||||
35.31,
|
||||
97.2,
|
||||
38.77,
|
||||
27.5,
|
||||
11.78,
|
||||
72.32,
|
||||
23.13
|
||||
],
|
||||
"FE115R": [
|
||||
28.31,
|
||||
10.16,
|
||||
13.22,
|
||||
41.44,
|
||||
97.19,
|
||||
60.08,
|
||||
34.13,
|
||||
16.75,
|
||||
92.7,
|
||||
79.48,
|
||||
3.08,
|
||||
14.71,
|
||||
4.4,
|
||||
0.88,
|
||||
77.6,
|
||||
57,
|
||||
31,
|
||||
86.14,
|
||||
44.31,
|
||||
45.7,
|
||||
6.85,
|
||||
65.62,
|
||||
77.97,
|
||||
49.2
|
||||
],
|
||||
"FE114R": [
|
||||
17.72,
|
||||
32.45,
|
||||
1.42,
|
||||
24.51,
|
||||
68.57,
|
||||
61.48,
|
||||
2.08,
|
||||
3.1,
|
||||
38.27,
|
||||
20.07,
|
||||
25.71,
|
||||
85.58,
|
||||
48.31,
|
||||
78.14,
|
||||
22.43,
|
||||
87.47,
|
||||
83.78,
|
||||
17.66,
|
||||
72.36,
|
||||
19,
|
||||
20.69,
|
||||
33.92,
|
||||
25.66,
|
||||
91.28
|
||||
],
|
||||
"FE117R": [
|
||||
47.8,
|
||||
62.27,
|
||||
90.23,
|
||||
28.31,
|
||||
73.09,
|
||||
34.04,
|
||||
9.03,
|
||||
44.69,
|
||||
32.62,
|
||||
25.78,
|
||||
27.79,
|
||||
25.42,
|
||||
28.96,
|
||||
56.52,
|
||||
75.43,
|
||||
50.56,
|
||||
90.22,
|
||||
11.85,
|
||||
4.56,
|
||||
39.9,
|
||||
9.83,
|
||||
65.98,
|
||||
91.22,
|
||||
92.43
|
||||
],
|
||||
"FE116R": [
|
||||
64.79,
|
||||
46.14,
|
||||
58.67,
|
||||
54.46,
|
||||
15.67,
|
||||
72.02,
|
||||
15.06,
|
||||
5.88,
|
||||
38.19,
|
||||
66.98,
|
||||
89.24,
|
||||
33.13,
|
||||
87.57,
|
||||
43.95,
|
||||
55.06,
|
||||
93.26,
|
||||
96.91,
|
||||
56.5,
|
||||
20.75,
|
||||
83.76,
|
||||
60.88,
|
||||
62.04,
|
||||
22.34,
|
||||
82.43
|
||||
],
|
||||
"FE118R": [
|
||||
94.32,
|
||||
86.26,
|
||||
5.13,
|
||||
47.33,
|
||||
40.01,
|
||||
34.97,
|
||||
18.69,
|
||||
81.81,
|
||||
87.37,
|
||||
96.47,
|
||||
16.04,
|
||||
23.33,
|
||||
0.66,
|
||||
16.86,
|
||||
13.19,
|
||||
67.32,
|
||||
37.63,
|
||||
13.74,
|
||||
22.85,
|
||||
78.89,
|
||||
9.52,
|
||||
75.46,
|
||||
0.2,
|
||||
1.51
|
||||
]
|
||||
},
|
||||
"kilnGasT2": {
|
||||
"FE124R": [
|
||||
53.02,
|
||||
69.84,
|
||||
99.33,
|
||||
17.21,
|
||||
1.17,
|
||||
27.84,
|
||||
95.44,
|
||||
30.72,
|
||||
32.24,
|
||||
64.16,
|
||||
59.65,
|
||||
14.59,
|
||||
78.58,
|
||||
99.15,
|
||||
58.91,
|
||||
34.13,
|
||||
99.62,
|
||||
2.23,
|
||||
28.31,
|
||||
91.17,
|
||||
97.15,
|
||||
60.62,
|
||||
94.12,
|
||||
23.24
|
||||
],
|
||||
"FE123aR": [
|
||||
17.72,
|
||||
32.45,
|
||||
1.42,
|
||||
24.51,
|
||||
68.57,
|
||||
61.48,
|
||||
2.08,
|
||||
3.1,
|
||||
38.27,
|
||||
20.07,
|
||||
25.71,
|
||||
85.58,
|
||||
48.31,
|
||||
78.14,
|
||||
22.43,
|
||||
87.47,
|
||||
83.78,
|
||||
17.66,
|
||||
72.36,
|
||||
19,
|
||||
20.69,
|
||||
33.92,
|
||||
25.66,
|
||||
91.28
|
||||
],
|
||||
"FE123R": [
|
||||
77.02,
|
||||
13.83,
|
||||
1.71,
|
||||
53.99,
|
||||
4.03,
|
||||
1,
|
||||
22.17,
|
||||
61.73,
|
||||
11.25,
|
||||
31.69,
|
||||
90.31,
|
||||
69.26,
|
||||
68.72,
|
||||
80.79,
|
||||
3.08,
|
||||
39.17,
|
||||
12.6,
|
||||
35.31,
|
||||
97.2,
|
||||
38.77,
|
||||
27.5,
|
||||
11.78,
|
||||
72.32,
|
||||
23.13
|
||||
],
|
||||
"FE124aR": [
|
||||
22.04,
|
||||
40.78,
|
||||
75.62,
|
||||
61.01,
|
||||
72.7,
|
||||
48.46,
|
||||
32.44,
|
||||
42.51,
|
||||
59.61,
|
||||
22.86,
|
||||
32.95,
|
||||
21.32,
|
||||
23.59,
|
||||
84.16,
|
||||
55.14,
|
||||
55.71,
|
||||
10.81,
|
||||
56.53,
|
||||
75.51,
|
||||
2.85,
|
||||
27.77,
|
||||
52.42,
|
||||
43.34,
|
||||
22.04
|
||||
],
|
||||
"FE126R": [
|
||||
64.79,
|
||||
46.14,
|
||||
58.67,
|
||||
54.46,
|
||||
15.67,
|
||||
72.02,
|
||||
15.06,
|
||||
5.88,
|
||||
38.19,
|
||||
66.98,
|
||||
89.24,
|
||||
33.13,
|
||||
87.57,
|
||||
43.95,
|
||||
55.06,
|
||||
93.26,
|
||||
96.91,
|
||||
56.5,
|
||||
20.75,
|
||||
83.76,
|
||||
60.88,
|
||||
62.04,
|
||||
22.34,
|
||||
82.43
|
||||
],
|
||||
"FE125aR": [
|
||||
47.8,
|
||||
62.27,
|
||||
90.23,
|
||||
28.31,
|
||||
73.09,
|
||||
34.04,
|
||||
9.03,
|
||||
44.69,
|
||||
32.62,
|
||||
25.78,
|
||||
27.79,
|
||||
25.42,
|
||||
28.96,
|
||||
56.52,
|
||||
75.43,
|
||||
50.56,
|
||||
90.22,
|
||||
11.85,
|
||||
4.56,
|
||||
39.9,
|
||||
9.83,
|
||||
65.98,
|
||||
91.22,
|
||||
92.43
|
||||
],
|
||||
"FE125R": [
|
||||
28.31,
|
||||
10.16,
|
||||
13.22,
|
||||
41.44,
|
||||
97.19,
|
||||
60.08,
|
||||
34.13,
|
||||
16.75,
|
||||
92.7,
|
||||
79.48,
|
||||
3.08,
|
||||
14.71,
|
||||
4.4,
|
||||
0.88,
|
||||
77.6,
|
||||
57,
|
||||
31,
|
||||
86.14,
|
||||
44.31,
|
||||
45.7,
|
||||
6.85,
|
||||
65.62,
|
||||
77.97,
|
||||
49.2
|
||||
],
|
||||
"FE126aR": [
|
||||
94.32,
|
||||
86.26,
|
||||
5.13,
|
||||
47.33,
|
||||
40.01,
|
||||
34.97,
|
||||
18.69,
|
||||
81.81,
|
||||
87.37,
|
||||
96.47,
|
||||
16.04,
|
||||
23.33,
|
||||
0.66,
|
||||
16.86,
|
||||
13.19,
|
||||
67.32,
|
||||
37.63,
|
||||
13.74,
|
||||
22.85,
|
||||
78.89,
|
||||
9.52,
|
||||
75.46,
|
||||
0.2,
|
||||
1.51
|
||||
]
|
||||
}
|
||||
},
|
||||
"kilnBottom": {
|
||||
"kilnTempBottomT1": {
|
||||
"TE316": [
|
||||
44,
|
||||
49,
|
||||
20,
|
||||
29,
|
||||
96,
|
||||
76,
|
||||
20,
|
||||
82,
|
||||
28,
|
||||
86,
|
||||
69,
|
||||
18,
|
||||
23,
|
||||
58,
|
||||
83,
|
||||
84,
|
||||
94,
|
||||
99,
|
||||
36,
|
||||
51,
|
||||
32
|
||||
],
|
||||
"TE315": [
|
||||
84,
|
||||
61,
|
||||
87,
|
||||
82,
|
||||
33,
|
||||
9,
|
||||
20,
|
||||
23,
|
||||
81,
|
||||
0,
|
||||
16,
|
||||
81,
|
||||
9,
|
||||
78,
|
||||
30,
|
||||
16,
|
||||
49,
|
||||
16,
|
||||
95,
|
||||
53,
|
||||
19
|
||||
],
|
||||
"TE314": [
|
||||
45,
|
||||
93,
|
||||
11,
|
||||
47,
|
||||
27,
|
||||
69,
|
||||
91,
|
||||
17,
|
||||
0,
|
||||
67,
|
||||
60,
|
||||
15,
|
||||
84,
|
||||
36,
|
||||
89,
|
||||
30,
|
||||
36,
|
||||
90,
|
||||
38,
|
||||
94,
|
||||
87
|
||||
],
|
||||
"TE313": [
|
||||
60,
|
||||
9,
|
||||
59,
|
||||
15,
|
||||
43,
|
||||
41,
|
||||
83,
|
||||
93,
|
||||
99,
|
||||
91,
|
||||
29,
|
||||
47,
|
||||
2,
|
||||
40,
|
||||
65,
|
||||
39,
|
||||
12,
|
||||
20,
|
||||
57,
|
||||
64,
|
||||
95
|
||||
],
|
||||
"TE312": [
|
||||
22,
|
||||
46,
|
||||
93,
|
||||
69,
|
||||
44,
|
||||
3,
|
||||
62,
|
||||
49,
|
||||
4,
|
||||
18,
|
||||
87,
|
||||
76,
|
||||
36,
|
||||
16,
|
||||
50,
|
||||
36,
|
||||
54,
|
||||
90,
|
||||
1,
|
||||
66,
|
||||
68
|
||||
]
|
||||
},
|
||||
"kilnTempBottomT2": {
|
||||
"TE319": [
|
||||
48,
|
||||
56,
|
||||
40,
|
||||
44,
|
||||
31,
|
||||
82,
|
||||
35,
|
||||
36,
|
||||
0,
|
||||
84,
|
||||
49,
|
||||
38,
|
||||
28,
|
||||
34,
|
||||
98,
|
||||
60,
|
||||
4,
|
||||
69,
|
||||
15,
|
||||
86,
|
||||
19
|
||||
],
|
||||
"TE318": [
|
||||
7,
|
||||
30,
|
||||
57,
|
||||
78,
|
||||
47,
|
||||
99,
|
||||
1,
|
||||
98,
|
||||
47,
|
||||
86,
|
||||
55,
|
||||
10,
|
||||
98,
|
||||
27,
|
||||
97,
|
||||
85,
|
||||
54,
|
||||
41,
|
||||
27,
|
||||
85,
|
||||
44
|
||||
],
|
||||
"TE317": [
|
||||
72,
|
||||
13,
|
||||
7,
|
||||
69,
|
||||
77,
|
||||
36,
|
||||
6,
|
||||
34,
|
||||
97,
|
||||
48,
|
||||
75,
|
||||
29,
|
||||
75,
|
||||
4,
|
||||
70,
|
||||
80,
|
||||
31,
|
||||
10,
|
||||
39,
|
||||
86,
|
||||
52
|
||||
],
|
||||
"TE321": [
|
||||
6,
|
||||
60,
|
||||
32,
|
||||
19,
|
||||
79,
|
||||
99,
|
||||
98,
|
||||
81,
|
||||
82,
|
||||
68,
|
||||
3,
|
||||
94,
|
||||
7,
|
||||
29,
|
||||
48,
|
||||
52,
|
||||
36,
|
||||
59,
|
||||
28,
|
||||
77,
|
||||
17
|
||||
],
|
||||
"TE320": [
|
||||
23,
|
||||
47,
|
||||
4,
|
||||
15,
|
||||
7,
|
||||
74,
|
||||
75,
|
||||
60,
|
||||
78,
|
||||
89,
|
||||
15,
|
||||
95,
|
||||
74,
|
||||
85,
|
||||
20,
|
||||
48,
|
||||
79,
|
||||
51,
|
||||
63,
|
||||
82,
|
||||
68
|
||||
]
|
||||
}
|
||||
},
|
||||
"kilnTop": {
|
||||
"kilnTempTopT2": {
|
||||
"TE215": [
|
||||
81,
|
||||
12,
|
||||
86,
|
||||
55,
|
||||
50,
|
||||
59,
|
||||
20,
|
||||
67,
|
||||
66,
|
||||
29,
|
||||
17,
|
||||
74,
|
||||
11,
|
||||
12,
|
||||
63,
|
||||
23,
|
||||
34,
|
||||
86,
|
||||
9,
|
||||
38,
|
||||
99,
|
||||
3,
|
||||
33,
|
||||
77
|
||||
],
|
||||
"TE214": [
|
||||
51,
|
||||
12,
|
||||
49,
|
||||
60,
|
||||
3,
|
||||
67,
|
||||
95,
|
||||
62,
|
||||
22,
|
||||
89,
|
||||
69,
|
||||
14,
|
||||
41,
|
||||
79,
|
||||
77,
|
||||
27,
|
||||
26,
|
||||
34,
|
||||
69,
|
||||
44,
|
||||
89,
|
||||
86,
|
||||
92,
|
||||
1
|
||||
],
|
||||
"TE213": [
|
||||
76,
|
||||
14,
|
||||
35,
|
||||
1,
|
||||
36,
|
||||
67,
|
||||
40,
|
||||
5,
|
||||
53,
|
||||
98,
|
||||
46,
|
||||
29,
|
||||
71,
|
||||
12,
|
||||
43,
|
||||
42,
|
||||
53,
|
||||
56,
|
||||
9,
|
||||
17,
|
||||
34,
|
||||
42,
|
||||
82,
|
||||
73
|
||||
]
|
||||
},
|
||||
"kilnTempTopT1": {
|
||||
"TE209": [
|
||||
51,
|
||||
12,
|
||||
49,
|
||||
60,
|
||||
3,
|
||||
67,
|
||||
95,
|
||||
62,
|
||||
22,
|
||||
89,
|
||||
69,
|
||||
14,
|
||||
41,
|
||||
79,
|
||||
77,
|
||||
27,
|
||||
26,
|
||||
34,
|
||||
69,
|
||||
44,
|
||||
89,
|
||||
86,
|
||||
92,
|
||||
1
|
||||
],
|
||||
"TE208": [
|
||||
76,
|
||||
14,
|
||||
35,
|
||||
1,
|
||||
36,
|
||||
67,
|
||||
40,
|
||||
5,
|
||||
53,
|
||||
98,
|
||||
46,
|
||||
29,
|
||||
71,
|
||||
12,
|
||||
43,
|
||||
42,
|
||||
53,
|
||||
56,
|
||||
9,
|
||||
17,
|
||||
34,
|
||||
42,
|
||||
82,
|
||||
73
|
||||
],
|
||||
"TE210": [
|
||||
81,
|
||||
12,
|
||||
86,
|
||||
55,
|
||||
50,
|
||||
59,
|
||||
20,
|
||||
67,
|
||||
66,
|
||||
29,
|
||||
17,
|
||||
74,
|
||||
11,
|
||||
12,
|
||||
63,
|
||||
23,
|
||||
34,
|
||||
86,
|
||||
9,
|
||||
38,
|
||||
99,
|
||||
3,
|
||||
33,
|
||||
77
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
67
src/components/yx-dark/socket-server/index.ts
Normal file
67
src/components/yx-dark/socket-server/index.ts
Normal file
@ -0,0 +1,67 @@
|
||||
import { WebSocket, WebSocketServer } from "ws";
|
||||
import demoData from "./demo.json";
|
||||
|
||||
const wss = new WebSocketServer({ port: 9800 });
|
||||
const frequency = 3; // seconds
|
||||
wss.on("connection", function (ws, req) {
|
||||
// console.log("ws", ws);
|
||||
console.log(
|
||||
"Client in: ",
|
||||
req.socket.remoteAddress,
|
||||
"current users:",
|
||||
wss.clients.size
|
||||
);
|
||||
// ws.on("error", console.error);
|
||||
// ws.emit("message", "connected");
|
||||
ws.on("open", function () {
|
||||
console.log("connected");
|
||||
ws.send("connected");
|
||||
});
|
||||
ws.on("message", function (msg) {
|
||||
console.log("message from client", msg);
|
||||
ws.send("echo " + msg.toString());
|
||||
});
|
||||
ws.on("error", console.error);
|
||||
|
||||
const timer = setInterval(() => {
|
||||
sendMsg(ws, "base-info");
|
||||
sendMsg(ws, "fan");
|
||||
sendMsg(ws, "gas");
|
||||
sendMsg(ws, "kiln-top");
|
||||
sendMsg(ws, "kiln-bottom");
|
||||
}, frequency * 1000);
|
||||
|
||||
ws.on("close", function () {
|
||||
console.log("停止监听");
|
||||
clearInterval(timer);
|
||||
});
|
||||
});
|
||||
|
||||
type MsgType = "base-info" | "fan" | "gas" | "kiln-top" | "kiln-bottom";
|
||||
|
||||
function sendMsg(ws: WebSocket, type: MsgType) {
|
||||
let data: any;
|
||||
switch (type) {
|
||||
case "base-info":
|
||||
data = demoData.baseInfo;
|
||||
break;
|
||||
case "fan":
|
||||
data = demoData.fan;
|
||||
break;
|
||||
case "gas":
|
||||
data = demoData.gas;
|
||||
break;
|
||||
case "kiln-top":
|
||||
data = demoData.kilnTop;
|
||||
break;
|
||||
case "kiln-bottom":
|
||||
data = demoData.kilnBottom;
|
||||
break;
|
||||
default:
|
||||
data = "You are connected!";
|
||||
break;
|
||||
}
|
||||
// console.log("sendMsg: ", ws);
|
||||
// ws.emit("message", JSON.stringify(data));
|
||||
ws.send(JSON.stringify(data));
|
||||
}
|
||||
109
src/components/yx-dark/socket-server/tsconfig.json
Normal file
109
src/components/yx-dark/socket-server/tsconfig.json
Normal file
@ -0,0 +1,109 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig to read more about this file */
|
||||
|
||||
/* Projects */
|
||||
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
|
||||
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
|
||||
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
|
||||
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||
|
||||
/* Language and Environment */
|
||||
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
|
||||
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
||||
// "jsx": "preserve", /* Specify what JSX code is generated. */
|
||||
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
|
||||
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
|
||||
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
|
||||
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
|
||||
|
||||
/* Modules */
|
||||
"module": "commonjs", /* Specify what module code is generated. */
|
||||
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
|
||||
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
||||
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
||||
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
|
||||
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
|
||||
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
|
||||
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
|
||||
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
|
||||
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
|
||||
"resolveJsonModule": true, /* Enable importing .json files. */
|
||||
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
|
||||
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
|
||||
|
||||
/* JavaScript Support */
|
||||
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
|
||||
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
||||
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
|
||||
|
||||
/* Emit */
|
||||
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
||||
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
||||
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
|
||||
// "outDir": "./", /* Specify an output folder for all emitted files. */
|
||||
// "removeComments": true, /* Disable emitting comments. */
|
||||
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
||||
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
|
||||
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
||||
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
|
||||
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
|
||||
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
||||
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
|
||||
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
|
||||
|
||||
/* Interop Constraints */
|
||||
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
||||
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
||||
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
|
||||
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
|
||||
|
||||
/* Type Checking */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
|
||||
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
|
||||
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
|
||||
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
|
||||
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
|
||||
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
|
||||
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
|
||||
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
|
||||
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
|
||||
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||
|
||||
/* Completeness */
|
||||
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||
}
|
||||
}
|
||||
@ -39,7 +39,8 @@ function handleClose(data) {
|
||||
|
||||
|
||||
export default class WsClient {
|
||||
static wsServer = 'ws://172.16.1.112:8081/dz-screen/websocket/1'
|
||||
// static wsServer = 'ws://172.16.1.112:8081/dz-screen/websocket/1'
|
||||
static wsServer = 'ws://127.0.0.1:9800'
|
||||
// static wsServer = 'ws://m306416y13.yicp.fun:48978/dz-screen/websocket/1'
|
||||
static tableMap = {
|
||||
// 窑顶温度
|
||||
|
||||
@ -23,6 +23,8 @@ import LeftSide from "./LeftSide.vue";
|
||||
import RightSide from "./RightSide.vue";
|
||||
import MainPanel from "./MainPanel.vue";
|
||||
|
||||
import WsClient from "../utils/wsClass";
|
||||
|
||||
export default {
|
||||
name: "HomeView",
|
||||
components: { BigHeader, Main, LeftSide, RightSide, MainPanel },
|
||||
@ -42,6 +44,10 @@ export default {
|
||||
};
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// const wsc = new WsClient(this);
|
||||
// wsc.registerListeners();
|
||||
},
|
||||
mounted() {
|
||||
const slider = document.createElement("div");
|
||||
slider.id = "slider";
|
||||
|
||||
26
yarn.lock
26
yarn.lock
@ -1198,10 +1198,10 @@
|
||||
"resolved" "https://registry.npmmirror.com/@types/minimist/-/minimist-1.2.2.tgz"
|
||||
"version" "1.2.2"
|
||||
|
||||
"@types/node@*":
|
||||
"integrity" "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A=="
|
||||
"resolved" "https://registry.npmmirror.com/@types/node/-/node-20.1.0.tgz"
|
||||
"version" "20.1.0"
|
||||
"@types/node@*", "@types/node@^20.6.0":
|
||||
"integrity" "sha512-najjVq5KN2vsH2U/xyh2opaSEz6cZMR2SetLIlxlj08nOcmPOemJmUK2o4kUzfLqfrWE0PIrNeE16XhYDd3nqg=="
|
||||
"resolved" "https://registry.npmjs.org/@types/node/-/node-20.6.0.tgz"
|
||||
"version" "20.6.0"
|
||||
|
||||
"@types/normalize-package-data@^2.4.0":
|
||||
"integrity" "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw=="
|
||||
@ -1258,10 +1258,10 @@
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/ws@^8.5.1":
|
||||
"integrity" "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg=="
|
||||
"resolved" "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz"
|
||||
"version" "8.5.4"
|
||||
"@types/ws@^8.5.1", "@types/ws@^8.5.5":
|
||||
"integrity" "sha512-lwhs8hktwxSjf9UaZ9tG5M03PGogvFaH8gUgLNbN9HKIg0dvv6q+gkSuJ8HN4/VbyxkuLzCjlN7GquQ0gUJfIg=="
|
||||
"resolved" "https://registry.npmjs.org/@types/ws/-/ws-8.5.5.tgz"
|
||||
"version" "8.5.5"
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
@ -5573,13 +5573,13 @@
|
||||
|
||||
"ws@^7.3.1":
|
||||
"integrity" "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
|
||||
"resolved" "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz"
|
||||
"resolved" "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz"
|
||||
"version" "7.5.9"
|
||||
|
||||
"ws@^8.13.0":
|
||||
"integrity" "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA=="
|
||||
"resolved" "https://registry.npmmirror.com/ws/-/ws-8.13.0.tgz"
|
||||
"version" "8.13.0"
|
||||
"ws@^8.13.0", "ws@^8.14.1":
|
||||
"integrity" "sha512-4OOseMUq8AzRBI/7SLMUwO+FEDnguetSk7KMb1sHwvF2w2Wv5Hoj0nlifx8vtGsftE/jWHojPy8sMMzYLJ2G/A=="
|
||||
"resolved" "https://registry.npmjs.org/ws/-/ws-8.14.1.tgz"
|
||||
"version" "8.14.1"
|
||||
|
||||
"y18n@^5.0.5":
|
||||
"integrity" "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
|
||||
|
||||
Loading…
Reference in New Issue
Block a user