dlsx
/
virtualSimulation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对接接口 登录

Browse Source
main
JayChou 3 weeks ago
parent 18a5adc925
commit e054022c55
14 changed files with 418 additions and 220 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      .env.development
  2. 1
      package.json
  3. 3
      pnpm-lock.yaml
  4. 12
      src/api/index.ts
  5. 8
      src/layout/index.vue
  6. 487
      src/layout/loginPage.vue
  7. 2
      src/main.ts
  8. 23
      src/permissions.ts
  9. 25
      src/store/modules/user.ts
  10. 2
      src/utils/auth.ts
  11. 43
      src/utils/request.ts
  12. 2
      src/views/largeDataScreen/home.vue
  13. 2
      src/views/program/components/yibiao.vue
  14. 24
      src/views/program/index.vue

4
.env.development
Unescape View File

@ -1,4 +1,4 @@
# 变量必须以 VITE_ 为前缀才能暴露给外部读取 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development' NODE_ENV = 'development'
VITE_APP_TITLE = '大屏数据' VITE_APP_TITLE = '实验仿真'
VITE_APP_BASE_API = 'http://10.115.6.28:18083/' VITE_APP_BASE_API = '//localhost:16066/jeecg-boot'

1
package.json
Unescape View File

@ -18,6 +18,7 @@
"@antv/x6-plugin-stencil": "^2.1.5", "@antv/x6-plugin-stencil": "^2.1.5",
"@antv/x6-plugin-transform": "^2.1.8", "@antv/x6-plugin-transform": "^2.1.8",
"@antv/x6-vue-shape": "^2.1.2", "@antv/x6-vue-shape": "^2.1.2",
"@element-plus/icons-vue": "^2.3.1",
"@kjgl77/datav-vue3": "^1.7.3", "@kjgl77/datav-vue3": "^1.7.3",
"axios": "^1.7.2", "axios": "^1.7.2",
"echarts": "^5.6.0", "echarts": "^5.6.0",

3
pnpm-lock.yaml
Unescape View File

@ -35,6 +35,9 @@ importers:
'@antv/x6-vue-shape': '@antv/x6-vue-shape':
specifier: ^2.1.2 specifier: ^2.1.2
version: 2.1.2(@antv/x6@2.18.1)(vue@3.4.29(typescript@5.2.2)) version: 2.1.2(@antv/x6@2.18.1)(vue@3.4.29(typescript@5.2.2))
'@element-plus/icons-vue':
specifier: ^2.3.1
version: 2.3.1(vue@3.4.29(typescript@5.2.2))
'@kjgl77/datav-vue3': '@kjgl77/datav-vue3':
specifier: ^1.7.3 specifier: ^1.7.3
version: 1.7.3(vue@3.4.29(typescript@5.2.2)) version: 1.7.3(vue@3.4.29(typescript@5.2.2))

12
src/api/index.ts
Unescape View File

@ -1,2 +1,14 @@
import request from '@/utils/request' import request from '@/utils/request'
export const login = (data: any) => {
return request({
url: '/sys/login',
method: 'post',
data
})
}
export const getCode = (time: any) => {
return request({
url: '/sys/randomImage/' + time,
})
}

8
src/layout/index.vue
Unescape View File

