update desktop
This commit is contained in:
GeekROS
@@ -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>
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
4ff77190f71bfd84a6cba9f6abd9d2e6
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -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>
|
||||
@@ -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
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -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");
|
||||
@@ -0,0 +1,3 @@
|
||||
export default ({
|
||||
|
||||
});
|
||||
@@ -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";
|
||||
}
|
||||
});
|
||||
@@ -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>;
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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"];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
@@ -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>;
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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
|
||||
})
|
||||
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module "*.vue" {
|
||||
import type {DefineComponent} from "vue";
|
||||
const component: DefineComponent<{}, {}, any>;
|
||||
export default component;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"types": [
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"vite.config.ts"
|
||||
]
|
||||
}
|
||||
@@ -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