update desktop
This commit is contained in:
GeekROS
15
desktop/template/index.html
Normal file
15
desktop/template/index.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<title>GEEKCNC</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="./src/main.ts" type="module"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
35
desktop/template/package.json
Normal file
35
desktop/template/package.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"rebuild": "node-gyp rebuild",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons": "^0.0.11",
|
||||
"@element-plus/icons-vue": "^2.0.9",
|
||||
"axios": "^0.27.2",
|
||||
"element-plus": "2.3.7",
|
||||
"nosleep.js": "^0.12.0",
|
||||
"uuid": "^9.0.0",
|
||||
"vue": "^3.2.37",
|
||||
"vue-router": "^4.1.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/types": "^7.18.10",
|
||||
"@types/node": "^18.11.18",
|
||||
"@types/roslib": "^1.3.1",
|
||||
"@vitejs/plugin-vue": "^3.0.3",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"fs-extra": "^11.1.1",
|
||||
"typescript": "^4.6.4",
|
||||
"vite": "^3.0.7",
|
||||
"vue-tsc": "^0.39.5"
|
||||
}
|
||||
}
|
||||
1
desktop/template/package.json.md5
Normal file
1
desktop/template/package.json.md5
Normal file
@@ -0,0 +1 @@
|
||||
4ff77190f71bfd84a6cba9f6abd9d2e6
|
||||
BIN
desktop/template/public/favicon.ico
Normal file
BIN
desktop/template/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
0
desktop/template/public/static/.gitkeep
Normal file
0
desktop/template/public/static/.gitkeep
Normal file
79
desktop/template/src/app.vue
Normal file
79
desktop/template/src/app.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<router-view ref="routerView" v-slot="{Component}">
|
||||
<component :is="Component" :cnc="cncData" />
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {ref, defineComponent} from "vue";
|
||||
import {ElLoading} from "element-plus";
|
||||
export default defineComponent({
|
||||
name: "App",
|
||||
emits: [],
|
||||
props: [],
|
||||
components: {},
|
||||
setup(props, context) {
|
||||
|
||||
const cncData: any = ref({
|
||||
loading: ElLoading.service({
|
||||
lock: true,
|
||||
background: "rgba(0, 0, 0, .01)",
|
||||
}),
|
||||
sleep: false, // 控制休眠状态
|
||||
fullscreen: false, // 全屏状态切换
|
||||
device: {
|
||||
ip: "",
|
||||
ips: [],
|
||||
alive: false,
|
||||
timed: null,
|
||||
control: {
|
||||
port: 8000,
|
||||
socket: false,
|
||||
status: false,
|
||||
data: false
|
||||
},
|
||||
message: {
|
||||
port: 8001,
|
||||
socket: false,
|
||||
status: false,
|
||||
data: {
|
||||
basicInfo: false
|
||||
}
|
||||
},
|
||||
camera: {
|
||||
port: 8080,
|
||||
socket: false,
|
||||
status: false
|
||||
}
|
||||
},
|
||||
header: {
|
||||
dialog: {
|
||||
type: "",
|
||||
status: false,
|
||||
config: {
|
||||
title: "",
|
||||
width: "",
|
||||
close: true
|
||||
},
|
||||
form: {
|
||||
loading: false
|
||||
}
|
||||
}
|
||||
},
|
||||
navigation: {
|
||||
select: "device"
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
props,
|
||||
cncData
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "./assets/css/base.scss";
|
||||
@import "./assets/css/element.scss";
|
||||
</style>
|
||||
69
desktop/template/src/assets/css/base.scss
Normal file
69
desktop/template/src/assets/css/base.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-appearance: none;
|
||||
-webkit-touch-callout: none;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Inter, sans-serif;
|
||||
font-feature-settings: "tnum";
|
||||
font-variant: tabular-nums;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
ul li, ol li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 0;
|
||||
box-shadow: inset 0 0 3px rgba(68, 68, 71, 1);
|
||||
background: rgba(68, 68, 71, .5);
|
||||
}
|
||||
::-webkit-scrollbar-track{
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
background: rgba(68, 68, 71, 0);
|
||||
}
|
||||
|
||||
.xterm-screen{
|
||||
width: calc(100% - 10px) !important;
|
||||
}
|
||||
|
||||
.page-main{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.loading-view{
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: Consolas;
|
||||
src:url("../fonts/JetBrainsMono-Regular.woff2") format("truetype");
|
||||
font-weight: 400;
|
||||
font-style:normal
|
||||
}
|
||||
328
desktop/template/src/assets/css/element.scss
Normal file
328
desktop/template/src/assets/css/element.scss
Normal file
@@ -0,0 +1,328 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
.el-overlay, .el-overlay-dialog{
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
.el-overlay.allow{
|
||||
pointer-events:none !important;
|
||||
}
|
||||
.el-overlay.allow .el-dialog{
|
||||
pointer-events:auto !important;
|
||||
}
|
||||
|
||||
.el-empty.cnc{
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
.el-empty.cnc .el-empty__description{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.el-empty.cnc .el-empty__description p{
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.el-row.cnc .el-col{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-text.cnc{
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
}
|
||||
.el-text.cnc .el-icon{
|
||||
vertical-align: -1px;
|
||||
}
|
||||
.el-text.cnc span{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.el-dialog.cnc{
|
||||
background-color: rgba(43, 45, 48, 1);
|
||||
border: 1px solid rgba(59, 60, 61, 1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.el-dialog.cnc .el-dialog__header{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid rgba(59, 60, 61, 1);
|
||||
}
|
||||
.el-dialog.cnc .el-dialog__header:before{
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
content:" ";
|
||||
background: url("../image/logo.png") no-repeat center center;
|
||||
background-size: 50%;
|
||||
}
|
||||
.el-dialog.cnc .el-dialog__header .el-dialog__title{
|
||||
width: auto;
|
||||
height: 40px;
|
||||
line-height: 39px;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.el-dialog.cnc .el-dialog__header .el-dialog__headerbtn{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 45px;
|
||||
top: 0;
|
||||
}
|
||||
.el-dialog.cnc .el-dialog__body{
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-form.cnc .el-form-item__label{
|
||||
font-size: 12px;
|
||||
line-height: 38px;
|
||||
color: #666666;
|
||||
}
|
||||
.el-form.cnc .el-form-item:last-child{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-form.cnc .el-form-item__content .el-form-tips{
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
line-height: 22px;
|
||||
color: #999999;
|
||||
}
|
||||
.el-form.cnc .el-form-item__content{
|
||||
min-height: 38px;
|
||||
}
|
||||
.el-form.cnc .el-form-item__content .el-form-tips.first{
|
||||
margin-top: 5px;
|
||||
}
|
||||
.el-form.cnc .el-form-item__content .el-form-tips span.font{
|
||||
padding: 0 5px;
|
||||
user-select: text;
|
||||
}
|
||||
.el-form.cnc .tips{
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
.el-form.cnc .tips span{
|
||||
color: #5e4eff;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.el-form.cnc .tips span:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.el-select.cnc{
|
||||
width: auto;
|
||||
border: 0;
|
||||
}
|
||||
.el-select.cnc .el-input__wrapper{
|
||||
height: 32px !important;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
}
|
||||
.el-select.cnc .el-input__wrapper .el-input__inner{
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-select.cnc .el-input.is-focus .el-input__wrapper{
|
||||
box-shadow: none;
|
||||
}
|
||||
.el-select.cnc .el-input .el-input__wrapper.is-focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
.el-select.cnc .el-input__inner{
|
||||
color: #ffffff;
|
||||
}
|
||||
.el-select.cnc .el-input__inner::selection{
|
||||
background-color: rgba(57, 59, 64, 0);
|
||||
}
|
||||
|
||||
.el-input.cnc{
|
||||
height: 38px;
|
||||
}
|
||||
.el-input.cnc .el-input__wrapper{
|
||||
height: 38px;
|
||||
background-color: rgba(30, 31, 34, 1);
|
||||
box-shadow: none;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(59, 60, 61, .9);
|
||||
}
|
||||
.el-input.cnc .el-input__inner{
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.el-input.cnc .el-input__inner::placeholder{
|
||||
color: #666666;
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-input.cnc .el-input-group__prepend{
|
||||
height: 36px;
|
||||
background-color: rgba(30, 31, 34, 1);
|
||||
border: 1px solid rgba(59, 60, 61, .9);
|
||||
box-shadow: none;
|
||||
padding: 0 10px;
|
||||
border-right: 0;
|
||||
}
|
||||
.el-input.cnc .el-input-group__prepend span{
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-input.cnc .el-input-group__append{
|
||||
height: 36px;
|
||||
background-color: rgba(30, 31, 34, 1);
|
||||
border: 1px solid rgba(59, 60, 61, .9);
|
||||
box-shadow: none;
|
||||
padding: 0 10px;
|
||||
border-left: 0;
|
||||
}
|
||||
.el-input.cnc .el-input-group__append span{
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-input.cnc .el-input-group__append span:hover{
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-input.cnc .el-input__count .el-input__count-inner{
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.el-input.cnc .el-input-group__append .el-icon{
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-input.cnc .el-input-group__append .el-icon:hover{
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-button.cnc{
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-message.cnc{
|
||||
background-color: rgba(57, 59, 64, 1);
|
||||
border: 0;
|
||||
font-size: 12px;
|
||||
padding: 8px 15px;
|
||||
}
|
||||
.el-message.cnc .el-message__icon{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 24px;
|
||||
margin-right: 2px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 13px;
|
||||
}
|
||||
.el-message.cnc .el-message__content{
|
||||
width: auto;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.el-message-box.cnc{
|
||||
max-width: 350px !important;
|
||||
background-color: rgba(43, 45, 48, 1) !important;
|
||||
border: 1px solid rgba(59, 60, 61, 1) !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.el-message-box.cnc .el-message-box__header{
|
||||
width: 100% !important;
|
||||
height: 40px !important;
|
||||
padding: 0 !important;
|
||||
border-bottom: 1px solid rgba(59, 60, 61, 1) !important;
|
||||
}
|
||||
.el-message-box.cnc .el-message-box__header:before{
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
content:" ";
|
||||
background: url("../image/logo.png") no-repeat center center;
|
||||
background-size: 50%;
|
||||
}
|
||||
.el-message-box.cnc .el-message-box__header .el-message-box__title{
|
||||
width: auto;
|
||||
height: 40px !important;
|
||||
line-height: 39px !important;
|
||||
color: #ffffff !important;
|
||||
font-size: 12px !important;
|
||||
display: inline-block;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.el-message-box.cnc .el-message-box__header .el-message-box__headerbtn{
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
line-height: 45px !important;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
}
|
||||
.el-message-box.cnc .el-message-box__content{
|
||||
font-size: 12px !important;
|
||||
color: #999999 !important;
|
||||
padding: 10px !important;
|
||||
}
|
||||
.el-message-box.cnc .el-message-box__content .el-icon{
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.el-message-box.cnc .el-message-box__content .el-message-box__message{
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
.el-message-box.cnc .el-message-box__btns{
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
.el-message-box.cnc .el-message-box__btns .el-button:not(.el-button--primary){
|
||||
background-color: rgba(0, 0, 0, .2) !important;
|
||||
border-color: rgba(0, 0, 0, .2) !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.el-message-box.cnc .el-message-box__btns .el-button:not(.el-button--primary):hover{
|
||||
color: #999999 !important;
|
||||
}
|
||||
.el-message-box.cnc .el-message-box__btns .el-button.el-button--primary{
|
||||
background-color: #5e4eff !important;
|
||||
border-color: #5e4eff !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.el-slider.cnc .el-slider__runway{
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
.el-slider.cnc .el-slider__bar{
|
||||
background-color: #5e4eff;
|
||||
}
|
||||
.el-slider.cnc .el-slider__button-wrapper{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
top: -7px;
|
||||
}
|
||||
.el-slider.cnc .el-slider__button-wrapper .el-slider__button{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-color: #5e4eff;
|
||||
}
|
||||
.el-slider.cnc .el-slider__input{
|
||||
width: 80px;
|
||||
}
|
||||
.el-slider.cnc .el-slider__runway.show-input{
|
||||
margin-right: 15px;
|
||||
}
|
||||
.el-slider.cnc .el-input-number .el-input .el-input__wrapper{
|
||||
background-color: rgba(30, 31, 34, 1);
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(59, 60, 61, .9);
|
||||
}
|
||||
.el-slider.cnc .el-input-number .el-input .el-input__wrapper input{
|
||||
color: #999999;
|
||||
}
|
||||
BIN
desktop/template/src/assets/fonts/JetBrainsMono-Bold.woff2
Normal file
BIN
desktop/template/src/assets/fonts/JetBrainsMono-Bold.woff2
Normal file
Binary file not shown.
BIN
desktop/template/src/assets/fonts/JetBrainsMono-BoldItalic.woff2
Normal file
BIN
desktop/template/src/assets/fonts/JetBrainsMono-BoldItalic.woff2
Normal file
Binary file not shown.
BIN
desktop/template/src/assets/fonts/JetBrainsMono-ExtraBold.woff2
Normal file
BIN
desktop/template/src/assets/fonts/JetBrainsMono-ExtraBold.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
desktop/template/src/assets/fonts/JetBrainsMono-ExtraLight.woff2
Normal file
BIN
desktop/template/src/assets/fonts/JetBrainsMono-ExtraLight.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
desktop/template/src/assets/fonts/JetBrainsMono-Italic.woff2
Normal file
BIN
desktop/template/src/assets/fonts/JetBrainsMono-Italic.woff2
Normal file
Binary file not shown.
BIN
desktop/template/src/assets/fonts/JetBrainsMono-Light.woff2
Normal file
BIN
desktop/template/src/assets/fonts/JetBrainsMono-Light.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
desktop/template/src/assets/fonts/JetBrainsMono-Medium.woff2
Normal file
BIN
desktop/template/src/assets/fonts/JetBrainsMono-Medium.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
desktop/template/src/assets/fonts/JetBrainsMono-Regular.woff2
Normal file
BIN
desktop/template/src/assets/fonts/JetBrainsMono-Regular.woff2
Normal file
Binary file not shown.
BIN
desktop/template/src/assets/fonts/JetBrainsMono-SemiBold.woff2
Normal file
BIN
desktop/template/src/assets/fonts/JetBrainsMono-SemiBold.woff2
Normal file
Binary file not shown.
Binary file not shown.
BIN
desktop/template/src/assets/fonts/JetBrainsMono-Thin.woff2
Normal file
BIN
desktop/template/src/assets/fonts/JetBrainsMono-Thin.woff2
Normal file
Binary file not shown.
BIN
desktop/template/src/assets/fonts/JetBrainsMono-ThinItalic.woff2
Normal file
BIN
desktop/template/src/assets/fonts/JetBrainsMono-ThinItalic.woff2
Normal file
Binary file not shown.
BIN
desktop/template/src/assets/image/logo.png
Normal file
BIN
desktop/template/src/assets/image/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
42
desktop/template/src/main.ts
Normal file
42
desktop/template/src/main.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import {createApp} from "vue";
|
||||
import App from "./app.vue";
|
||||
import {router} from "./router";
|
||||
import ElementPlus from "element-plus";
|
||||
import "element-plus/dist/index.css";
|
||||
import * as ElIcons from "@element-plus/icons-vue";
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(ElementPlus, {zIndex: 90000});
|
||||
|
||||
for (const [key, component] of Object.entries(ElIcons)) {
|
||||
app.component(key, component);
|
||||
}
|
||||
|
||||
app.use(router);
|
||||
|
||||
app.directive("resize", {
|
||||
mounted(el, binding) {
|
||||
let _this: any = this;
|
||||
function debounce(fn: any, delay = 16) {
|
||||
let time: any = null;
|
||||
return function () {
|
||||
if (time) {
|
||||
clearTimeout(time);
|
||||
}
|
||||
const context = _this;
|
||||
const args = arguments
|
||||
time = setTimeout(function () {
|
||||
fn.apply(context, args);
|
||||
}, delay);
|
||||
}
|
||||
}
|
||||
el._resizer = new window.ResizeObserver(debounce(binding.value, Number(binding.arg) || 16));
|
||||
el._resizer.observe(el);
|
||||
},
|
||||
unmounted(el) {
|
||||
el._resizer.disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
app.mount("#app");
|
||||
3
desktop/template/src/package/device/index.ts
Normal file
3
desktop/template/src/package/device/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default ({
|
||||
|
||||
});
|
||||
16
desktop/template/src/package/network/network.ts
Normal file
16
desktop/template/src/package/network/network.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
export default ({
|
||||
status: (onload: any, onerror: any) =>{
|
||||
let image = new Image();
|
||||
image.onload = function(){
|
||||
if(typeof onload == "function"){
|
||||
onload();
|
||||
}
|
||||
};
|
||||
image.onerror = function(){
|
||||
if(typeof onerror == "function"){
|
||||
onerror();
|
||||
}
|
||||
};
|
||||
image.src = "https://cdn.geekros.com/studio/network/network.png";
|
||||
}
|
||||
});
|
||||
7
desktop/template/src/package/wailsjs/go/StartWindows/Api.d.ts
vendored
Normal file
7
desktop/template/src/package/wailsjs/go/StartWindows/Api.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
import {StartWindows} from '../models';
|
||||
|
||||
export function DeviceRequest(arg1:string,arg2:string,arg3:string,arg4:any):Promise<{[key: string]: any}>;
|
||||
|
||||
export function ServiceRequest(arg1:string,arg2:string,arg3:any,arg4:string):Promise<StartWindows.ReturnResponse>;
|
||||
11
desktop/template/src/package/wailsjs/go/StartWindows/Api.js
Normal file
11
desktop/template/src/package/wailsjs/go/StartWindows/Api.js
Normal file
@@ -0,0 +1,11 @@
|
||||
// @ts-check
|
||||
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
|
||||
// This file is automatically generated. DO NOT EDIT
|
||||
|
||||
export function DeviceRequest(arg1, arg2, arg3, arg4) {
|
||||
return window['go']['StartWindows']['Api']['DeviceRequest'](arg1, arg2, arg3, arg4);
|
||||
}
|
||||
|
||||
export function ServiceRequest(arg1, arg2, arg3, arg4) {
|
||||
return window['go']['StartWindows']['Api']['ServiceRequest'](arg1, arg2, arg3, arg4);
|
||||
}
|
||||
21
desktop/template/src/package/wailsjs/go/models.ts
Normal file
21
desktop/template/src/package/wailsjs/go/models.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
export namespace StartWindows {
|
||||
|
||||
export class ReturnResponse {
|
||||
code: number;
|
||||
data: any;
|
||||
msg: string;
|
||||
|
||||
static createFrom(source: any = {}) {
|
||||
return new ReturnResponse(source);
|
||||
}
|
||||
|
||||
constructor(source: any = {}) {
|
||||
if ('string' === typeof source) source = JSON.parse(source);
|
||||
this.code = source["code"];
|
||||
this.data = source["data"];
|
||||
this.msg = source["msg"];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
24
desktop/template/src/package/wailsjs/runtime/package.json
Normal file
24
desktop/template/src/package/wailsjs/runtime/package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "@wailsapp/runtime",
|
||||
"version": "2.0.0",
|
||||
"description": "Wails Javascript runtime library",
|
||||
"main": "runtime.js",
|
||||
"types": "runtime.d.ts",
|
||||
"scripts": {
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/wailsapp/wails.git"
|
||||
},
|
||||
"keywords": [
|
||||
"Wails",
|
||||
"Javascript",
|
||||
"Go"
|
||||
],
|
||||
"author": "Lea Anthony <lea.anthony@gmail.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/wailsapp/wails/issues"
|
||||
},
|
||||
"homepage": "https://github.com/wailsapp/wails#readme"
|
||||
}
|
||||
235
desktop/template/src/package/wailsjs/runtime/runtime.d.ts
vendored
Normal file
235
desktop/template/src/package/wailsjs/runtime/runtime.d.ts
vendored
Normal file
@@ -0,0 +1,235 @@
|
||||
/*
|
||||
_ __ _ __
|
||||
| | / /___ _(_) /____
|
||||
| | /| / / __ `/ / / ___/
|
||||
| |/ |/ / /_/ / / (__ )
|
||||
|__/|__/\__,_/_/_/____/
|
||||
The electron alternative for Go
|
||||
(c) Lea Anthony 2019-present
|
||||
*/
|
||||
|
||||
export interface Position {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export interface Size {
|
||||
w: number;
|
||||
h: number;
|
||||
}
|
||||
|
||||
export interface Screen {
|
||||
isCurrent: boolean;
|
||||
isPrimary: boolean;
|
||||
width : number
|
||||
height : number
|
||||
}
|
||||
|
||||
// Environment information such as platform, buildtype, ...
|
||||
export interface EnvironmentInfo {
|
||||
buildType: string;
|
||||
platform: string;
|
||||
arch: string;
|
||||
}
|
||||
|
||||
// [EventsEmit](https://wails.io/docs/reference/runtime/events#eventsemit)
|
||||
// emits the given event. Optional data may be passed with the event.
|
||||
// This will trigger any event listeners.
|
||||
export function EventsEmit(eventName: string, ...data: any): void;
|
||||
|
||||
// [EventsOn](https://wails.io/docs/reference/runtime/events#eventson) sets up a listener for the given event name.
|
||||
export function EventsOn(eventName: string, callback: (...data: any) => void): () => void;
|
||||
|
||||
// [EventsOnMultiple](https://wails.io/docs/reference/runtime/events#eventsonmultiple)
|
||||
// sets up a listener for the given event name, but will only trigger a given number times.
|
||||
export function EventsOnMultiple(eventName: string, callback: (...data: any) => void, maxCallbacks: number): () => void;
|
||||
|
||||
// [EventsOnce](https://wails.io/docs/reference/runtime/events#eventsonce)
|
||||
// sets up a listener for the given event name, but will only trigger once.
|
||||
export function EventsOnce(eventName: string, callback: (...data: any) => void): () => void;
|
||||
|
||||
// [EventsOff](https://wails.io/docs/reference/runtime/events#eventsoff)
|
||||
// unregisters the listener for the given event name.
|
||||
export function EventsOff(eventName: string, ...additionalEventNames: string[]): void;
|
||||
|
||||
// [EventsOffAll](https://wails.io/docs/reference/runtime/events#eventsoffall)
|
||||
// unregisters all listeners.
|
||||
export function EventsOffAll(): void;
|
||||
|
||||
// [LogPrint](https://wails.io/docs/reference/runtime/log#logprint)
|
||||
// logs the given message as a raw message
|
||||
export function LogPrint(message: string): void;
|
||||
|
||||
// [LogTrace](https://wails.io/docs/reference/runtime/log#logtrace)
|
||||
// logs the given message at the `trace` log level.
|
||||
export function LogTrace(message: string): void;
|
||||
|
||||
// [LogDebug](https://wails.io/docs/reference/runtime/log#logdebug)
|
||||
// logs the given message at the `debug` log level.
|
||||
export function LogDebug(message: string): void;
|
||||
|
||||
// [LogError](https://wails.io/docs/reference/runtime/log#logerror)
|
||||
// logs the given message at the `error` log level.
|
||||
export function LogError(message: string): void;
|
||||
|
||||
// [LogFatal](https://wails.io/docs/reference/runtime/log#logfatal)
|
||||
// logs the given message at the `fatal` log level.
|
||||
// The application will quit after calling this method.
|
||||
export function LogFatal(message: string): void;
|
||||
|
||||
// [LogInfo](https://wails.io/docs/reference/runtime/log#loginfo)
|
||||
// logs the given message at the `info` log level.
|
||||
export function LogInfo(message: string): void;
|
||||
|
||||
// [LogWarning](https://wails.io/docs/reference/runtime/log#logwarning)
|
||||
// logs the given message at the `warning` log level.
|
||||
export function LogWarning(message: string): void;
|
||||
|
||||
// [WindowReload](https://wails.io/docs/reference/runtime/window#windowreload)
|
||||
// Forces a reload by the main application as well as connected browsers.
|
||||
export function WindowReload(): void;
|
||||
|
||||
// [WindowReloadApp](https://wails.io/docs/reference/runtime/window#windowreloadapp)
|
||||
// Reloads the application frontend.
|
||||
export function WindowReloadApp(): void;
|
||||
|
||||
// [WindowSetAlwaysOnTop](https://wails.io/docs/reference/runtime/window#windowsetalwaysontop)
|
||||
// Sets the window AlwaysOnTop or not on top.
|
||||
export function WindowSetAlwaysOnTop(b: boolean): void;
|
||||
|
||||
// [WindowSetSystemDefaultTheme](https://wails.io/docs/next/reference/runtime/window#windowsetsystemdefaulttheme)
|
||||
// *Windows only*
|
||||
// Sets window theme to system default (dark/light).
|
||||
export function WindowSetSystemDefaultTheme(): void;
|
||||
|
||||
// [WindowSetLightTheme](https://wails.io/docs/next/reference/runtime/window#windowsetlighttheme)
|
||||
// *Windows only*
|
||||
// Sets window to light theme.
|
||||
export function WindowSetLightTheme(): void;
|
||||
|
||||
// [WindowSetDarkTheme](https://wails.io/docs/next/reference/runtime/window#windowsetdarktheme)
|
||||
// *Windows only*
|
||||
// Sets window to dark theme.
|
||||
export function WindowSetDarkTheme(): void;
|
||||
|
||||
// [WindowCenter](https://wails.io/docs/reference/runtime/window#windowcenter)
|
||||
// Centers the window on the monitor the window is currently on.
|
||||
export function WindowCenter(): void;
|
||||
|
||||
// [WindowSetTitle](https://wails.io/docs/reference/runtime/window#windowsettitle)
|
||||
// Sets the text in the window title bar.
|
||||
export function WindowSetTitle(title: string): void;
|
||||
|
||||
// [WindowFullscreen](https://wails.io/docs/reference/runtime/window#windowfullscreen)
|
||||
// Makes the window full screen.
|
||||
export function WindowFullscreen(): void;
|
||||
|
||||
// [WindowUnfullscreen](https://wails.io/docs/reference/runtime/window#windowunfullscreen)
|
||||
// Restores the previous window dimensions and position prior to full screen.
|
||||
export function WindowUnfullscreen(): void;
|
||||
|
||||
// [WindowIsFullscreen](https://wails.io/docs/reference/runtime/window#windowisfullscreen)
|
||||
// Returns the state of the window, i.e. whether the window is in full screen mode or not.
|
||||
export function WindowIsFullscreen(): Promise<boolean>;
|
||||
|
||||
// [WindowSetSize](https://wails.io/docs/reference/runtime/window#windowsetsize)
|
||||
// Sets the width and height of the window.
|
||||
export function WindowSetSize(width: number, height: number): Promise<Size>;
|
||||
|
||||
// [WindowGetSize](https://wails.io/docs/reference/runtime/window#windowgetsize)
|
||||
// Gets the width and height of the window.
|
||||
export function WindowGetSize(): Promise<Size>;
|
||||
|
||||
// [WindowSetMaxSize](https://wails.io/docs/reference/runtime/window#windowsetmaxsize)
|
||||
// Sets the maximum window size. Will resize the window if the window is currently larger than the given dimensions.
|
||||
// Setting a size of 0,0 will disable this constraint.
|
||||
export function WindowSetMaxSize(width: number, height: number): void;
|
||||
|
||||
// [WindowSetMinSize](https://wails.io/docs/reference/runtime/window#windowsetminsize)
|
||||
// Sets the minimum window size. Will resize the window if the window is currently smaller than the given dimensions.
|
||||
// Setting a size of 0,0 will disable this constraint.
|
||||
export function WindowSetMinSize(width: number, height: number): void;
|
||||
|
||||
// [WindowSetPosition](https://wails.io/docs/reference/runtime/window#windowsetposition)
|
||||
// Sets the window position relative to the monitor the window is currently on.
|
||||
export function WindowSetPosition(x: number, y: number): void;
|
||||
|
||||
// [WindowGetPosition](https://wails.io/docs/reference/runtime/window#windowgetposition)
|
||||
// Gets the window position relative to the monitor the window is currently on.
|
||||
export function WindowGetPosition(): Promise<Position>;
|
||||
|
||||
// [WindowHide](https://wails.io/docs/reference/runtime/window#windowhide)
|
||||
// Hides the window.
|
||||
export function WindowHide(): void;
|
||||
|
||||
// [WindowShow](https://wails.io/docs/reference/runtime/window#windowshow)
|
||||
// Shows the window, if it is currently hidden.
|
||||
export function WindowShow(): void;
|
||||
|
||||
// [WindowMaximise](https://wails.io/docs/reference/runtime/window#windowmaximise)
|
||||
// Maximises the window to fill the screen.
|
||||
export function WindowMaximise(): void;
|
||||
|
||||
// [WindowToggleMaximise](https://wails.io/docs/reference/runtime/window#windowtogglemaximise)
|
||||
// Toggles between Maximised and UnMaximised.
|
||||
export function WindowToggleMaximise(): void;
|
||||
|
||||
// [WindowUnmaximise](https://wails.io/docs/reference/runtime/window#windowunmaximise)
|
||||
// Restores the window to the dimensions and position prior to maximising.
|
||||
export function WindowUnmaximise(): void;
|
||||
|
||||
// [WindowIsMaximised](https://wails.io/docs/reference/runtime/window#windowismaximised)
|
||||
// Returns the state of the window, i.e. whether the window is maximised or not.
|
||||
export function WindowIsMaximised(): Promise<boolean>;
|
||||
|
||||
// [WindowMinimise](https://wails.io/docs/reference/runtime/window#windowminimise)
|
||||
// Minimises the window.
|
||||
export function WindowMinimise(): void;
|
||||
|
||||
// [WindowUnminimise](https://wails.io/docs/reference/runtime/window#windowunminimise)
|
||||
// Restores the window to the dimensions and position prior to minimising.
|
||||
export function WindowUnminimise(): void;
|
||||
|
||||
// [WindowIsMinimised](https://wails.io/docs/reference/runtime/window#windowisminimised)
|
||||
// Returns the state of the window, i.e. whether the window is minimised or not.
|
||||
export function WindowIsMinimised(): Promise<boolean>;
|
||||
|
||||
// [WindowIsNormal](https://wails.io/docs/reference/runtime/window#windowisnormal)
|
||||
// Returns the state of the window, i.e. whether the window is normal or not.
|
||||
export function WindowIsNormal(): Promise<boolean>;
|
||||
|
||||
// [WindowSetBackgroundColour](https://wails.io/docs/reference/runtime/window#windowsetbackgroundcolour)
|
||||
// Sets the background colour of the window to the given RGBA colour definition. This colour will show through for all transparent pixels.
|
||||
export function WindowSetBackgroundColour(R: number, G: number, B: number, A: number): void;
|
||||
|
||||
// [ScreenGetAll](https://wails.io/docs/reference/runtime/window#screengetall)
|
||||
// Gets the all screens. Call this anew each time you want to refresh data from the underlying windowing system.
|
||||
export function ScreenGetAll(): Promise<Screen[]>;
|
||||
|
||||
// [BrowserOpenURL](https://wails.io/docs/reference/runtime/browser#browseropenurl)
|
||||
// Opens the given URL in the system browser.
|
||||
export function BrowserOpenURL(url: string): void;
|
||||
|
||||
// [Environment](https://wails.io/docs/reference/runtime/intro#environment)
|
||||
// Returns information about the environment
|
||||
export function Environment(): Promise<EnvironmentInfo>;
|
||||
|
||||
// [Quit](https://wails.io/docs/reference/runtime/intro#quit)
|
||||
// Quits the application.
|
||||
export function Quit(): void;
|
||||
|
||||
// [Hide](https://wails.io/docs/reference/runtime/intro#hide)
|
||||
// Hides the application.
|
||||
export function Hide(): void;
|
||||
|
||||
// [Show](https://wails.io/docs/reference/runtime/intro#show)
|
||||
// Shows the application.
|
||||
export function Show(): void;
|
||||
|
||||
// [ClipboardGetText](https://wails.io/docs/reference/runtime/clipboard#clipboardgettext)
|
||||
// Returns the current text stored on clipboard
|
||||
export function ClipboardGetText(): Promise<string>;
|
||||
|
||||
// [ClipboardSetText](https://wails.io/docs/reference/runtime/clipboard#clipboardsettext)
|
||||
// Sets a text on the clipboard
|
||||
export function ClipboardSetText(text: string): Promise<boolean>;
|
||||
202
desktop/template/src/package/wailsjs/runtime/runtime.js
Normal file
202
desktop/template/src/package/wailsjs/runtime/runtime.js
Normal file
@@ -0,0 +1,202 @@
|
||||
/*
|
||||
_ __ _ __
|
||||
| | / /___ _(_) /____
|
||||
| | /| / / __ `/ / / ___/
|
||||
| |/ |/ / /_/ / / (__ )
|
||||
|__/|__/\__,_/_/_/____/
|
||||
The electron alternative for Go
|
||||
(c) Lea Anthony 2019-present
|
||||
*/
|
||||
|
||||
export function LogPrint(message) {
|
||||
window.runtime.LogPrint(message);
|
||||
}
|
||||
|
||||
export function LogTrace(message) {
|
||||
window.runtime.LogTrace(message);
|
||||
}
|
||||
|
||||
export function LogDebug(message) {
|
||||
window.runtime.LogDebug(message);
|
||||
}
|
||||
|
||||
export function LogInfo(message) {
|
||||
window.runtime.LogInfo(message);
|
||||
}
|
||||
|
||||
export function LogWarning(message) {
|
||||
window.runtime.LogWarning(message);
|
||||
}
|
||||
|
||||
export function LogError(message) {
|
||||
window.runtime.LogError(message);
|
||||
}
|
||||
|
||||
export function LogFatal(message) {
|
||||
window.runtime.LogFatal(message);
|
||||
}
|
||||
|
||||
export function EventsOnMultiple(eventName, callback, maxCallbacks) {
|
||||
return window.runtime.EventsOnMultiple(eventName, callback, maxCallbacks);
|
||||
}
|
||||
|
||||
export function EventsOn(eventName, callback) {
|
||||
return EventsOnMultiple(eventName, callback, -1);
|
||||
}
|
||||
|
||||
export function EventsOff(eventName, ...additionalEventNames) {
|
||||
return window.runtime.EventsOff(eventName, ...additionalEventNames);
|
||||
}
|
||||
|
||||
export function EventsOnce(eventName, callback) {
|
||||
return EventsOnMultiple(eventName, callback, 1);
|
||||
}
|
||||
|
||||
export function EventsEmit(eventName) {
|
||||
let args = [eventName].slice.call(arguments);
|
||||
return window.runtime.EventsEmit.apply(null, args);
|
||||
}
|
||||
|
||||
export function WindowReload() {
|
||||
window.runtime.WindowReload();
|
||||
}
|
||||
|
||||
export function WindowReloadApp() {
|
||||
window.runtime.WindowReloadApp();
|
||||
}
|
||||
|
||||
export function WindowSetAlwaysOnTop(b) {
|
||||
window.runtime.WindowSetAlwaysOnTop(b);
|
||||
}
|
||||
|
||||
export function WindowSetSystemDefaultTheme() {
|
||||
window.runtime.WindowSetSystemDefaultTheme();
|
||||
}
|
||||
|
||||
export function WindowSetLightTheme() {
|
||||
window.runtime.WindowSetLightTheme();
|
||||
}
|
||||
|
||||
export function WindowSetDarkTheme() {
|
||||
window.runtime.WindowSetDarkTheme();
|
||||
}
|
||||
|
||||
export function WindowCenter() {
|
||||
window.runtime.WindowCenter();
|
||||
}
|
||||
|
||||
export function WindowSetTitle(title) {
|
||||
window.runtime.WindowSetTitle(title);
|
||||
}
|
||||
|
||||
export function WindowFullscreen() {
|
||||
window.runtime.WindowFullscreen();
|
||||
}
|
||||
|
||||
export function WindowUnfullscreen() {
|
||||
window.runtime.WindowUnfullscreen();
|
||||
}
|
||||
|
||||
export function WindowIsFullscreen() {
|
||||
return window.runtime.WindowIsFullscreen();
|
||||
}
|
||||
|
||||
export function WindowGetSize() {
|
||||
return window.runtime.WindowGetSize();
|
||||
}
|
||||
|
||||
export function WindowSetSize(width, height) {
|
||||
window.runtime.WindowSetSize(width, height);
|
||||
}
|
||||
|
||||
export function WindowSetMaxSize(width, height) {
|
||||
window.runtime.WindowSetMaxSize(width, height);
|
||||
}
|
||||
|
||||
export function WindowSetMinSize(width, height) {
|
||||
window.runtime.WindowSetMinSize(width, height);
|
||||
}
|
||||
|
||||
export function WindowSetPosition(x, y) {
|
||||
window.runtime.WindowSetPosition(x, y);
|
||||
}
|
||||
|
||||
export function WindowGetPosition() {
|
||||
return window.runtime.WindowGetPosition();
|
||||
}
|
||||
|
||||
export function WindowHide() {
|
||||
window.runtime.WindowHide();
|
||||
}
|
||||
|
||||
export function WindowShow() {
|
||||
window.runtime.WindowShow();
|
||||
}
|
||||
|
||||
export function WindowMaximise() {
|
||||
window.runtime.WindowMaximise();
|
||||
}
|
||||
|
||||
export function WindowToggleMaximise() {
|
||||
window.runtime.WindowToggleMaximise();
|
||||
}
|
||||
|
||||
export function WindowUnmaximise() {
|
||||
window.runtime.WindowUnmaximise();
|
||||
}
|
||||
|
||||
export function WindowIsMaximised() {
|
||||
return window.runtime.WindowIsMaximised();
|
||||
}
|
||||
|
||||
export function WindowMinimise() {
|
||||
window.runtime.WindowMinimise();
|
||||
}
|
||||
|
||||
export function WindowUnminimise() {
|
||||
window.runtime.WindowUnminimise();
|
||||
}
|
||||
|
||||
export function WindowSetBackgroundColour(R, G, B, A) {
|
||||
window.runtime.WindowSetBackgroundColour(R, G, B, A);
|
||||
}
|
||||
|
||||
export function ScreenGetAll() {
|
||||
return window.runtime.ScreenGetAll();
|
||||
}
|
||||
|
||||
export function WindowIsMinimised() {
|
||||
return window.runtime.WindowIsMinimised();
|
||||
}
|
||||
|
||||
export function WindowIsNormal() {
|
||||
return window.runtime.WindowIsNormal();
|
||||
}
|
||||
|
||||
export function BrowserOpenURL(url) {
|
||||
window.runtime.BrowserOpenURL(url);
|
||||
}
|
||||
|
||||
export function Environment() {
|
||||
return window.runtime.Environment();
|
||||
}
|
||||
|
||||
export function Quit() {
|
||||
window.runtime.Quit();
|
||||
}
|
||||
|
||||
export function Hide() {
|
||||
window.runtime.Hide();
|
||||
}
|
||||
|
||||
export function Show() {
|
||||
window.runtime.Show();
|
||||
}
|
||||
|
||||
export function ClipboardGetText() {
|
||||
return window.runtime.ClipboardGetText();
|
||||
}
|
||||
|
||||
export function ClipboardSetText(text) {
|
||||
return window.runtime.ClipboardSetText(text);
|
||||
}
|
||||
15
desktop/template/src/router/index.ts
Normal file
15
desktop/template/src/router/index.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
import StartPage from "../windows/start.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "Start",
|
||||
component: StartPage
|
||||
},
|
||||
];
|
||||
|
||||
export const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes: routes
|
||||
})
|
||||
7
desktop/template/src/vite-env.d.ts
vendored
Normal file
7
desktop/template/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module "*.vue" {
|
||||
import type {DefineComponent} from "vue";
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
export default component;
|
||||
}
|
||||
111
desktop/template/src/windows/common/dialog/new_device.vue
Normal file
111
desktop/template/src/windows/common/dialog/new_device.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<el-dialog class="cnc" v-model="props.cnc.header.dialog.status" :title="props.cnc.header.dialog.config.title" :width="props.cnc.header.dialog.config.width" draggable :modal="true" title="" :show-close="props.cnc.header.dialog.config.close" :before-close="dialogClose" :lock-scroll="true" :closeOnClickModal="false" :closeOnPressEscape="false" :destroy-on-close="true">
|
||||
<div class="new-device-dialog">
|
||||
<el-form class="cnc" :model="props.cnc.header.dialog.form" label-width="80px">
|
||||
<el-form-item label="设备IP地址">
|
||||
<el-input class="cnc" v-model="props.cnc.header.dialog.form.ip" placeholder="请输入设备的IP地址" maxlength="140" autocomplete="off" spellcheck="false" style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button color="#5e4eff" class="cnc" :loading="props.cnc.header.dialog.form.loading" type="primary" @click="onDevice">连接设备</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onBeforeUnmount, onMounted} from "vue";
|
||||
import {ElMessage} from "element-plus";
|
||||
export default defineComponent({
|
||||
name: "NewDeviceDialog",
|
||||
emits: [],
|
||||
props: ["cnc"],
|
||||
components: {},
|
||||
setup(props, context) {
|
||||
|
||||
function onDevice(){
|
||||
if(props.cnc.header.dialog.form.ip === "" && (props.cnc.header.dialog.form.ip.replace(/\n|\r/g, "")).trim().length === 0){
|
||||
ElMessage.closeAll();
|
||||
ElMessage({
|
||||
message: "设备IP地址错误",
|
||||
type: "warning",
|
||||
customClass: "cnc"
|
||||
});
|
||||
return;
|
||||
}
|
||||
props.cnc.header.dialog.form.loading = true;
|
||||
(window as any).go.StartWindows.Api.DeviceRequest(props.cnc.header.dialog.form.ip + ":" + props.cnc.device.control.port, "/query/inifields/", "GET", {}).then((response: any)=>{
|
||||
if(response.code === 0){
|
||||
if(response.MACHINE){
|
||||
props.cnc.device.ip = props.cnc.header.dialog.form.ip;
|
||||
if(props.cnc.device.ips.length > 0){
|
||||
let check = false;
|
||||
props.cnc.device.ips.forEach((item: any, index: any, array: any)=>{
|
||||
if(item.ip === props.cnc.device.ip){
|
||||
check = true;
|
||||
}
|
||||
});
|
||||
if(!check){
|
||||
props.cnc.device.ips.push({name: response.MACHINE, ip: props.cnc.header.dialog.form.ip});
|
||||
localStorage.setItem("cnc:device:ips", JSON.stringify(props.cnc.device.ips));
|
||||
}
|
||||
}else{
|
||||
props.cnc.device.ips.push({name: response.MACHINE, ip: props.cnc.header.dialog.form.ip});
|
||||
localStorage.setItem("cnc:device:ips", JSON.stringify(props.cnc.device.ips));
|
||||
console.log(props.cnc.device.ips);
|
||||
}
|
||||
(window as any).runtime.EventsEmit("event_message", {type: "connected_device"});
|
||||
dialogClose(false);
|
||||
}else{
|
||||
props.cnc.header.dialog.form.loading = false;
|
||||
ElMessage.closeAll();
|
||||
ElMessage({
|
||||
message: "设备连接失败，请检查后重新尝试",
|
||||
type: "warning",
|
||||
customClass: "cnc"
|
||||
});
|
||||
}
|
||||
}else{
|
||||
props.cnc.header.dialog.form.loading = false;
|
||||
ElMessage.closeAll();
|
||||
ElMessage({
|
||||
message: "设备连接失败，请检查后重新尝试",
|
||||
type: "warning",
|
||||
customClass: "cnc"
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function dialogClose(close: any){
|
||||
if(close){
|
||||
close();
|
||||
}
|
||||
props.cnc.header.dialog.status = false;
|
||||
setTimeout(()=>{
|
||||
props.cnc.header.dialog.config.type = "";
|
||||
props.cnc.header.dialog.form = {
|
||||
loading: false
|
||||
};
|
||||
}, 20);
|
||||
}
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
|
||||
return {
|
||||
props,
|
||||
onDevice,
|
||||
dialogClose
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.new-device-dialog{
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
84
desktop/template/src/windows/common/footer.vue
Normal file
84
desktop/template/src/windows/common/footer.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="footer-main">
|
||||
<div class="footer-item"></div>
|
||||
<div class="footer-item"></div>
|
||||
<div class="footer-item">
|
||||
<div class="item">
|
||||
<el-text class="cnc">
|
||||
<el-icon><ChatLineRound /></el-icon>
|
||||
<span>{{props.cnc.device.control.status ? "已连接" : "未连接"}}</span>
|
||||
</el-text>
|
||||
</div>
|
||||
<div class="item">
|
||||
<el-text class="cnc">
|
||||
<el-icon><ChatDotRound /></el-icon>
|
||||
<span>{{props.cnc.device.message.status ? "已连接" : "未连接"}}</span>
|
||||
</el-text>
|
||||
</div>
|
||||
<div class="item">
|
||||
<el-text class="cnc">
|
||||
<el-icon><Bell /></el-icon>
|
||||
<span>GEEKCNC 1.0.0</span>
|
||||
</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
|
||||
import * as icons from "@element-plus/icons";
|
||||
export default defineComponent({
|
||||
name: "FooterCommon",
|
||||
emits: [],
|
||||
props: ["cnc"],
|
||||
components: {},
|
||||
setup(props, context) {
|
||||
|
||||
onBeforeMount(() => {});
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
|
||||
onUnmounted(() => {});
|
||||
|
||||
return {
|
||||
props,
|
||||
icons
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer-main{
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
}
|
||||
.footer-main .footer-item{
|
||||
width: 33.33%;
|
||||
height: 25px;
|
||||
color: #666666;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.footer-main .footer-item:last-child{
|
||||
text-align: right;
|
||||
}
|
||||
.footer-main .footer-item .item{
|
||||
width: auto;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.footer-main .footer-item .item:hover{
|
||||
background-color: rgba(43, 45, 48, 1);
|
||||
}
|
||||
.footer-main .footer-item .item:deep(.el-text){
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
</style>
|
||||
442
desktop/template/src/windows/common/header.vue
Normal file
442
desktop/template/src/windows/common/header.vue
Normal file
@@ -0,0 +1,442 @@
|
||||
<template>
|
||||
<div class="header-main">
|
||||
<div class="header-item">
|
||||
<div class="item logo"></div>
|
||||
<div class="item menu">
|
||||
<el-icon><Grid /></el-icon>
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-item" @click="onSettings">
|
||||
<div class="dropdown-item-item">
|
||||
<el-icon><Setting /></el-icon>
|
||||
</div>
|
||||
<div class="dropdown-item-item">
|
||||
<span>设置</span>
|
||||
</div>
|
||||
<div class="dropdown-item-item"></div>
|
||||
</div>
|
||||
<div class="dropdown-item" @click="onReload">
|
||||
<div class="dropdown-item-item">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
</div>
|
||||
<div class="dropdown-item-item">
|
||||
<span>重载应用</span>
|
||||
</div>
|
||||
<div class="dropdown-item-item"></div>
|
||||
</div>
|
||||
<div class="dropdown-item">
|
||||
<div class="dropdown-item-item">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
</div>
|
||||
<div class="dropdown-item-item">
|
||||
<span>帮助</span>
|
||||
</div>
|
||||
<div class="dropdown-item-item">
|
||||
<el-icon class="arrow"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
<div class="dropdown-more">
|
||||
<div class="dropdown-item" @click="onSite">
|
||||
<div class="dropdown-item-item">
|
||||
<el-icon><ChromeFilled /></el-icon>
|
||||
</div>
|
||||
<div class="dropdown-item-item">
|
||||
<span>官方网站</span>
|
||||
</div>
|
||||
<div class="dropdown-item-item"></div>
|
||||
</div>
|
||||
<div class="dropdown-item line"></div>
|
||||
<div class="dropdown-item" @click="onAbout">
|
||||
<div class="dropdown-item-item"></div>
|
||||
<div class="dropdown-item-item">
|
||||
<span>关于</span>
|
||||
</div>
|
||||
<div class="dropdown-item-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown-item line"></div>
|
||||
<div class="dropdown-item" @click="onQuit">
|
||||
<div class="dropdown-item-item"></div>
|
||||
<div class="dropdown-item-item">
|
||||
<span>退出</span>
|
||||
</div>
|
||||
<div class="dropdown-item-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item device">
|
||||
<div class="new-device" @click="onNewDevice">
|
||||
<el-text class="cnc" v-if="!props.cnc.device.control.status && !props.cnc.device.message.status">
|
||||
<el-icon><Connection /></el-icon>
|
||||
<span>连接新设备</span>
|
||||
</el-text>
|
||||
<el-text class="cnc" v-else>
|
||||
<el-icon><Connection /></el-icon>
|
||||
<span>{{props.cnc.device.ip}}</span>
|
||||
<el-icon style="margin-left: 5px"><Close /></el-icon>
|
||||
</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<div class="item control" @click="onControlStart">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="运行" placement="bottom">
|
||||
<el-icon><VideoPlay /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="item control" @click="onControlSuspend">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="暂停" placement="bottom">
|
||||
<el-icon><VideoPause /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="item control" @click="onControlStop">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="停止" placement="bottom">
|
||||
<el-icon><WarningFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-item">
|
||||
<div class="item global" @click="onEmergencyStop">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="紧急停止" placement="bottom">
|
||||
<el-text class="cnc">
|
||||
<el-icon><Remove /></el-icon>
|
||||
<span>紧急停止</span>
|
||||
</el-text>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="item global" @click="onDeviceStart">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="启动设备" placement="bottom">
|
||||
<el-text class="cnc">
|
||||
<el-icon><Promotion /></el-icon>
|
||||
<span>启动设备</span>
|
||||
</el-text>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="item global" @click="onDeviceZeroing">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="设备回零" placement="bottom">
|
||||
<el-text class="cnc">
|
||||
<el-icon><Aim /></el-icon>
|
||||
<span>设备回零</span>
|
||||
</el-text>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NewDeviceDialog ref="newDeviceDialog" :cnc="props.cnc" v-if="props.cnc.header.dialog.config.type === 'new_device'" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
|
||||
import * as icons from "@element-plus/icons";
|
||||
import {ElMessageBox} from "element-plus";
|
||||
import NewDeviceDialog from "./dialog/new_device.vue";
|
||||
export default defineComponent({
|
||||
name: "HeaderCommon",
|
||||
emits: [],
|
||||
props: ["cnc"],
|
||||
components: {
|
||||
NewDeviceDialog
|
||||
},
|
||||
setup(props, context) {
|
||||
|
||||
function onSettings(){
|
||||
|
||||
}
|
||||
|
||||
function onReload(){
|
||||
(window as any).runtime.WindowReloadApp();
|
||||
}
|
||||
|
||||
function onSite(){
|
||||
(window as any).runtime.BrowserOpenURL("https://www.geekros.com");
|
||||
}
|
||||
|
||||
function onAbout(){
|
||||
|
||||
}
|
||||
|
||||
function onQuit(){
|
||||
(window as any).runtime.Quit();
|
||||
}
|
||||
|
||||
function onNewDevice(){
|
||||
if(!props.cnc.device.control.status && !props.cnc.device.message.status){
|
||||
props.cnc.header.dialog.config.type = "new_device";
|
||||
props.cnc.header.dialog.config.title = "连接新设备";
|
||||
props.cnc.header.dialog.config.width = "400px";
|
||||
props.cnc.header.dialog.config.close = true;
|
||||
props.cnc.header.dialog.form = {
|
||||
ip: "127.0.0.1"
|
||||
}
|
||||
props.cnc.header.dialog.status = true;
|
||||
}else{
|
||||
ElMessageBox.confirm("是否确认断开设备连接？", "操作确认", {
|
||||
draggable: true,
|
||||
confirmButtonText: "确认",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
customClass: "cnc"
|
||||
}).then(() => {
|
||||
(window as any).runtime.EventsEmit("event_message", {type: "disconnect_device"});
|
||||
}).catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
function onControlStart(){
|
||||
|
||||
}
|
||||
|
||||
function onControlSuspend(){
|
||||
|
||||
}
|
||||
|
||||
function onControlStop(){
|
||||
|
||||
}
|
||||
|
||||
function onEmergencyStop(){
|
||||
|
||||
}
|
||||
|
||||
function onDeviceStart(){
|
||||
|
||||
}
|
||||
|
||||
function onDeviceZeroing(){
|
||||
|
||||
}
|
||||
|
||||
onBeforeMount(() => {});
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
|
||||
onUnmounted(() => {});
|
||||
|
||||
return {
|
||||
props,
|
||||
icons,
|
||||
onSettings,
|
||||
onReload,
|
||||
onSite,
|
||||
onAbout,
|
||||
onQuit,
|
||||
onNewDevice,
|
||||
onControlStart,
|
||||
onControlSuspend,
|
||||
onControlStop,
|
||||
onEmergencyStop,
|
||||
onDeviceStart,
|
||||
onDeviceZeroing
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header-main{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
.header-main .header-item{
|
||||
width: 33.33%;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.header-main .header-item:nth-child(2){
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.header-main .header-item:last-child{
|
||||
text-align: right;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.header-main .header-item .item{
|
||||
width: auto;
|
||||
height: 39px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.header-main .header-item .item.logo{
|
||||
width: 40px;
|
||||
background: url("../src/assets/image/logo.png") no-repeat center center;
|
||||
background-size: 50%;
|
||||
}
|
||||
.header-main .header-item .item.menu{
|
||||
width: 40px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
padding: 6px;
|
||||
position: relative;
|
||||
}
|
||||
.header-main .header-item .item.menu:hover{
|
||||
cursor: pointer;
|
||||
background-color: rgba(57, 59, 64, .5);
|
||||
}
|
||||
.header-main .header-item .item.menu .el-icon{
|
||||
font-size: 18px;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown{
|
||||
width: max-content;
|
||||
white-space: nowrap;
|
||||
min-width: 120px;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
background-color: rgba(43, 45, 48, 1);
|
||||
border: 1px solid rgba(59, 60, 61, 1);
|
||||
z-index: 100;
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
color: #999999;
|
||||
display: none;
|
||||
}
|
||||
.header-main .header-item .item.menu:hover .dropdown{
|
||||
display: block;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown .dropdown-item{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown .dropdown-item:hover{
|
||||
color: #ffffff;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown .dropdown-item.line{
|
||||
height: 1px;
|
||||
border-bottom: 1px solid rgba(59, 60, 61, 1);
|
||||
margin: 6px 0;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-item-item{
|
||||
width: auto;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-item-item:first-child{
|
||||
width: 30px;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-item-item span{
|
||||
width: auto;
|
||||
min-width: 60px;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-item-item .el-icon{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-item-item:last-child .el-icon{
|
||||
float: right;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown .dropdown-item:not(:hover) .dropdown-item-item .el-icon.arrow{
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-item-item i{
|
||||
color: #666666;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown .dropdown-item .dropdown-more{
|
||||
width: max-content;
|
||||
white-space: nowrap;
|
||||
min-width: 140px;
|
||||
line-height: normal;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(100%);
|
||||
text-align: left;
|
||||
background-color: rgba(43, 45, 48, 1);
|
||||
border: 1px solid rgba(59, 60, 61, 1);
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
color: #999999;
|
||||
display: none;
|
||||
}
|
||||
.header-main .header-item .item.menu .dropdown .dropdown-item:hover .dropdown-more{
|
||||
display: block;
|
||||
}
|
||||
.header-main .header-item .item.device{
|
||||
padding: 0 5px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.header-main .header-item .item.device .new-device{
|
||||
width: auto;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background-color: rgba(30, 31, 34, .3);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: 4px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.header-main .header-item .item.device .new-device:deep(.el-text){
|
||||
color: #999999;
|
||||
}
|
||||
.header-main .header-item .item.device .new-device:hover:deep(.el-text){
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
}
|
||||
.header-main .header-item .item.global{
|
||||
width: auto;
|
||||
height: 39px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
padding: 6px 10px;
|
||||
position: relative;
|
||||
}
|
||||
.header-main .header-item .item.global:hover{
|
||||
cursor: pointer;
|
||||
background-color: rgba(57, 59, 64, .5);
|
||||
}
|
||||
.header-main .header-item .item.global:deep(.el-text){
|
||||
height: 27px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: #999999;
|
||||
}
|
||||
.header-main .header-item .item.global:deep(.el-text):hover{
|
||||
color: #ffffff;
|
||||
}
|
||||
.header-main .header-item .item.global:deep(.el-text .el-icon){
|
||||
font-size: 16px;
|
||||
}
|
||||
.header-main .header-item .item.global:deep(.el-text span){
|
||||
height: 27px;
|
||||
font-size: 12px;
|
||||
line-height: 27px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.header-main .header-item .item.global:first-child:deep(.el-text){
|
||||
color: #F56C6C;
|
||||
}
|
||||
.header-main .header-item .item.control{
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
background-color: rgba(30, 31, 34, .8);
|
||||
border-radius: 4px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.header-main .header-item .item.control:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.header-main .header-item .item.control:deep(.el-icon){
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
}
|
||||
.header-main .header-item .item.control:hover:deep(.el-icon){
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
125
desktop/template/src/windows/common/navigation.vue
Normal file
125
desktop/template/src/windows/common/navigation.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="navigation-view">
|
||||
<div class="navigation-item">
|
||||
<div class="item" :class="props.cnc.navigation.select === 'console' ? 'select' : ''" @click="onNavigation('console')">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="控制台" placement="right">
|
||||
<el-icon><Place /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="item" :class="props.cnc.navigation.select === 'program' ? 'select' : ''" @click="onNavigation('program')">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="G程序" placement="right">
|
||||
<el-icon><Finished /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="item" :class="props.cnc.navigation.select === 'plugin' ? 'select' : ''" @click="onNavigation('plugin')">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="插件" placement="right">
|
||||
<el-icon><Grid /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="item" :class="props.cnc.navigation.select === 'blade' ? 'select' : ''" @click="onNavigation('blade')">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="刀库" placement="right">
|
||||
<el-icon><MessageBox /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navigation-item">
|
||||
<div class="item" :class="props.cnc.navigation.select === 'settings' ? 'select' : ''" @click="onNavigation('settings')">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="设置" placement="right">
|
||||
<el-icon><Tools /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="item" @click="onDeviceRestart">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="重启设备" placement="right">
|
||||
<el-icon><RefreshRight /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="item" @click="onDeviceShutdown">
|
||||
<el-tooltip popper-class="cnc" effect="dark" content="设备关机" placement="right">
|
||||
<el-icon><SwitchButton /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
|
||||
import * as icons from "@element-plus/icons";
|
||||
export default defineComponent({
|
||||
name: "NavigationCommon",
|
||||
emits: [],
|
||||
props: ["cnc"],
|
||||
components: {},
|
||||
setup(props, context) {
|
||||
|
||||
function onNavigation(navigation: any){
|
||||
if(props.cnc.navigation.select !== navigation){
|
||||
props.cnc.navigation.select = navigation;
|
||||
}
|
||||
}
|
||||
|
||||
function onDeviceRestart(){
|
||||
|
||||
}
|
||||
|
||||
function onDeviceShutdown(){
|
||||
|
||||
}
|
||||
|
||||
onBeforeMount(() => {});
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
|
||||
onUnmounted(() => {});
|
||||
|
||||
return {
|
||||
props,
|
||||
icons,
|
||||
onNavigation,
|
||||
onDeviceRestart,
|
||||
onDeviceShutdown
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navigation-view{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.navigation-view .navigation-item{
|
||||
width: 100%;
|
||||
height: calc(100% - 120px);
|
||||
}
|
||||
.navigation-view .navigation-item:last-child{
|
||||
height: 120px;
|
||||
}
|
||||
.navigation-view .navigation-item .item{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
padding: 5px;
|
||||
}
|
||||
.navigation-view .navigation-item .item:deep(.el-icon){
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
font-size: 16px;
|
||||
color: #999999;
|
||||
}
|
||||
.navigation-view .navigation-item .item:hover:deep(.el-icon){
|
||||
cursor: pointer;
|
||||
background-color: rgba(78, 81, 87, .2);
|
||||
border-radius: 4px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.navigation-view .navigation-item .item.select:deep(.el-icon){
|
||||
cursor: pointer;
|
||||
background-color: rgba(78, 81, 87, .2);
|
||||
border-radius: 4px;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
43
desktop/template/src/windows/main/blade.vue
Normal file
43
desktop/template/src/windows/main/blade.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="blade-view" :class="props.cnc.navigation.select">
|
||||
<el-empty class="cnc" description="blade" :image-size="30" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
|
||||
import * as icons from "@element-plus/icons";
|
||||
export default defineComponent({
|
||||
name: "BladeMain",
|
||||
emits: [],
|
||||
props: ["cnc"],
|
||||
components: {},
|
||||
setup(props, context) {
|
||||
|
||||
onBeforeMount(() => {});
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
|
||||
onUnmounted(() => {});
|
||||
|
||||
return {
|
||||
props,
|
||||
icons
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.blade-view{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(30, 31, 34, 1);
|
||||
display: none;
|
||||
}
|
||||
.blade-view.blade{
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
378
desktop/template/src/windows/main/console.vue
Normal file
378
desktop/template/src/windows/main/console.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<template>
|
||||
<div class="console-view" :class="props.cnc.navigation.select">
|
||||
<div class="console-item">
|
||||
<div class="console-main-item">
|
||||
|
||||
</div>
|
||||
<div class="console-main-item">
|
||||
<div class="console-main-header">
|
||||
<div class="console-header-item"></div>
|
||||
<div class="console-header-item"></div>
|
||||
<div class="console-header-item"></div>
|
||||
</div>
|
||||
<div class="console-main-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="console-item">
|
||||
<div class="console-right">
|
||||
<div class="console-right-item">
|
||||
<div class="title">
|
||||
<el-text class="cnc">
|
||||
<el-icon><ScaleToOriginal /></el-icon>
|
||||
<span>步长(mm)</span>
|
||||
</el-text>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="step">
|
||||
<el-row class="cnc" :gutter="5">
|
||||
<el-col :span="4">
|
||||
<div class="grid-content">0.01</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content">0.05</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content">0.1</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content">0.5</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content select">1</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content">5</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content">10</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content">20</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content">50</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content">100</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content">150</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div class="grid-content">360</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="console-right-item">
|
||||
<div class="title">
|
||||
<el-text class="cnc">
|
||||
<el-icon><Operation /></el-icon>
|
||||
<span>速度(min)</span>
|
||||
</el-text>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="speed-box">
|
||||
<div class="speed-box-item">
|
||||
<div class="item">点动速度</div>
|
||||
<div class="item">
|
||||
<el-slider class="cnc" size="small" show-input :show-input-controls="false" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="speed-box-item">
|
||||
<div class="item">最大速度</div>
|
||||
<div class="item">
|
||||
<el-slider class="cnc" size="small" show-input :show-input-controls="false" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="speed-box-item">
|
||||
<div class="item">点转速度</div>
|
||||
<div class="item">
|
||||
<el-slider class="cnc" size="small" show-input :show-input-controls="false" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="console-right-item">
|
||||
<div class="title">
|
||||
<el-text class="cnc">
|
||||
<el-icon><Coordinate /></el-icon>
|
||||
<span>调试键盘</span>
|
||||
</el-text>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="keyboard">
|
||||
<el-row class="cnc" :gutter="5">
|
||||
<el-col :span="6">
|
||||
<div class="grid-content none"></div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content">
|
||||
<div class="icon">
|
||||
<el-icon><ArrowUpBold /></el-icon>
|
||||
</div>
|
||||
<div class="name">Y+</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content none"></div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content">
|
||||
<div class="icon">
|
||||
<el-icon><ArrowUpBold /></el-icon>
|
||||
</div>
|
||||
<div class="name">Z+</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content">
|
||||
<div class="icon">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
</div>
|
||||
<div class="name">X-</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content">
|
||||
<div class="icon">
|
||||
<el-icon><ArrowDownBold /></el-icon>
|
||||
</div>
|
||||
<div class="name">Y-</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content">
|
||||
<div class="icon">
|
||||
<el-icon><ArrowRightBold /></el-icon>
|
||||
</div>
|
||||
<div class="name">X+</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content">
|
||||
<div class="icon">
|
||||
<el-icon><ArrowDownBold /></el-icon>
|
||||
</div>
|
||||
<div class="name">Z-</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content">
|
||||
<div class="icon">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
</div>
|
||||
<div class="name">B-</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content">
|
||||
<div class="icon">
|
||||
<el-icon><ArrowRightBold /></el-icon>
|
||||
</div>
|
||||
<div class="name">B+</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content">
|
||||
<div class="icon">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
</div>
|
||||
<div class="name">C-</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content">
|
||||
<div class="icon">
|
||||
<el-icon><ArrowRightBold /></el-icon>
|
||||
</div>
|
||||
<div class="name">C+</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
|
||||
import * as icons from "@element-plus/icons";
|
||||
export default defineComponent({
|
||||
name: "ConsoleMain",
|
||||
emits: [],
|
||||
props: ["cnc"],
|
||||
components: {},
|
||||
setup(props, context) {
|
||||
|
||||
onBeforeMount(() => {});
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
|
||||
onUnmounted(() => {});
|
||||
|
||||
return {
|
||||
props,
|
||||
icons
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.console-view{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(30, 31, 34, 1);
|
||||
z-index: 100;
|
||||
display: none;
|
||||
}
|
||||
.console-view.console{
|
||||
display: block;
|
||||
}
|
||||
.console-view .console-item{
|
||||
width: calc(100% - 380px);
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.console-view .console-item:last-child{
|
||||
width: 380px;
|
||||
padding: 10px;
|
||||
background-color: rgba(43, 45, 48, 1);
|
||||
border-left: solid 1px rgba(30, 31, 34, 1);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.console-view .console-item .console-main-item{
|
||||
width: 100%;
|
||||
height: calc(100% - 240px);
|
||||
}
|
||||
.console-view .console-item .console-main-item:last-child{
|
||||
height: 240px;
|
||||
background-color: rgba(43, 45, 48, .5);
|
||||
border-top: solid 1px rgba(30, 31, 34, .8);
|
||||
}
|
||||
.console-view .console-item .console-main-item .console-main-header{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: rgba(43, 45, 48, .5);
|
||||
border-bottom: solid 1px rgba(30, 31, 34, .8);
|
||||
}
|
||||
.console-view .console-item .console-main-item .console-main-header .console-header-item{
|
||||
width: 33.33%;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.console-view .console-item .console-right{
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item{
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .title{
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box{
|
||||
width: 100%;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box:deep(.el-row.cnc .el-col){
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .step .grid-content{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background-color: rgba(30, 31, 34, .3);
|
||||
border-radius: 4px;
|
||||
color: #999999;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .step .grid-content:hover{
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
background-color: rgba(30, 31, 34, .5);
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .step .grid-content.select{
|
||||
background-color: #5e4eff;
|
||||
color: #ffffff;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .speed-box{
|
||||
width: 100%;
|
||||
background-color: rgba(30, 31, 34, .3);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .speed-box .speed-box-item{
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .speed-box .speed-box-item:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .speed-box .speed-box-item .item{
|
||||
width: calc(100% - 65px);
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .speed-box .speed-box-item .item:first-child{
|
||||
width: 65px;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .keyboard{
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content{
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
text-align: center;
|
||||
background-color: rgba(30, 31, 34, .3);
|
||||
border: solid 1px rgba(30, 31, 34, .5);
|
||||
border-radius: 4px;
|
||||
color: #999999;
|
||||
padding: 10px;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content.none{
|
||||
background-color: rgba(30, 31, 34, 0);
|
||||
border: solid 1px rgba(30, 31, 34, 0);
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content:not(.none):hover{
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
background-color: #5e4eff;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content .icon{
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
color: #5e4eff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content:not(.none):hover .icon{
|
||||
color: #ffffff;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content .name{
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: #999999;
|
||||
}
|
||||
.console-view .console-item .console-right .console-right-item .box .keyboard .grid-content:not(.none):hover .name{
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
142
desktop/template/src/windows/main/device.vue
Normal file
142
desktop/template/src/windows/main/device.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="device-view" :class="props.cnc.navigation.select">
|
||||
<div class="device-main">
|
||||
<div class="device-box">
|
||||
<div class="box-title">
|
||||
<el-text class="cnc">
|
||||
<el-icon><QuestionFilled /></el-icon>
|
||||
<span>设备列表</span>
|
||||
</el-text>
|
||||
</div>
|
||||
<div class="device-item">
|
||||
<el-row class="cnc" :gutter="20">
|
||||
<el-col class="cnc" :span="8" v-for="(item, index) in props.cnc.device.ips" :key="index">
|
||||
<div class="grid-content" @click="onSelectDevice(item)">
|
||||
<div class="device-name">{{item.name}}</div>
|
||||
<div class="device-ip">{{item.ip}}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
|
||||
import * as icons from "@element-plus/icons";
|
||||
import {ElMessage} from "element-plus";
|
||||
export default defineComponent({
|
||||
name: "DeviceMain",
|
||||
emits: [],
|
||||
props: ["cnc"],
|
||||
components: {},
|
||||
setup(props, context) {
|
||||
|
||||
function onSelectDevice(device: any){
|
||||
(window as any).go.StartWindows.Api.DeviceRequest(device.ip + ":" + props.cnc.device.control.port, "/query/inifields/", "GET", {}).then((response: any)=>{
|
||||
console.log(response);
|
||||
if(response.code === 0){
|
||||
if(response.MACHINE){
|
||||
props.cnc.device.ip = device.ip;
|
||||
(window as any).runtime.EventsEmit("event_message", {type: "connected_device"});
|
||||
}else{
|
||||
ElMessage.closeAll();
|
||||
ElMessage({
|
||||
message: "设备连接失败，请检查后重新尝试",
|
||||
type: "warning",
|
||||
customClass: "cnc"
|
||||
});
|
||||
}
|
||||
}else{
|
||||
ElMessage.closeAll();
|
||||
ElMessage({
|
||||
message: "设备连接失败，请检查后重新尝试",
|
||||
type: "warning",
|
||||
customClass: "cnc"
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onBeforeMount(() => {});
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
|
||||
onUnmounted(() => {});
|
||||
|
||||
return {
|
||||
props,
|
||||
icons,
|
||||
onSelectDevice
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.device-view{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(30, 31, 34, 1);
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
}
|
||||
.device-view.device{
|
||||
display: block;
|
||||
}
|
||||
.device-view .device-main{
|
||||
padding: 30px;
|
||||
min-height: 1000px;
|
||||
}
|
||||
.device-view .device-main .device-box{
|
||||
width: 850px;
|
||||
padding: 30px;
|
||||
background-color: rgba(43, 45, 48, .5);
|
||||
border-radius: 4px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.device-view .device-main .device-box .box-title{
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.device-view .device-main .device-box .box-title:deep(.el-text){
|
||||
color: #999999;
|
||||
}
|
||||
.device-view .device-main .device-box .device-item{
|
||||
width: 100%;
|
||||
}
|
||||
.device-view .device-main .device-box .device-item .grid-content{
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 20px;
|
||||
background-color: rgba(43, 45, 48, .5);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
}
|
||||
.device-view .device-main .device-box .device-item .grid-content:hover{
|
||||
background-color: rgba(43, 45, 48, .8);
|
||||
cursor: pointer;
|
||||
}
|
||||
.device-view .device-main .device-box .device-item .grid-content .device-name{
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: #999999;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.device-view .device-main .device-box .device-item .grid-content:hover .device-name{
|
||||
color: #ffffff;
|
||||
}
|
||||
.device-view .device-main .device-box .device-item .grid-content .device-ip{
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: #666666;
|
||||
}
|
||||
</style>
|
||||
43
desktop/template/src/windows/main/plugin.vue
Normal file
43
desktop/template/src/windows/main/plugin.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="plugin-view" :class="props.cnc.navigation.select">
|
||||
<el-empty class="cnc" description="plugin" :image-size="30" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
|
||||
import * as icons from "@element-plus/icons";
|
||||
export default defineComponent({
|
||||
name: "PluginMain",
|
||||
emits: [],
|
||||
props: ["cnc"],
|
||||
components: {},
|
||||
setup(props, context) {
|
||||
|
||||
onBeforeMount(() => {});
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
|
||||
onUnmounted(() => {});
|
||||
|
||||
return {
|
||||
props,
|
||||
icons
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.plugin-view{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(30, 31, 34, 1);
|
||||
display: none;
|
||||
}
|
||||
.plugin-view.plugin{
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
43
desktop/template/src/windows/main/program.vue
Normal file
43
desktop/template/src/windows/main/program.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="program-view" :class="props.cnc.navigation.select">
|
||||
<el-empty class="cnc" description="program" :image-size="30" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
|
||||
import * as icons from "@element-plus/icons";
|
||||
export default defineComponent({
|
||||
name: "ProgramMain",
|
||||
emits: [],
|
||||
props: ["cnc"],
|
||||
components: {},
|
||||
setup(props, context) {
|
||||
|
||||
onBeforeMount(() => {});
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
|
||||
onUnmounted(() => {});
|
||||
|
||||
return {
|
||||
props,
|
||||
icons
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.program-view{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(30, 31, 34, 1);
|
||||
display: none;
|
||||
}
|
||||
.program-view.program{
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
43
desktop/template/src/windows/main/settings.vue
Normal file
43
desktop/template/src/windows/main/settings.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="settings-view" :class="props.cnc.navigation.select">
|
||||
<el-empty class="cnc" description="settings" :image-size="30" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue";
|
||||
import * as icons from "@element-plus/icons";
|
||||
export default defineComponent({
|
||||
name: "SettingsMain",
|
||||
emits: [],
|
||||
props: ["cnc"],
|
||||
components: {},
|
||||
setup(props, context) {
|
||||
|
||||
onBeforeMount(() => {});
|
||||
|
||||
onMounted(() => {});
|
||||
|
||||
onBeforeUnmount(() => {});
|
||||
|
||||
onUnmounted(() => {});
|
||||
|
||||
return {
|
||||
props,
|
||||
icons
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-view{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(30, 31, 34, 1);
|
||||
display: none;
|
||||
}
|
||||
.settings-view.settings{
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
220
desktop/template/src/windows/start.vue
Normal file
220
desktop/template/src/windows/start.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="cnc-main">
|
||||
<div class="main-item">
|
||||
<HeaderCommon ref="headerCommon" :cnc="props.cnc" />
|
||||
</div>
|
||||
<div class="main-item">
|
||||
<div class="main-box">
|
||||
<div class="main-box-item">
|
||||
<NavigationCommon ref="navigationCommon" :cnc="props.cnc" />
|
||||
</div>
|
||||
<div class="main-box-item">
|
||||
<DeviceMain ref="deviceMain" :cnc="props.cnc" />
|
||||
<ConsoleMain ref="consoleMain" :cnc="props.cnc" />
|
||||
<ProgramMain ref="programMain" :cnc="props.cnc" />
|
||||
<PluginMain ref="pluginMain" :cnc="props.cnc" />
|
||||
<BladeMain ref="bladeMain" :cnc="props.cnc" />
|
||||
<SettingsMain ref="settingsMain" :cnc="props.cnc" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main-item">
|
||||
<FooterCommon ref="footerCommon" :cnc="props.cnc" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent, nextTick, onBeforeMount, onBeforeUnmount, onMounted, onUnmounted} from "vue";
|
||||
import {ElLoading} from "element-plus";
|
||||
import * as icons from "@element-plus/icons";
|
||||
import NoSleep from "nosleep.js";
|
||||
import HeaderCommon from "./common/header.vue";
|
||||
import FooterCommon from "./common/footer.vue";
|
||||
import NavigationCommon from "./common/navigation.vue";
|
||||
import DeviceMain from "./main/device.vue";
|
||||
import ConsoleMain from "./main/console.vue";
|
||||
import ProgramMain from "./main/program.vue";
|
||||
import PluginMain from "./main/plugin.vue";
|
||||
import BladeMain from "./main/blade.vue";
|
||||
import SettingsMain from "./main/settings.vue";
|
||||
export default defineComponent({
|
||||
name: "Start",
|
||||
emits: [],
|
||||
props: ["cnc"],
|
||||
components: {
|
||||
HeaderCommon,
|
||||
FooterCommon,
|
||||
NavigationCommon,
|
||||
DeviceMain,
|
||||
ConsoleMain,
|
||||
ProgramMain,
|
||||
PluginMain,
|
||||
BladeMain,
|
||||
SettingsMain
|
||||
},
|
||||
setup(props, context) {
|
||||
|
||||
// 消息事件
|
||||
(window as any).runtime.EventsOn("event_message", (message: any) => {
|
||||
if(message.type && message.type === "connected_device"){
|
||||
onConnectedDevice();
|
||||
}
|
||||
if(message.type && message.type === "disconnect_device"){
|
||||
onDisconnectDevice();
|
||||
}
|
||||
});
|
||||
|
||||
// 连接设备
|
||||
function onConnectedDevice(){
|
||||
if(props.cnc.device.ip !== ""){
|
||||
onConnectedDeviceControl();
|
||||
}
|
||||
}
|
||||
|
||||
// 连接设备控制消息服务
|
||||
function onConnectedDeviceControl(){
|
||||
if(!props.cnc.device.control.status){
|
||||
props.cnc.device.control.socket = new WebSocket("ws://" + props.cnc.device.ip + ":" + props.cnc.device.control.port + "/websocket/", undefined);
|
||||
props.cnc.device.control.socket.onopen = function () {
|
||||
props.cnc.device.control.status = true;
|
||||
onConnectedDeviceMessage();
|
||||
}
|
||||
props.cnc.device.control.socket.onmessage = function (message: any) {
|
||||
let message_json = JSON.parse(message.data);
|
||||
console.log(message_json);
|
||||
}
|
||||
props.cnc.device.control.socket.onerror = function () {
|
||||
onDisconnectDevice();
|
||||
}
|
||||
props.cnc.device.control.socket.onclose = function () {
|
||||
onDisconnectDevice();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 连接设备消息服务
|
||||
function onConnectedDeviceMessage(){
|
||||
if(!props.cnc.device.message.status){
|
||||
props.cnc.device.message.socket = new WebSocket("ws://" + props.cnc.device.ip + ":" + props.cnc.device.message.port + "/websocket/", undefined);
|
||||
props.cnc.device.message.socket.onopen = function () {
|
||||
props.cnc.device.message.status = true;
|
||||
props.cnc.navigation.select = "console";
|
||||
}
|
||||
props.cnc.device.message.socket.onmessage = function (message: any) {
|
||||
let message_json = JSON.parse(message.data);
|
||||
if(message_json.type && message_json.name){
|
||||
if(message_json.name === "basicInfo"){
|
||||
props.cnc.device.message.data.basicInfo = message_json.datas;
|
||||
}
|
||||
if(message_json.name === "errorInfo"){
|
||||
console.log(message_json.datas.text);
|
||||
}
|
||||
}
|
||||
}
|
||||
props.cnc.device.message.socket.onerror = function () {
|
||||
onDisconnectDevice();
|
||||
}
|
||||
props.cnc.device.message.socket.onclose = function () {
|
||||
onDisconnectDevice();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 断开设备
|
||||
function onDisconnectDevice(){
|
||||
if(props.cnc.device.control.status){
|
||||
props.cnc.device.control.status = false;
|
||||
props.cnc.device.control.socket.close();
|
||||
}
|
||||
if(props.cnc.device.message.status){
|
||||
props.cnc.device.message.status = false;
|
||||
props.cnc.device.message.socket.close();
|
||||
}
|
||||
props.cnc.navigation.select = "device";
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
props.cnc.loading = ElLoading.service({
|
||||
lock: true,
|
||||
background: "rgba(0, 0, 0, .01)",
|
||||
fullscreen: true
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(()=>{
|
||||
if(!props.cnc.sleep){
|
||||
// 禁止屏幕休眠
|
||||
props.cnc.sleep = new NoSleep();
|
||||
props.cnc.sleep.enable();
|
||||
}
|
||||
let ips = localStorage.getItem("cnc:device:ips");
|
||||
if(ips){
|
||||
props.cnc.device.ips = JSON.parse(ips);
|
||||
}
|
||||
props.cnc.loading.close();
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(()=>{
|
||||
onDisconnectDevice();
|
||||
})
|
||||
|
||||
onUnmounted(() => {});
|
||||
|
||||
return {
|
||||
props,
|
||||
icons
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cnc-main{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.cnc-main .main-item{
|
||||
width: 100%;
|
||||
height: calc(100% - 65px);
|
||||
}
|
||||
.cnc-main .main-item:first-child{
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: rgba(43, 45, 48, 1);
|
||||
border-top: solid 1px rgba(30, 31, 34, 1);
|
||||
}
|
||||
.cnc-main .main-item:last-child{
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
background-color: rgba(43, 45, 48, .8);
|
||||
border-top: 1px solid rgba(30, 31, 34, 1);
|
||||
}
|
||||
.cnc-main .main-item .main-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top: 1px solid rgba(30, 31, 34, 1);
|
||||
}
|
||||
.cnc-main .main-item .main-box .main-box-item{
|
||||
width: calc(100% - 40px);
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.cnc-main .main-item .main-box .main-box-item:first-child{
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
background-color: rgba(43, 45, 48, 1);
|
||||
border-right: solid 1px rgba(30, 31, 34, 1);
|
||||
}
|
||||
</style>
|
||||
33
desktop/template/tsconfig.json
Normal file
33
desktop/template/tsconfig.json
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"sourceMap": false,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": [
|
||||
"ESNext",
|
||||
"DOM"
|
||||
],
|
||||
"types": [
|
||||
"node"
|
||||
],
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
14
desktop/template/tsconfig.node.json
Normal file
14
desktop/template/tsconfig.node.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"types": [
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"vite.config.ts"
|
||||
]
|
||||
}
|
||||
17
desktop/template/vite.config.ts
Normal file
17
desktop/template/vite.config.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
port: 6173
|
||||
},
|
||||
plugins: [
|
||||
vue()
|
||||
],
|
||||
build: {
|
||||
sourcemap: false
|
||||
},
|
||||
optimizeDeps: {
|
||||
exclude: ["punycode"]
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user