@ -2,7 +2,7 @@
<div class="container-bgc"> <div class="container-bgc">
<div class="top"> <div class="top">
<div class="loginBtn"> <div class="loginBtn">
<p @click="loginFn">登录/注册</p> <p @click="loginFn">{{user.token?'已登录':'登录/注册'}}</p>
</div> </div>
<div class="title">{{ setting.title }}</div> <div class="title">{{ setting.title }}</div>
</div> </div>
@ -18,10 +18,13 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter()
// import { onMounted, reactive, ref, toRefs, watch } from "vue"; // import { onMounted, reactive, ref, toRefs, watch } from "vue";
import settingStore from "@/store/modules/setting"; import settingStore from "@/store/modules/setting";
import userStore from '@/store/modules/user';
const user = userStore();
const setting = settingStore(); const setting = settingStore();
const router = useRouter()
console.log(setting.title); console.log(setting.title);
const loginFn=()=>{ const loginFn=()=>{
router.push('/login') router.push('/login')
@ -67,6 +70,7 @@ const loginFn=()=>{
line-height: 37px; line-height: 37px;
background: linear-gradient(to bottom, #08B9C1, #0758B8); background: linear-gradient(to bottom, #08B9C1, #0758B8);
transform: skew(-30deg); transform: skew(-30deg);
cursor: pointer;
/* 在X轴方向倾斜 -35 度 */ /* 在X轴方向倾斜 -35 度 */
border-radius: 5%; border-radius: 5%;
p{ p{

487
src/layout/loginPage.vue
Unescape View File

@ -1,217 +1,340 @@
<template> <template>
<div class="login_container"> <div class="login_container">
<div class="top"> <div class="top">
<div class="title">{{ setting.title }}</div> <div class="title">{{ setting.title }}</div>
</div> </div>
<div class="main-content"> <div class="main-content">
<el-row style="display: flex; justify-content: center;"> <el-row style="display: flex; justify-content: center">
<el-col> <el-col>
<el-form :rules="rules" :model="formModel" ref="formRef" size="large" autocomplete="off" <el-form
v-if="isRegister"> :rules="rules"
<el-form-item prop="username"> :model="formModel"
<el-input v-model="formModel.username" :prefix-icon="User" placeholder="请输入账号"></el-input> ref="formRef"
</el-form-item> size="large"
<el-form-item prop="studentNumb"> autocomplete="off"
<el-input v-model="formModel.studentNumb" :prefix-icon="Avatar" v-if="isRegister"
placeholder="请输入学号"></el-input> >
</el-form-item> <el-form-item prop="username">
<el-form-item prop="name"> <el-input
<el-input v-model="formModel.name" :prefix-icon="Stamp" placeholder="请输入姓名"></el-input> v-model="formModel.username"
</el-form-item> :prefix-icon="User"
<el-form-item prop="password"> placeholder="请输入账号"
<el-input v-model="formModel.password" :prefix-icon="Lock" type="password" ></el-input>
placeholder="请输入密码"></el-input> </el-form-item>
</el-form-item> <el-form-item prop="studentNumb">
<el-form-item prop="repassword"> <el-input
<el-input v-model="formModel.repassword" :prefix-icon="Lock" type="password" v-model="formModel.studentNumb"
placeholder="请输入再次密码"></el-input> :prefix-icon="Avatar"
</el-form-item> placeholder="请输入学号"
<el-form-item> ></el-input>
<el-button style="color: #3ad7e2; background-color: #0e2e5e; width: 150px;" class="button" </el-form-item>
type="primary" auto-insert-space @click="register"> <el-form-item prop="name">
注册 <el-input
</el-button> v-model="formModel.name"
<el-button style="color: #3ad7e2;background-color: #0e2e5e;width: 150px;" class="button" :prefix-icon="Stamp"
type="primary" auto-insert-space @click="isRegister = false"> placeholder="请输入姓名"
返回到登录页 ></el-input>
</el-button> </el-form-item>
</el-form-item> <el-form-item prop="password">
<el-form-item> <el-input
v-model="formModel.password"
</el-form-item> :prefix-icon="Lock"
<!-- <el-form-item class="flex"> type="password"
placeholder="请输入密码"
></el-input>
</el-form-item>
<el-form-item prop="repassword">
<el-input
v-model="formModel.repassword"
:prefix-icon="Lock"
type="password"
placeholder="请输入再次密码"
></el-input>
</el-form-item>
<el-form-item>
<el-button
style="color: #3ad7e2; background-color: #0e2e5e; width: 150px"
class="button"
type="primary"
auto-insert-space
@click="register"
>
注册
</el-button>
<el-button
style="color: #3ad7e2; background-color: #0e2e5e; width: 150px"
class="button"
type="primary"
auto-insert-space
@click="isRegister = false"
>
返回到登录页
</el-button>
</el-form-item>
<el-form-item> </el-form-item>
<!-- <el-form-item class="flex">
<el-link type="info" :underline="false" @click="isRegister = false"> <el-link type="info" :underline="false" @click="isRegister = false">
← 返回 ← 返回
</el-link> </el-link>
</el-form-item> --> </el-form-item> -->
</el-form> </el-form>
<el-form :model="formModel" :rules="rules" ref="formRef" size="large" autocomplete="off" v-else <el-form
class="custom-form"> :model="formModel"
<el-form-item prop="username"> :rules="rules"
<div style="display: flex;align-items: center;color: pink; "> ref="formRef"
<div class="left" style="display: flex;align-items: center;"> size="large"
<div style="padding-right: 10px;color: #1084c1;"><el-icon class="bold-icon"> autocomplete="off"
<user /> v-else
</el-icon></div> class="custom-form"
<div style="padding-right: 10px; color: #2592a1;">用户名</div> >
</div> <el-form-item prop="username">
<div class="right"> <div style="display: flex; align-items: center; color: pink">
<el-input v-model="formModel.username" <div class="left" style="display: flex; align-items: center">
style="border-color: #20bec8; background-color: pink;" <div style="padding-right: 10px; color: #1084c1">
placeholder="请输入用户名"></el-input> <el-icon class="bold-icon">
</div> <user />
</div> </el-icon>
</el-form-item> </div>
<el-form-item label="学号" prop="studentNumb"> <div style="padding-right: 10px; color: #2592a1">用户名</div>
<el-input v-model="formModel.studentNumb" :prefix-icon="Avatar" placeholder="请输入学号"></el-input> </div>
</el-form-item> <div class="right">
<el-form-item label="密码" prop="password"> <el-input
<el-input name="password" :prefix-icon="Lock" type="password" v-model="formModel.username"
placeholder="请输入密码" v-model="formModel.password"></el-input> style="border-color: #20bec8; background-color: pink"
</el-form-item> placeholder="请输入用户名"
<el-form-item> ></el-input>
<el-button class="hexagon-button" type="primary" auto-insert-space>登录</el-button> </div>
<el-button class="hexagon-button" type="primary" auto-insert-space </div>
@click="isRegister = true">去注册</el-button> </el-form-item>
</el-form-item> <el-form-item label="学号" prop="studentNumb">
<el-input
</el-form> v-model="formModel.studentNumb"
</el-col> :prefix-icon="Avatar"
<el-col :span="12" :xs="0"></el-col> placeholder="请输入学号"
</el-row> ></el-input>
</el-form-item>
</div> <el-form-item label="密码" prop="password">
<el-input
name="password"
:prefix-icon="Lock"
type="password"
placeholder="请输入密码"
v-model="formModel.password"
></el-input>
</el-form-item>
<el-form-item label="验证码">
<div class="captcha">
<el-input
v-model="formModel.captcha"
style="height: 0.2344rem"
maxlength="4"
/>
<div class="code" @click="getcodeinfo">
<img :src="codeUrl" alt="" srcset="" />
</div>
</div>
</el-form-item>
<el-form-item>
<el-button
class="hexagon-button"
type="primary"
auto-insert-space
@click="login"
>登录</el-button
>
<el-button
class="hexagon-button"
type="primary"
auto-insert-space
@click="isRegister = true"
>去注册</el-button
>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12" :xs="0"></el-col>
</el-row>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// import { ref } from "vue" // import { ref } from "vue"
// import { onMounted, reactive, ref, toRefs, watch } from "vue"; // import { onMounted, reactive, ref, toRefs, watch } from "vue";
import settingStore from "@/store/modules/setting"; import settingStore from "@/store/modules/setting";
import { User, Lock, Avatar, Stamp } from '@element-plus/icons-vue' import { User, Lock, Avatar, Stamp } from "@element-plus/icons-vue";
import { ref } from "vue";
import userStore from "@/store/modules/user";
import { getCode } from "@/api";
import { useRouter } from "vue-router";
const router = useRouter()
const setting = settingStore(); const setting = settingStore();
const user = userStore();
console.log(setting.title); console.log(setting.title);
import { ref } from 'vue'
const isRegister = ref(false) const isRegister = ref(false);
const formRef=ref() const formRef = ref();
const formModel = ref({ const formModel = ref({
username: '', username: "",
studentNumb: '', studentNumb: "",
name: '', name: "",
password: '', password: "",
repassword: '' repassword: "",
}) captcha: "",
});
// 添加校验规则 // 添加校验规则
const rules = { const rules = {
username: [ username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }, { required: true, message: "请输入用户名", trigger: "blur" },
{ min: 5, max: 30, message: '用户名长度最小五位最大三十位', trigger: ['change', 'blur'] } {
], min: 5,
studentNumb:[ max: 30,
{ required: true, message: '请输入学号', trigger: 'blur' }, message: "用户名长度最小五位最大三十位",
{ min: 5, max: 11, message: '学号长度最小五位最大三十位', trigger: ['change', 'blur'] } trigger: ["change", "blur"],
], },
name: [ ],
{ required: true, message: '请输入姓名', trigger: 'blur' }, studentNumb: [
], { required: true, message: "请输入学号", trigger: "blur" },
password: [ {
{ required: true, message: '请输入密码', trigger: 'blur' }, min: 5,
{ max: 11,
pattern: /^\S{6,15}$/, message: "学号长度最小五位最大三十位",
message: '密码长度最小六位最大十五位', trigger: ["change", "blur"],
trigger: ['change', 'blur'] },
} ],
], name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
repassword: [ password: [
{ required: true, message: '请再次输入密码', trigger: 'blur' }, { required: true, message: "请输入密码", trigger: "blur" },
{ {
max: 15, pattern: /^\S{6,15}$/,
min: 6, message: "密码长度最小六位最大十五位",
pattern: /^\S{6,15}$/, trigger: ["change", "blur"],
message: '密码长度最小六位最大十五位', },
trigger: ['change', 'blur'] ],
}, repassword: [
{ { required: true, message: "请再次输入密码", trigger: "blur" },
validator: (rule, value, callback) => { {
if (value !== formModel.value.password) { max: 15,
callback(new Error('两次输入密码不一致!')) min: 6,
} else { pattern: /^\S{6,15}$/,
callback() message: "密码长度最小六位最大十五位",
} trigger: ["change", "blur"],
}, },
trigger: 'blur' {
validator: (rule, value, callback) => {
if (value !== formModel.value.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
} }
], },
trigger: "blur",
} },
const register=async()=>{ ],
await formRef.value.validate() };
console.log('开始注册i请求'); const register = async () => {
await formRef.value.validate();
} console.log("开始注册i请求");
};
const codeUrl = ref("");
const getcodeinfo = async () => {
const res: any = await getCode(1629428467008);
codeUrl.value = res.result;
console.log(codeUrl.value);
};
getcodeinfo();
// import { useRouter } from 'vue-router' // import { useRouter } from 'vue-router'
// const router = useRouter() // const router = useRouter()
// const goToPage=()=>{ // const goToPage=()=>{
// router.push('/') // router.push('/')
// } // }
// 登录
const login = async () => {
await formRef.value.validate();
let data = {
captcha: formModel.value.captcha,
checkKey: 1629428467008,
password: formModel.value.password,
username: formModel.value.username,
};
const res = await user.logIn(data);
if(res){
router.push('/')
}
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.login_container { .login_container {
position: relative; position: relative;
width: 100%;
// height: 1080px;
min-height: 100vh;
background-color: #091d22;
background: url("../assets//images/bg2.png") no-repeat;
background-size: cover;
.top {
width: 100%; width: 100%;
// height: 1080px; // height: 75px;
min-height: 100vh; text-align: center;
background-color: #091d22; font-size: 42px;
background: url("../assets//images/bg2.png") no-repeat; line-height: 75px;
font-style: italic;
background: url("../assets/images/topbgc.png") no-repeat;
// background-position: center bottom -10px;
background-size: cover; background-size: cover;
.top { .title {
width: 100%; color: #fff;
// height: 75px;
text-align: center;
font-size: 42px;
line-height: 75px;
font-style: italic;
background: url("../assets/images/topbgc.png") no-repeat;
// background-position: center bottom -10px;
background-size: cover;
.title {
color: #fff;
}
} }
}
.main-content { .main-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
background: url("../assets/images/login.png") no-repeat; background: url("../assets/images/login.png") no-repeat;
background-position: center; background-position: center;
} }
.captcha {
width: 100%;
height: 100%;
position: relative;
.code {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
width: 105px;
height: 100%;
// background-color: pink;
display: flex;
align-items: center;
img {
width: 100%;
height: 100%;
}
}}
} }
.hexagon-button { .hexagon-button {
margin-top: 30px; margin-top: 30px;
/* 应用clip-path属性来创建六边形形状 */ /* 应用clip-path属性来创建六边形形状 */
width: 180px; width: 180px;
height: 50px; height: 50px;
/* 使用clip-path定义按钮形状 */ /* 使用clip-path定义按钮形状 */
clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%); clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%);
/* 模拟边框效果 */ /* 模拟边框效果 */
box-shadow: 0 0 0 2px cyan; box-shadow: 0 0 0 2px cyan;
background-color: #14213d; background-color: #14213d;
color: #3ad7e2; color: #3ad7e2;
background-color: #0e2e5e; background-color: #0e2e5e;
font-size: 18px; font-size: 18px;
} }
// .custom-form .el-form-item__label { // .custom-form .el-form-item__label {
@ -224,7 +347,7 @@ const register=async()=>{
// stroke-width: 9; // stroke-width: 9;
// /* 加粗效果 */ // /* 加粗效果 */
// } // }
.el-form-item__label{ .el-form-item__label {
color: #0e2e5e; color: #0e2e5e;
} }
</style> </style>

2
src/main.ts
Unescape View File

@ -1,6 +1,6 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from '@/router' import router from './permissions'
import '@/styles/index.scss' import '@/styles/index.scss'
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'; // 引入 Element Plus 的样式文件 import 'element-plus/dist/index.css'; // 引入 Element Plus 的样式文件

23
src/permissions.ts
Unescape View File

@ -0,0 +1,23 @@
import router from "./router";
import userStore from "./store/modules/user";
import { getToken } from "./utils/auth";
import pinia from "./store";
const store = userStore(pinia);
router.beforeEach((to: any, from: any, next: any) => {
if (to.path === "/login") {
if (store.token) {
next("/");
} else {
next();
}
// next();
} else {
const token = getToken();
if (token) {
next();
} else {
next("/login");
}
}
});
export default router;

25
src/store/modules/user.ts
Unescape View File

@ -1,14 +1,31 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { getToken } from "@/utils/auth"; import { getToken,setToken } from "@/utils/auth";
import { login } from "@/api";
import { ElMessage } from "element-plus";
const userStore = defineStore("userStore", { const userStore = defineStore("userStore", {
state: () => ({ state: () => ({
token: getToken(), token: getToken(),
userInfo: {}, userInfo: {},
}), }),
actions: { actions: {
async logIn(){ async logIn(form: any) {
console.log(form);
} const res: any = await login(form);
// if(res.code === 500) return ElMessage.error(res.msg)
if(res.code !== 200) {
ElMessage.error(res.msg)
return false
}
this.token = res.result.token;
this.userInfo = res.result.userInfo;
setToken(this.token);
console.log(res);
return true
},
clearStatus() {
this.token = "";
this.userInfo = {};
},
}, },
}); });
export default userStore; export default userStore;

2
src/utils/setToken.ts → src/utils/auth.ts
Unescape View File

@ -4,7 +4,7 @@ const setToken = (token: string): void => {
}; };
const getToken = () => localStorage.getItem(TOKEN_KEY) || ""; const getToken = () => localStorage.getItem(TOKEN_KEY) || "";
const removeToken = () => localStorage.removeItem(TOKEN_KEY); const removeToken = () => localStorage.removeItem(TOKEN_KEY);
export default { export {
setToken, setToken,
getToken, getToken,
removeToken, removeToken,

43
src/utils/request.ts
Unescape View File

@ -1,23 +1,38 @@
// 引入第三方请求库axios // 引入第三方请求库axios
import axios from 'axios' import axios from "axios";
import pinia from "@/store";
import { ElMessage } from "element-plus";
import userStore from "@/store/modules/user";
// 创建axios实例 // 创建axios实例
const server = axios.create({ const server = axios.create({
baseURL:import.meta.env.VITE_APP_BASE_API, baseURL: import.meta.env.VITE_APP_BASE_API,
timeout:10000, timeout: 30000,
}) });
// 创建请求拦截器 // 创建请求拦截器
server.interceptors.request.use((config) => { server.interceptors.request.use((config) => {
return config const useuserStore = userStore(pinia);
}) config.headers.Authorization = useuserStore.token;
config.headers["x-access-token"] = useuserStore.token;
return config;
});
// 创建相应拦截器 // 创建相应拦截器
server.interceptors.response.use((response:any) => { server.interceptors.response.use((response) => {
if(response.status === 200){ if (response.data.code === 401) {
return response.data const useuserStore = userStore(pinia);
}
// return response // useuserStore.clearStatus();
}) // return Promise.reject(response);
}
if (response.data.code === 412) {
ElMessage.error(response.data.message);
return Promise.reject(response);
}
return response.data;
});
// 暴露axios实例 // 暴露axios实例
export default server export default server;

2
src/views/largeDataScreen/home.vue
Unescape View File

@ -291,7 +291,7 @@ const step = ref<Step>(0);
const popover1 = ref<any>(null); const popover1 = ref<any>(null);
const popover2 = ref<any>(null); const popover2 = ref<any>(null);
const dialogVisible = ref<Falg>(false); const dialogVisible = ref<Falg>(false);
const Installation = ref<Falg>(true); const Installation = ref<Falg>(false);
const installationStep = ref<Step>(1); const installationStep = ref<Step>(1);
const checkList = ref<Step[]>([1, 2]); const checkList = ref<Step[]>([1, 2]);
const unpack = (): void => { const unpack = (): void => {

2
src/views/program/components/yibiao.vue
Unescape View File

@ -4,7 +4,7 @@
</div> </div>
</template> </template>
<script setup> <script setup lang="ts">
import { onMounted, watch } from "vue"; import { onMounted, watch } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import settingStore from "@/store/modules/setting"; import settingStore from "@/store/modules/setting";

24
src/views/program/index.vue
Unescape View File

@ -89,7 +89,7 @@ const falg = ref(false);
let graph: any = null; let graph: any = null;
const nodeName = ref(""); const nodeName = ref("");
const csedNode = ref(null); const csedNode = ref<any>(null);
const operations = []; const operations = [];
onMounted(() => { onMounted(() => {
preWork(); preWork();
@ -220,7 +220,7 @@ onMounted(() => {
// ]); // ]);
}); });
graph.on("node:added", ({ node }) => { graph.on("node:added", ({ node }:any) => {
const data = { const data = {
type: "add", type: "add",
node: node.toJSON(), node: node.toJSON(),
@ -229,7 +229,7 @@ onMounted(() => {
saveToLocalStorage(data); saveToLocalStorage(data);
}); });
graph.on("node:removed", ({ node }) => { graph.on("node:removed", ({ node }:any) => {
const data = { const data = {
type: "remove", type: "remove",
id: node.id, id: node.id,
@ -1029,7 +1029,7 @@ onMounted(() => {
const drawerVisible = ref(false); const drawerVisible = ref(false);
// 当前选中的节点数据 // 当前选中的节点数据
const selectedNodeData = ref({ const selectedNodeData = ref<any>({
label: "", label: "",
width: 0, width: 0,
height: 0, height: 0,
@ -1138,7 +1138,7 @@ const onUndo = () => {
const onRedo = () => { const onRedo = () => {
graph.redo(); graph.redo();
}; };
const sdsz = ref(null); const sdsz = ref<any>(null);
const onSave = () => { const onSave = () => {
// console.log(graph.toJSON()); // console.log(graph.toJSON());
graph.toJSON().cells.forEach((item: any) => { graph.toJSON().cells.forEach((item: any) => {
@ -1213,15 +1213,15 @@ const onSave = () => {
}; };
function hasExactNames(arr: any, names: any) { function hasExactNames(arr: any, names: any) {
// 提取数组中所有的 name 值 // 提取数组中所有的 name 值
const nameList = arr.map((obj) => obj.shape); const nameList = arr.map((obj:any) => obj.shape);
console.log( console.log(
nameList, nameList,
names, names,
names.every((name) => nameList.filter((n) => n === name).length === 1) names.every((name:any) => nameList.filter((n:any) => n === name).length === 1)
); );
// 检查 names 里的所有元素是否都在 nameList 中，且仅出现一次 // 检查 names 里的所有元素是否都在 nameList 中，且仅出现一次
return names.every((name) => nameList.filter((n) => n === name).length === 1); return names.every((name:any) => nameList.filter((n:any) => n === name).length === 1);
} }
watch( watch(
() => useSettingStore.qw, () => useSettingStore.qw,
@ -1236,14 +1236,14 @@ watch(
); );
const SESSION_KEY = "graph_operations"; const SESSION_KEY = "graph_operations";
function saveToLocalStorage(data) { function saveToLocalStorage(data:any) {
const operations = JSON.parse(localStorage.getItem(SESSION_KEY)) || []; const operations = JSON.parse(localStorage.getItem(SESSION_KEY) as string) || [];
operations.push(data); operations.push(data);
localStorage.setItem(SESSION_KEY, JSON.stringify(operations)); localStorage.setItem(SESSION_KEY, JSON.stringify(operations));
} }
function loadFromLocalStorage() { function loadFromLocalStorage() {
return JSON.parse(localStorage.getItem(SESSION_KEY)) || []; return JSON.parse(localStorage.getItem(SESSION_KEY) as string) || [];
} }
function clearLocalStorage() { function clearLocalStorage() {
@ -1253,7 +1253,7 @@ function clearLocalStorage() {
function restoreGraph() { function restoreGraph() {
const operations = loadFromLocalStorage(); const operations = loadFromLocalStorage();
operations.forEach((op) => { operations.forEach((op:any) => {
if (op.type === "add") { if (op.type === "add") {
graph.addNode(op.node); graph.addNode(op.node);
} else if (op.type === "remove") { } else if (op.type === "remove") {

Write Preview
Loading…
Cancel
Save