Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 6cbabb7691 | |||
| fd0985868c | |||
| 2c0e0f8fd6 | |||
| ba68b34879 | |||
| 65055dd49c | |||
| b3bae7b635 | |||
| 1743bc24d3 | |||
| 8010b93fe9 | |||
| bfeec6db62 | |||
| d23215c3d6 | |||
| 3b270eb50f | |||
| 30bd1f06ed | |||
| 86bc094b89 | |||
| 2c2790a473 | |||
| 168f4af5fc |
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 6.3 MiB After Width: | Height: | Size: 6.3 MiB |
BIN
src/assets/bottom-bg.png
Normal file
BIN
src/assets/bottom-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 520 KiB |
BIN
src/assets/digit-bg.png
Normal file
BIN
src/assets/digit-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 141 KiB After Width: | Height: | Size: 309 KiB |
BIN
src/assets/icon-1.png
Normal file
BIN
src/assets/icon-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
src/assets/icon-2.png
Normal file
BIN
src/assets/icon-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
src/assets/icon-3.png
Normal file
BIN
src/assets/icon-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/icon-4.png
Normal file
BIN
src/assets/icon-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
src/assets/icon-gas.png
Normal file
BIN
src/assets/icon-gas.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/icon-kiln-bottom.png
Normal file
BIN
src/assets/icon-kiln-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/icon-kiln-top.png
Normal file
BIN
src/assets/icon-kiln-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/icon-left-bottom.png
Normal file
BIN
src/assets/icon-left-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/icon-left-middle.png
Normal file
BIN
src/assets/icon-left-middle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/icon-right-bottom.png
Normal file
BIN
src/assets/icon-right-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/icon-right-top.png
Normal file
BIN
src/assets/icon-right-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
src/assets/left-middle-bg.png
Normal file
BIN
src/assets/left-middle-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 404 KiB |
BIN
src/assets/left-top-bg.png
Normal file
BIN
src/assets/left-top-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 8.2 KiB |
BIN
src/assets/main-area-bg.png
Normal file
BIN
src/assets/main-area-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 MiB |
BIN
src/assets/rect-bg.png
Normal file
BIN
src/assets/rect-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
BIN
src/assets/right-top-bg.png
Normal file
BIN
src/assets/right-top-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 650 KiB |
@ -1,27 +1,27 @@
|
||||
<template>
|
||||
<header class="header relative">
|
||||
<header class="header">
|
||||
<div>
|
||||
<span class="header--logo">
|
||||
<!-- <img src="../../assets/logo.png" alt="logo"> -->
|
||||
</span>
|
||||
<h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
|
||||
<h1>宜兴三期生产线大数据指挥中心</h1>
|
||||
</div>
|
||||
<span class="header--wing absolute company"></span>
|
||||
<span class="header--wing absolute datetime">
|
||||
{{ moment(today).format('YYYY.M.D dddd HH:mm:ss') }}
|
||||
{{ moment(today).format("YYYY.M.D dddd HH:mm:ss") }}
|
||||
</span>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import moment from "moment";
|
||||
export default {
|
||||
name: "Header",
|
||||
data() {
|
||||
return {
|
||||
today: new Date(),
|
||||
time: "00:00:00",
|
||||
moment
|
||||
moment,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -41,10 +41,10 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
moment.locale('zh-cn')
|
||||
moment.locale("zh-cn");
|
||||
// this.time = this.getTime().join(":");
|
||||
setInterval(() => {
|
||||
this.today = new Date()
|
||||
this.today = new Date();
|
||||
// this.time = this.getTime().join(":");
|
||||
}, 1000);
|
||||
},
|
||||
@ -66,33 +66,37 @@ export default {
|
||||
@import "../../assets/styles/variables";
|
||||
|
||||
header {
|
||||
background: url(../../assets/header.png) center/contain no-repeat;
|
||||
background-size: 100%;
|
||||
height: adjust(h(280px));
|
||||
width: adjust($actual_width);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
background: url(../../assets/header.png) no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
// background-size: 100%;
|
||||
height: 146px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: adjust(10px);
|
||||
margin-bottom: 0;
|
||||
|
||||
.header--logo {
|
||||
width: adjust(102px);
|
||||
height: adjust(56px);
|
||||
margin-top: 12px;
|
||||
width: 64px;
|
||||
height: 94px;
|
||||
background: url(../../assets/logo.png) center/contain no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-left: adjust(20px);
|
||||
font-size: adjust(35px);
|
||||
// line-height: adjust(100px);
|
||||
// background: #eee;
|
||||
margin-left: 36px;
|
||||
font-size: 72px;
|
||||
user-select: none;
|
||||
letter-spacing: adjust(8px);
|
||||
font-weight: 600;
|
||||
// color: #6bf2ff;
|
||||
letter-spacing: 14px;
|
||||
font-weight: 400;
|
||||
color: $main-color;
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
}
|
||||
@ -101,25 +105,26 @@ header {
|
||||
|
||||
.header--wing {
|
||||
left: 0;
|
||||
bottom: adjust(10px);
|
||||
height: adjust(h(78px));
|
||||
bottom: -20px;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.company {
|
||||
margin-left: adjust(w(1460px));
|
||||
width: adjust(w(1320px));
|
||||
height: adjust(h(48px));
|
||||
margin-left: 1458px;
|
||||
width: 768px;
|
||||
height: 67px;
|
||||
background: url("../../assets/company.png") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.datetime {
|
||||
color: $main-color;
|
||||
font-size: adjust(26px);
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
// display: inline-block;
|
||||
margin-left: adjust(w(6150px));
|
||||
width: adjust(w(1320px));
|
||||
height: adjust(h(48px));
|
||||
left: unset;
|
||||
right: 1573px;
|
||||
width: 646px;
|
||||
height: 67px;
|
||||
background: url("../../assets/date.png") center/cover no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
169
src/components/yx-dark/chart/gradientChart.vue
Normal file
169
src/components/yx-dark/chart/gradientChart.vue
Normal file
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="bar-chart" :id="id"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts/core";
|
||||
import { BarChart } 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,
|
||||
BarChart,
|
||||
LabelLayout,
|
||||
UniversalTransition,
|
||||
CanvasRenderer,
|
||||
]);
|
||||
|
||||
export default {
|
||||
name: "GradientChart",
|
||||
props: {
|
||||
series: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: Math.random().toString(),
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
series: {
|
||||
deep: true,
|
||||
handler: function () {
|
||||
console.log("BarChart: 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: 32,
|
||||
left: 56,
|
||||
bottom: 36,
|
||||
right: 20,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.updateXAxis(),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff9",
|
||||
fontSize: 16,
|
||||
lineHeight: 2,
|
||||
margin: 12,
|
||||
rotate: 30,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
// name: "单位/℃",
|
||||
// nameTextStyle: {
|
||||
// color: "#fff9",
|
||||
// fontSize: adjust(8),
|
||||
// align: "right",
|
||||
// },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: "{value} ℃",
|
||||
color: "#fff9",
|
||||
fontSize: 16,
|
||||
lineHeight: 2,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
// data: [100, 200, 300, 400, 500],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// data: this.series,
|
||||
data: Array(24)
|
||||
.fill(1)
|
||||
.map(() => {
|
||||
let v = Math.ceil(Math.random() * 100);
|
||||
while (v < 60) {
|
||||
v = Math.ceil(Math.random() * 100);
|
||||
}
|
||||
return v;
|
||||
}),
|
||||
type: "bar",
|
||||
barWidth: 8,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
color: "#eee8",
|
||||
position: "topRight",
|
||||
rotate: 90,
|
||||
offset: [5, 0],
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: "#A0FF49" },
|
||||
{ offset: 0.35, color: "#49FF9A" },
|
||||
{ offset: 0.7, color: "#49F2FF" },
|
||||
{ offset: 1, color: "#0D6FFF" },
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bar-chart {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
70
src/components/yx-dark/containers/chart.vue
Normal file
70
src/components/yx-dark/containers/chart.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<!--
|
||||
filename: chart.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 13:53:04
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<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: { LineChart },
|
||||
props: ["data-source"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["oilTable1", "oilTable2"]),
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.yx-dark-chart {
|
||||
height: 100%;
|
||||
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>
|
||||
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="table-frequence" :class="cls">{{ value }}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TableFrequence",
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: '未运行'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cls: {
|
||||
'valid': this.value !== '未运行'
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-frequence {
|
||||
font-family: Ubuntu, sans-serif !important;
|
||||
}
|
||||
|
||||
.valid {
|
||||
color: #30e89a;
|
||||
}
|
||||
</style>
|
||||
53
src/components/yx-dark/containers/components/TableStatus.vue
Normal file
53
src/components/yx-dark/containers/components/TableStatus.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="table-status" :class="cls">{{ value }}</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TableFrequence",
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: "正常",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cls: {
|
||||
invalid: this.value !== "正常",
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table-status {
|
||||
/* font-family: Ubuntu, sans-serif !important; */
|
||||
color: #3984ff;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-status::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 4px;
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 200px;
|
||||
background: #3984ff;
|
||||
box-shadow: 0px 0px 4px 4px rgba(39, 96, 255, 0.5);
|
||||
}
|
||||
|
||||
.invalid {
|
||||
color: #ff0c0c;
|
||||
}
|
||||
|
||||
.invalid::after {
|
||||
background: #ff0c0c;
|
||||
box-shadow: 0px 0px 4px 4px rgba(255, 39, 39, 0.5);
|
||||
}
|
||||
</style>
|
||||
100
src/components/yx-dark/containers/rect.vue
Normal file
100
src/components/yx-dark/containers/rect.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<!--
|
||||
filename: rect.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 10:02:48
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="rect-container">
|
||||
<section class="title" v-if="title">
|
||||
<span class="icon" v-if="icon" :class="icon"></span>
|
||||
<span class="title__value">{{ title }}</span>
|
||||
</section>
|
||||
<section class="content">
|
||||
<slot />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "RectContainer",
|
||||
components: {},
|
||||
props: ["icon", "title"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.rect-container {
|
||||
// background: url(../../../assets/rect-bg.png) no-repeat 100% / contain; // rgba(45, 230, 196, 0.8);
|
||||
padding: 24px;
|
||||
// width: 624px;
|
||||
// height: 304px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
section.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.title__value {
|
||||
font-size: 24px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1;
|
||||
color: #7ffff5;
|
||||
}
|
||||
|
||||
section.content {
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.icon-left-middle {
|
||||
background: url(../../../assets/icon-left-middle.png) no-repeat 100% / contain;
|
||||
}
|
||||
|
||||
.icon-left-bottom {
|
||||
background: url(../../../assets/icon-left-bottom.png) no-repeat 100% / contain;
|
||||
}
|
||||
|
||||
.icon-gas {
|
||||
background: url(../../../assets/icon-gas.png) no-repeat 100% / contain;
|
||||
}
|
||||
|
||||
.icon-kiln-top {
|
||||
background: url(../../../assets/icon-kiln-top.png) no-repeat 100% / contain;
|
||||
}
|
||||
|
||||
.icon-kiln-bottom {
|
||||
background: url(../../../assets/icon-kiln-bottom.png) no-repeat 100% / contain;
|
||||
}
|
||||
|
||||
.icon-right-bottom {
|
||||
background: url(../../../assets/icon-right-bottom.png) no-repeat 100% /
|
||||
contain;
|
||||
}
|
||||
|
||||
.icon-right-top {
|
||||
background: url(../../../assets/icon-right-top.png) no-repeat 100% / contain;
|
||||
}
|
||||
</style>
|
||||
237
src/components/yx-dark/containers/table.vue
Normal file
237
src/components/yx-dark/containers/table.vue
Normal file
@ -0,0 +1,237 @@
|
||||
<!--
|
||||
filename: table.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 13:52:12
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="yx-dark-tables">
|
||||
<div class="tables flex" style="height: 100%">
|
||||
<div class="table-wrapper flex-1 align-start">
|
||||
<div
|
||||
v-if="tableData1 && tableData1.length === 0"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #eee1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 24px;
|
||||
color: #eee9;
|
||||
"
|
||||
>
|
||||
无数据
|
||||
</div>
|
||||
<table class="table-1">
|
||||
<thead>
|
||||
<tr class="t-row">
|
||||
<th>序号</th>
|
||||
<th>设备名称</th>
|
||||
<th>运行频率</th>
|
||||
<th>设备状态</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<transition-group name="fan-list" tag="tbody" mode="out-in">
|
||||
<tr
|
||||
class="t-row"
|
||||
v-for="row in tableData1"
|
||||
:key="row && 'length' in row ? row[0] : Math.random()"
|
||||
>
|
||||
<td v-for="(d, idx) in row" :key="idx">
|
||||
<template v-if="idx === 2">
|
||||
<FrequentComp :value="d" />
|
||||
</template>
|
||||
<template v-else-if="idx === 3">
|
||||
<StatusComp :value="d" />
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ d }}
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</transition-group>
|
||||
<!-- </tbody> -->
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FrequentComp from "./components/TableFrequence.vue";
|
||||
import StatusComp from "./components/TableStatus.vue";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "YxDarkTables",
|
||||
|
||||
components: { FrequentComp, StatusComp },
|
||||
data() {
|
||||
return {
|
||||
tableHead: ["序号", "设备名称", "运行频率", "设备状态"],
|
||||
tableCache: [
|
||||
[16, "风机16", "未运行", "正常" /**or 0,1*/],
|
||||
[17, "风机17", "未运行", "正常" /**or 0,1*/],
|
||||
[17, "风机18", "73Hz", "正常" /**or 0,1*/],
|
||||
],
|
||||
tableData1: [
|
||||
[1, "风机1", "2332Hz", "正常" /**or 0,1*/],
|
||||
[2, "风机2", "未运行", "故障" /**or 0,1*/],
|
||||
[3, "风机3", "333Hz", "正常" /**or 0,1*/],
|
||||
[4, "风机4", "100Hz", "正常" /**or 0,1*/],
|
||||
[5, "风机5", "未运行", "正常" /**or 0,1*/],
|
||||
[6, "风机6", "未运行", "故障" /**or 0,1*/],
|
||||
[7, "风机7", "3000Hz", "正常" /**or 0,1*/],
|
||||
[8, "风机8", "未运行", "正常" /**or 0,1*/],
|
||||
[9, "风机9", "未运行", "正常" /**or 0,1*/],
|
||||
[10, "风机10", "86423Hz", "正常" /**or 0,1*/],
|
||||
[11, "风机11", "未运行", "正常" /**or 0,1*/],
|
||||
[12, "风机12", "未运行", "正常" /**or 0,1*/],
|
||||
[13, "风机13", "73Hz", "正常" /**or 0,1*/],
|
||||
[14, "风机14", "未运行", "正常" /**or 0,1*/],
|
||||
[15, "风机15", "未运行", "正常" /**or 0,1*/],
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["fan"]),
|
||||
},
|
||||
watch: {
|
||||
// fan: {
|
||||
// handler: function (data) {
|
||||
// if (!data) return;
|
||||
// let idx = 0;
|
||||
// this.tableData1 = data.slice(0, 10).map((item, index) => {
|
||||
// idx += 1;
|
||||
// return [idx, ...item];
|
||||
// });
|
||||
// this.tableCache = data
|
||||
// .slice(10)
|
||||
// .map((item, index) => [index + 1 + idx, ...item]);
|
||||
// },
|
||||
// deep: true,
|
||||
// immediate: true,
|
||||
// },
|
||||
},
|
||||
mounted() {
|
||||
setInterval(() => {
|
||||
const inData = this.tableCache.shift();
|
||||
const outData = this.tableData1.shift();
|
||||
setTimeout(() => {
|
||||
if (inData) this.tableData1.splice(this.tableData1.length, 0, inData);
|
||||
}, 200);
|
||||
if (outData) this.tableCache.push(outData);
|
||||
}, 3000);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.yx-dark-tables {
|
||||
height: 100%;
|
||||
// background: #fff3;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
background: #eee1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
width: 6px;
|
||||
border-radius: 8px;
|
||||
background: #eee3;
|
||||
}
|
||||
|
||||
.fan-list-enter-active,
|
||||
.fan-list-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
// .fan-list-leave-move {
|
||||
// transition: all 1s;
|
||||
// }
|
||||
|
||||
.fan-list-enter,
|
||||
.fan-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
margin: 0 6px;
|
||||
width: 6px;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#6fe2ff,
|
||||
#52cbef80,
|
||||
transparent,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.table-wrapper {
|
||||
// padding-right: 6px;
|
||||
// height: 480px;
|
||||
height: 100%;
|
||||
// overflow-y: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-spacing: 2px;
|
||||
}
|
||||
|
||||
// tr, td, th {
|
||||
// max-height: 13.88px !important;
|
||||
// }
|
||||
|
||||
.t-row {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.tables > table {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
thead > tr th:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
thead > tr th {
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
padding: 6px 16px;
|
||||
font-weight: 400;
|
||||
background: #044a8446;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tbody > tr:nth-child(odd) {
|
||||
background: #0b549960;
|
||||
}
|
||||
|
||||
tbody > tr td {
|
||||
font-size: 20px;
|
||||
line-height: 1.25;
|
||||
padding: 4px 16px;
|
||||
font-weight: 400;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
tbody > tr td:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
130
src/components/yx-dark/layout/Header.vue
Normal file
130
src/components/yx-dark/layout/Header.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div>
|
||||
<span class="header--logo">
|
||||
<!-- <img src="../../assets/logo.png" alt="logo"> -->
|
||||
</span>
|
||||
<h1>宜兴三期生产线大数据指挥中心</h1>
|
||||
</div>
|
||||
<span class="header--wing absolute company"></span>
|
||||
<span class="header--wing absolute datetime">
|
||||
{{ moment(today).format("YYYY.M.D dddd HH:mm:ss") }}
|
||||
</span>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment";
|
||||
export default {
|
||||
name: "Header",
|
||||
data() {
|
||||
return {
|
||||
today: new Date(),
|
||||
time: "00:00:00",
|
||||
moment,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
date() {
|
||||
return this.today.toLocaleDateString().replaceAll("/", ".");
|
||||
},
|
||||
week() {
|
||||
return [
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六",
|
||||
][this.today.getDay()];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
moment.locale("zh-cn");
|
||||
// this.time = this.getTime().join(":");
|
||||
setInterval(() => {
|
||||
this.today = new Date();
|
||||
// this.time = this.getTime().join(":");
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
getTime() {
|
||||
const now = new Date();
|
||||
return [
|
||||
now.getHours() < 10 ? "0" + now.getHours() : now.getHours() + "",
|
||||
now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes() + "",
|
||||
now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds() + "",
|
||||
];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../../assets/styles/functions";
|
||||
@import "../../../assets/styles/variables";
|
||||
|
||||
header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
background: url(../../../assets/header.png) no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
// background-size: 100%;
|
||||
height: 146px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
|
||||
.header--logo {
|
||||
margin-top: 12px;
|
||||
width: 64px;
|
||||
height: 94px;
|
||||
background: url(../../../assets/logo.png) center/contain no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-left: 36px;
|
||||
font-size: 72px;
|
||||
user-select: none;
|
||||
letter-spacing: 14px;
|
||||
font-weight: 400;
|
||||
color: $main-color;
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header--wing {
|
||||
left: 0;
|
||||
bottom: -20px;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.company {
|
||||
margin-left: 1458px;
|
||||
width: 768px;
|
||||
height: 67px;
|
||||
background: url("../../../assets/company.png") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.datetime {
|
||||
color: $main-color;
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
// display: inline-block;
|
||||
left: unset;
|
||||
right: 1573px;
|
||||
width: 646px;
|
||||
height: 67px;
|
||||
background: url("../../../assets/date.png") center/cover no-repeat;
|
||||
}
|
||||
</style>
|
||||
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. */
|
||||
}
|
||||
}
|
||||
101
src/components/yx-dark/widget/baseInfo/baseInfoContainer.vue
Normal file
101
src/components/yx-dark/widget/baseInfo/baseInfoContainer.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<!--
|
||||
filename: widgetContainer.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 13:31:18
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="yx-dark-widget-container">
|
||||
<div class="icon" :class="iconClass"></div>
|
||||
<div class="content">
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="value">{{ value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "YxDarkWidgetContainer",
|
||||
components: {},
|
||||
props: ["title", "value", "icon"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
iconClass() {
|
||||
switch (this.icon) {
|
||||
case "1":
|
||||
return "icon-1";
|
||||
case "2":
|
||||
return "icon-2";
|
||||
case "3":
|
||||
return "icon-3";
|
||||
case "4":
|
||||
return "icon-4";
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.yx-dark-widget-container {
|
||||
width: 200px;
|
||||
height: 98px;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 0 17px 0 #fff8;
|
||||
// background: url(../../../assets/) 100% / contain no-repeat;
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
background: #cfcfff;
|
||||
// background: url(../../../assets/) 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.content {
|
||||
// padding-left: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: center;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 14px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
color: #fffa;
|
||||
}
|
||||
|
||||
.value {
|
||||
padding-top: 10px;
|
||||
font-size: 32px;
|
||||
line-height: 34px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-1 {
|
||||
background: url(../../../../assets/icon-1.png) 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.icon-2 {
|
||||
background: url(../../../../assets/icon-2.png) 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.icon-3 {
|
||||
background: url(../../../../assets/icon-3.png) 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.icon-4 {
|
||||
background: url(../../../../assets/icon-4.png) 100% / contain no-repeat;
|
||||
}
|
||||
</style>
|
||||
41
src/components/yx-dark/widget/baseInfo/index.vue
Normal file
41
src/components/yx-dark/widget/baseInfo/index.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 13:30:13
|
||||
description: 放在这中间的小组件
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="base-info">
|
||||
<BaseInfoContainer icon="1" title="车间温度" value="27℃" />
|
||||
<BaseInfoContainer icon="2" title="当前火向" value="东火" />
|
||||
<BaseInfoContainer icon="3" title="换火时间" value="12:23:33" />
|
||||
<BaseInfoContainer icon="4" title="剩余时间" value="6h" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseInfoContainer from "@/components/yx-dark/widget/baseInfo/baseInfoContainer.vue";
|
||||
|
||||
export default {
|
||||
name: "BaseInfo",
|
||||
components: { BaseInfoContainer },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.base-info {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
// position: absolute;
|
||||
// top: 80px;
|
||||
// left: 50%;
|
||||
// transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
65
src/components/yx-dark/widget/pressInfo/index.vue
Normal file
65
src/components/yx-dark/widget/pressInfo/index.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 16:13:14
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="yx-dark-press-info">
|
||||
<template v-for="ch in pressInfo">
|
||||
<YxDarkPressContainer
|
||||
v-if="!isDot(ch)"
|
||||
:key="ch"
|
||||
:value="ch"
|
||||
:class="{ digit: isDigit(ch) }"
|
||||
/>
|
||||
<span class="dot" v-else>.</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import YxDarkPressContainer from "./pressContainer.vue";
|
||||
export default {
|
||||
name: "YxDarkPressInfo",
|
||||
components: { YxDarkPressContainer },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
press: 12.2,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
pressInfo() {
|
||||
return ["压", "力", ...(this.press + ""), "Pa"];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isDigit(ch) {
|
||||
return ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(ch);
|
||||
},
|
||||
isDot(ch) {
|
||||
return ch === ".";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.yx-dark-press-info {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
font-family: "zcoolqingkehuangyouti-Regular", sans-serif;
|
||||
}
|
||||
|
||||
.digit {
|
||||
font-size: 80px;
|
||||
line-height: 80px;
|
||||
}
|
||||
</style>
|
||||
38
src/components/yx-dark/widget/pressInfo/pressContainer.vue
Normal file
38
src/components/yx-dark/widget/pressInfo/pressContainer.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<!--
|
||||
filename: pressContainer.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 16:10:43
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="yx-dark-press-container">
|
||||
{{ value }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "YxDarkPressContainer",
|
||||
components: {},
|
||||
props: ["value"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.yx-dark-press-container {
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
padding-left: 6px;
|
||||
font-size: 48px;
|
||||
line-height: 90px;
|
||||
font-family: "zcoolqingkehuangyouti-Regular", sans-serif;
|
||||
background: url(../../../../assets/digit-bg.png) 100% / contain no-repeat;
|
||||
}
|
||||
</style>
|
||||
65
src/components/yx-dark/widget/runtimeInfo/index.vue
Normal file
65
src/components/yx-dark/widget/runtimeInfo/index.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 16:13:14
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="yx-dark-runtime-info">
|
||||
<template v-for="ch in pressInfo">
|
||||
<YxDarkRuntimeContainer
|
||||
v-if="!isDot(ch)"
|
||||
:key="ch"
|
||||
:value="ch"
|
||||
:class="{ digit: isDigit(ch) }"
|
||||
/>
|
||||
<span class="dot" v-else>.</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import YxDarkRuntimeContainer from "./runtimeContainer.vue";
|
||||
export default {
|
||||
name: "YxDarkRuntimeInfo",
|
||||
components: { YxDarkRuntimeContainer },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
days: 122,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
pressInfo() {
|
||||
return ["运", "行", ...(this.days + ""), "天"];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
isDigit(ch) {
|
||||
return ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].includes(ch);
|
||||
},
|
||||
isDot(ch) {
|
||||
return ch === ".";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.yx-dark-runtime-info {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
font-size: 72px;
|
||||
line-height: 90px;
|
||||
font-family: "zcoolqingkehuangyouti-Regular", sans-serif;
|
||||
}
|
||||
|
||||
.digit {
|
||||
font-size: 80px;
|
||||
line-height: 80px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,38 @@
|
||||
<!--
|
||||
filename: pressContainer.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 16:10:43
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="yx-dark-runtime-container">
|
||||
{{ value }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "YxDarkRuntimeContainer",
|
||||
components: {},
|
||||
props: ["value"],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.yx-dark-runtime-container {
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
padding-left: 6px;
|
||||
font-size: 48px;
|
||||
line-height: 90px;
|
||||
font-family: "zcoolqingkehuangyouti-Regular", sans-serif;
|
||||
background: url(../../../../assets/digit-bg.png) 100% / contain no-repeat;
|
||||
}
|
||||
</style>
|
||||
73
src/components/yx-dark/widget/waterTemp/index.vue
Normal file
73
src/components/yx-dark/widget/waterTemp/index.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<!--
|
||||
filename: WaterTemp.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 10:00:10
|
||||
description: 进出口水温
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="water-temp">
|
||||
<div class="in">
|
||||
<span class="value"> {{ inValue }}<small>℃</small> </span>
|
||||
<span class="title">进口实时水温</span>
|
||||
</div>
|
||||
<div class="out">
|
||||
<span class="value"> {{ outValue }}<small>℃</small> </span>
|
||||
<span class="title">出口实时水温</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "WaterTemp",
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
inValue: 22.3,
|
||||
outValue: 23.4,
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.water-temp {
|
||||
margin-left: 12px;
|
||||
margin-top: 24px;
|
||||
width: 500px;
|
||||
// height: 120px;
|
||||
// background: #cccc;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.in,
|
||||
.out {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
color: #eff0f5;
|
||||
margin-top: 8px;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 54px;
|
||||
line-height: 48px;
|
||||
color: #eff0f5;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.value > small {
|
||||
font-size: 32px;
|
||||
}
|
||||
</style>
|
||||
@ -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 = {
|
||||
// 窑顶温度
|
||||
|
||||
@ -1,39 +1,151 @@
|
||||
<template>
|
||||
<div class="home-view">
|
||||
<BigHeader />
|
||||
<Main />
|
||||
</div>
|
||||
<!-- transform: 'scale(0.18182, 0.25)', -->
|
||||
<!-- :style="{
|
||||
transform: 'scale(0.72727, 1)',
|
||||
transformOrigin: 'top left',
|
||||
}" -->
|
||||
<div class="home-view" :style="styles">
|
||||
<!-- <div class="bg-layer"></div> -->
|
||||
<LeftSide />
|
||||
<section class="center">
|
||||
<BigHeader />
|
||||
<MainPanel style="height: 1px; flex: 1" />
|
||||
<!-- <Main /> -->
|
||||
</section>
|
||||
<RightSide />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BigHeader from '../components/layout/Header.vue'
|
||||
import Main from '../components/layout/Main.vue'
|
||||
import BigHeader from "../components/yx-dark/layout/Header.vue";
|
||||
import Main from "../components/layout/Main.vue";
|
||||
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 },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
name: "HomeView",
|
||||
components: { BigHeader, Main, LeftSide, RightSide, MainPanel },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
value: 20,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
styles() {
|
||||
let v = (this.value / 100).toFixed(2);
|
||||
return {
|
||||
// transform: `scale(${(v * 24) / 33}, ${v})`,
|
||||
transform: `scale(${v}, ${v})`,
|
||||
transformOrigin: "top left",
|
||||
};
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// const wsc = new WsClient(this);
|
||||
// wsc.registerListeners();
|
||||
},
|
||||
mounted() {
|
||||
const slider = document.createElement("div");
|
||||
slider.id = "slider";
|
||||
slider.classList.add("slider");
|
||||
const ranger = document.createElement("input");
|
||||
ranger.type = "range";
|
||||
ranger.value = this.value;
|
||||
ranger.addEventListener("input", this.handleSlide);
|
||||
slider.appendChild(ranger);
|
||||
document.body.appendChild(slider);
|
||||
|
||||
// this.$watch('value', val => {
|
||||
// ranger.value = val
|
||||
// })
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.shiftKey && e.key === "L") {
|
||||
document.getElementById("slider").classList.toggle("show");
|
||||
}
|
||||
});
|
||||
document.getElementById("slider").addEventListener("mouseleave", () => {
|
||||
setTimeout(() => {
|
||||
document.getElementById("slider").classList.remove("show");
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleSlide(e) {
|
||||
this.value = e.target.value;
|
||||
window.scroll(0, 0);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../assets/styles/functions';
|
||||
<style lang="scss">
|
||||
@import "../assets/styles/functions";
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.home-view {
|
||||
// width: 100vw;
|
||||
// height: 100vh;
|
||||
height: adjust($actual_height);
|
||||
width: adjust($actual_width);
|
||||
overflow: hidden;
|
||||
background: url(../assets/bg.png) center/cover no-repeat ;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1080px;
|
||||
width: 8640px;
|
||||
overflow: hidden;
|
||||
// background: #C9CCE5;
|
||||
background: url(../assets/bg.png) center/cover no-repeat;
|
||||
color: white;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #c9cce577;
|
||||
// background: url(../assets/bg.png) center/cover no-repeat;
|
||||
}
|
||||
|
||||
.center {
|
||||
position: relative;
|
||||
width: 6592px;
|
||||
// flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.slider {
|
||||
height: 5vh;
|
||||
width: 20vw;
|
||||
border-radius: 88px;
|
||||
box-shadow: 0 0 68px 8px rgba($color: #000000, $alpha: 0.3);
|
||||
padding: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
// bottom: 64px;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
transform: translateY(-7px);
|
||||
color: #0b58ff;
|
||||
background: #fcc;
|
||||
}
|
||||
}
|
||||
|
||||
.slider.show {
|
||||
opacity: 1;
|
||||
bottom: 64px;
|
||||
}
|
||||
</style>
|
||||
|
||||
26
src/views/LeftSide.vue
Normal file
26
src/views/LeftSide.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="left-side"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "LeftSide",
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// import
|
||||
|
||||
.left-side {
|
||||
background: #000;
|
||||
height: 1080px;
|
||||
width: 1024px;
|
||||
}
|
||||
</style>
|
||||
53
src/views/MainArea.vue
Normal file
53
src/views/MainArea.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<!--
|
||||
filename: MainArea.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 13:23:03
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="main-area">
|
||||
<PressInfo />
|
||||
<BaseInfo />
|
||||
<RuntimeInfo />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseInfo from "@/components/yx-dark/widget/baseInfo/index.vue";
|
||||
import PressInfo from "@/components/yx-dark/widget/pressInfo/index.vue";
|
||||
import RuntimeInfo from "@/components/yx-dark/widget/runtimeInfo/index.vue";
|
||||
|
||||
export default {
|
||||
name: "MainArea",
|
||||
components: { BaseInfo, PressInfo, RuntimeInfo },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main-area {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 240px;
|
||||
padding-top: 96px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.main-area::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
background: url("../assets/main-area-bg.png") 100% / 100% no-repeat;
|
||||
position: absolute;
|
||||
top: 128px;
|
||||
left: -560px;
|
||||
width: 130%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
181
src/views/MainPanel.vue
Normal file
181
src/views/MainPanel.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<!--
|
||||
filename: MainPanel.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 10:00:10
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="main-panel">
|
||||
<RectContainer class="leftTop">
|
||||
<WaterTemp />
|
||||
</RectContainer>
|
||||
<RectContainer class="leftMiddle" title="窑炉进口水温历史" icon="icon-left-middle">
|
||||
<GradientChart />
|
||||
</RectContainer>
|
||||
<!-- <RectContainer class="leftBottom">
|
||||
<ChartContainer />
|
||||
</RectContainer> -->
|
||||
|
||||
<RectContainer class="bottom-1 bg-bottom" title="油流量" icon="icon-left-bottom">
|
||||
<ChartContainer />
|
||||
</RectContainer>
|
||||
<RectContainer class="bottom-2 bg-bottom" title="天然气流量" icon="icon-gas">
|
||||
<ChartContainer />
|
||||
</RectContainer>
|
||||
<RectContainer class="bottom-3 bg-bottom" title="窑顶温度" icon="icon-kiln-top">
|
||||
<ChartContainer />
|
||||
</RectContainer>
|
||||
<RectContainer class="bottom-4 bg-bottom" title="窑底温度" icon="icon-kiln-bottom">
|
||||
<ChartContainer />
|
||||
</RectContainer>
|
||||
<RectContainer class="bottom-5 bg-bottom" title="锡槽温度" icon="icon-right-bottom">
|
||||
<ChartContainer />
|
||||
</RectContainer>
|
||||
<!-- <RectContainer class="bottom-6">
|
||||
<TablesContainer />
|
||||
</RectContainer>
|
||||
<RectContainer class="bottom-7">
|
||||
<ChartContainer />
|
||||
</RectContainer>
|
||||
<RectContainer class="bottom-8">
|
||||
<ChartContainer />
|
||||
</RectContainer> -->
|
||||
|
||||
<RectContainer class="rightTop" title="风机运行情况" icon="icon-right-top">
|
||||
<TablesContainer />
|
||||
</RectContainer>
|
||||
<!-- <RectContainer class="rightMiddle">
|
||||
<TablesContainer />
|
||||
</RectContainer>
|
||||
<RectContainer class="rightBottom">
|
||||
<ChartContainer />
|
||||
</RectContainer> -->
|
||||
|
||||
<MainArea style="grid-area: main" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RectContainer from "@/components/yx-dark/containers/rect.vue";
|
||||
import MainArea from "./MainArea.vue";
|
||||
import ChartContainer from "@/components/yx-dark/containers/chart.vue";
|
||||
import TablesContainer from "@/components/yx-dark/containers/table.vue";
|
||||
import GradientChart from "@/components/yx-dark/chart/gradientChart.vue";
|
||||
import WaterTemp from "@/components/yx-dark/widget/waterTemp/index.vue";
|
||||
|
||||
export default {
|
||||
name: "MainPanel",
|
||||
components: {
|
||||
RectContainer,
|
||||
MainArea,
|
||||
ChartContainer,
|
||||
TablesContainer,
|
||||
WaterTemp,
|
||||
GradientChart,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main-panel {
|
||||
// background: #cccc;
|
||||
padding: 0 0 14px;
|
||||
position: relative;
|
||||
// top: -28px; // 往上部偏移一点
|
||||
display: grid;
|
||||
gap: 32px;
|
||||
place-content: end center;
|
||||
// grid-auto-columns: 624px;
|
||||
// grid-auto-rows: 304px;
|
||||
// grid-template-areas:
|
||||
// "leftTop main main main main main main main main rightTop "
|
||||
// "leftMiddle main main main main main main main main rightMiddle "
|
||||
// "leftBottom BottomOne BottomTwo BottomThree BottomFour BottomFive BottomSix BottomSeven BottomEight rightBottom ";
|
||||
grid-auto-columns: 1282px;
|
||||
grid-template-rows: 215px 409px 314px;
|
||||
grid-template-areas:
|
||||
"leftTop main main main rightTop "
|
||||
"leftMiddle main main main rightTop "
|
||||
"BottomOne BottomTwo BottomThree BottomFour BottomFive ";
|
||||
}
|
||||
|
||||
.main-area {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.leftTop {
|
||||
grid-area: leftTop;
|
||||
// justify-self: end;
|
||||
width: 729px;
|
||||
background: url(../assets/left-top-bg.png) 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.leftMiddle {
|
||||
grid-area: leftMiddle;
|
||||
width: 729px;
|
||||
background: url(../assets/left-middle-bg.png) 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.bg-bottom {
|
||||
background: url(../assets/bottom-bg.png) 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.leftBottom {
|
||||
grid-area: leftBottom;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.rightTop {
|
||||
grid-area: rightTop;
|
||||
justify-self: end;
|
||||
width: 623px;
|
||||
background: url(../assets/right-top-bg.png) 100% / contain no-repeat;
|
||||
}
|
||||
|
||||
.rightMiddle {
|
||||
grid-area: rightMiddle;
|
||||
}
|
||||
|
||||
.rightBottom {
|
||||
grid-area: rightBottom;
|
||||
}
|
||||
|
||||
.bottom-1 {
|
||||
grid-area: BottomOne;
|
||||
}
|
||||
|
||||
.bottom-2 {
|
||||
grid-area: BottomTwo;
|
||||
}
|
||||
|
||||
.bottom-3 {
|
||||
grid-area: BottomThree;
|
||||
}
|
||||
|
||||
.bottom-4 {
|
||||
grid-area: BottomFour;
|
||||
}
|
||||
|
||||
.bottom-5 {
|
||||
grid-area: BottomFive;
|
||||
}
|
||||
|
||||
.bottom-6 {
|
||||
grid-area: BottomSix;
|
||||
}
|
||||
|
||||
.bottom-7 {
|
||||
grid-area: BottomSeven;
|
||||
}
|
||||
|
||||
.bottom-8 {
|
||||
grid-area: BottomEight;
|
||||
}
|
||||
</style>
|
||||
26
src/views/RightSide.vue
Normal file
26
src/views/RightSide.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="right-side"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "RightSide",
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// import
|
||||
|
||||
.right-side {
|
||||
background: #000;
|
||||
height: 1080px;
|
||||
width: 1024px;
|
||||
}
|
||||
</style>
|
||||
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