Skip to content

V
vue3portal
Commit 61149b86 authored by 左玲玲's avatar 左玲玲 😬
Browse files
Options

1743

parent f3c89c7c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 229 additions and 84 deletions
src/assets/image/bg.svg 0 → 100644
View file @ 61149b86
This diff is collapsed.
src/assets/less/main.less
View file @ 61149b86
......@@ -54,14 +54,57 @@ body {
}
&::-webkit-scrollbar-thumb {
background-color: #05192e;
background-color: #3f73a5;
border-radius: 5px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
background-color:#05192e;
border-radius: 5px;
}
&::-webkit-scrollbar-button {}
}
.home {
.el-tabs__item {
color: #fff !important;
margin: 0 !important;
padding: 0 12px !important;
border: none !important;
&.is-active {
background: transparent !important;
border: none !important;
color: #fff !important;
background-color: rgb(1, 91, 133) !important;
}
}
.el-tabs--border-card {
background: transparent !important;
border: none !important;
display: flex;
.el-tabs__content {
padding: 0 !important;
width: 100%;
height: 100%;
>div {
}
}
}
.el-tabs__header {
background: transparent !important;
border: none !important;
.el-tabs__nav-prev,
.el-tabs__nav-next{
>.el-icon{
font-size: 22px !important;
color: #17d3d8 !important;
}
}
}
}
\ No newline at end of file
src/pages/layouts/components/elsheader.vue
View file @ 61149b86
......@@ -2,7 +2,7 @@
* @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-10 17:03:11
* @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-14 17:16:10
* @LastEditTime: 2023-08-15 15:13:21
* @FilePath: \vue3portal\src\pages\layouts\components\elsheader.vue
* @Description:
*
......@@ -35,19 +35,19 @@
</el-dropdown>
</div>
<el-dialog v-model="dialogVisible" title="修改密码" width="30%" :before-close="handleClose">
<el-form label-position="top" ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="100px"
class="demo-ruleForm">
<el-form label-position="top" ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules"
label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="ruleForm.username" disabled />
</el-form-item>
<el-form-item label="原始密码" prop="oldPassword">
<el-input v-model="ruleForm.oldPassword" type="password" autocomplete="off" />
<el-form-item label="原始密码" prop="oldPassword" show-password>
<el-input v-model="ruleForm.oldPassword" type="password" autocomplete="off" show-password />
</el-form-item>
<el-form-item label="新密码" prop="password">
<el-input v-model="ruleForm.password" type="password" autocomplete="off" />
<el-input v-model="ruleForm.password" type="password" autocomplete="off" show-password />
</el-form-item>
<el-form-item label="确认新密码" prop="confirmPassword">
<el-input v-model="ruleForm.confirmPassword" type="password" autocomplete="off" />
<el-input v-model="ruleForm.confirmPassword" type="password" autocomplete="off" show-password />
</el-form-item>
<el-form-item>
<el-button style="width: 100%;" type="primary" @click="submitForm(ruleFormRef)"
......@@ -63,7 +63,7 @@ import { ElMessage } from 'element-plus'
import { Lock, SwitchButton } from "@element-plus/icons-vue";
import { getFetch, postFetch } from "@/api/doFetch";
const validatePass = (rule, value, callback) => {
if (value && value !== ruleForm.password) {
if (value && value !== ruleForm.value.password) {
callback(new Error("2次密码不一致！"))
} else {
callback()
......@@ -71,26 +71,29 @@ const validatePass = (rule, value, callback) => {
};
const store = useStore();
const currentUser = computed(() => {
return store.state.currentUser
return store.state.currentUser;
});
let titleconfig = reactive({
width: 1920,
scale: .75
}),
dialogVisible = ref(false),
ruleFormRef = ref({}),
loading = ref(false),
ruleForm = reactive({
let state = reactive({
titleconfig: {
width: 1920,
scale: .75
},
rules: {
oldPassword: [{ required: true, trigger: 'submit', }],
password: [{ required: true, trigger: 'submit', }],
confirmPassword: [{ validator: validatePass, trigger: 'blur', required: true }]
},
ruleForm: {
username: '',
oldPassword: '',
password: '',
confirmPassword: ''
}),
rules = reactive({
oldPassword: [{ required: true, trigger: 'submit', }],
password: [{ required: true, trigger: 'submit', }],
confirmPassword: [{ validator: validatePass, trigger: 'blur', required: true }]
});
}
}),
dialogVisible = ref(false),
ruleFormRef = ref({}),
loading = ref(false),
{ titleconfig, ruleForm, rules } = toRefs(state);
const loginOut = () => {
getFetch({ url: "/logout", params: {} }).then(res => {
window.location.href = res?.logoutRedirectUrl;
......@@ -100,7 +103,7 @@ const loginOut = () => {
const handleCommand = (command) => {
if (command == "pwd") {
dialogVisible.value = true;
ruleFormRef.value.resetFields()
ruleFormRef?.value?.resetFields && ruleFormRef?.value?.resetFields();
} else {
store.commit('CHANGE_USER', {
currentUser: {}
......@@ -116,7 +119,7 @@ const submitForm = async (formEl) => {
await formEl.validate((valid, fields) => {
if (valid) {
loading.value = true;
let newfields = JSON.parse(JSON.stringify(ruleForm));
let newfields = JSON.parse(JSON.stringify(ruleForm.value));
delete newfields.username;
postFetch({ url: "/user/updatePassword", params: { ...newfields } }).then(res => {
if (res?.code == "0000") {
......@@ -135,8 +138,8 @@ const submitForm = async (formEl) => {
}
})
};
watch(() => currentUser.value?.username, (newValue, oldValue) => {
ruleForm.username = newValue;
watch(() => currentUser?.value?.username, (newValue, oldValue) => {
ruleForm.value.username = newValue;
})
......@@ -149,9 +152,14 @@ watch(() => currentUser.value?.username, (newValue, oldValue) => {
padding: 0 18px;
height: 100%;
justify-content: flex-end;
.headerright {
height: 100%;
gap: 15px
gap: 15px;
position: relative;
right: 0;
z-index: 9999;
}
.el-dropdown-link {
......
src/pages/layouts/components/elsmain.vue
View file @ 61149b86
<template>
<div class="mainbox">
<div class="set3 colflex leftbox">
<div class="mainbox home">
<div class="set1 colflex leftbox">
<div class="box2">
<aYinTechBorderA1 :config="{ ...leftConfig, title: '设备状态' }"></aYinTechBorderA1>
</div>
......@@ -8,17 +8,32 @@
<aYinTechBorderA1 :config="{ ...leftConfig, title: '设备开动率' }"></aYinTechBorderA1>
</div>
<div class="box3">
<aYinTechBorderA1 :config="{ ...leftConfig, title: '任务待办' }"></aYinTechBorderA1>
<aYinTechBorderB3 :config="tableconfig">
<panelTitleA1 :config="{ ...titleconfig, position: 'left' }">任务待办</panelTitleA1>
</aYinTechBorderB3>
</div>
<div class="box2">
<aYinTechBorderA1 :config="{ ...leftConfig, title: '生产数据' }"></aYinTechBorderA1>
</div>
</div>
<div class="set4 colflex" style="justify-content: space-between;">
<div class="set2 colflex" style="justify-content: space-between;">
<div class="middlebox">
<aYinTechBorderB4 :config="systemconfig"></aYinTechBorderB4>
<aYinTechBorderB4 :config="systemconfig">
<div class="pad12 swh rowflex" style="gap:12px">
<div class="coltab scrollbar">
<div class="colflex">
<div :class="['tabitem', activeitem.id == it.id ? 'tabactive' : '']" v-for="it in menus"
:key="it.id" @click="handleClick(it)">{{ it.appName }}
</div>
</div>
</div>
<div class="tabcontent">
{{ activeitem.appName }}
</div>
</div>
</aYinTechBorderB4>
</div>
<div class="box1 rowflex" style="gap:15px">
<div class="box1 rowflex" style="gap:10px">
<div class="item5 counter-item"></div>
<div class="item5 counter-item"></div>
<div class="item5 counter-item"></div>
......@@ -26,15 +41,17 @@
<div class="item5 counter-item"></div>
</div>
<div class="box3">
<aYinTechBorderB1 :config="config"></aYinTechBorderB1>
<aYinTechBorderA1 :config="config">
<panelTitleA1 :config="{ ...titleconfig }">仓库使用趋势</panelTitleA1>
</aYinTechBorderA1>
</div>
</div>
<div class="set3 colflex leftbox">
<div class="set1 colflex leftbox">
<div class="box2">
<aYinTechBorderA1 :config="{ ...rightConfig, title: '能耗统计' }"></aYinTechBorderA1>
</div>
<div class="box2">
<aYinTechBorderA1 :config="{ ...rightConfig, title: '用电趋势' }"></aYinTechBorderA1>
<aYinTechBorderA1 :config="{ ...rightConfig, title: '能耗趋势' }"></aYinTechBorderA1>
</div>
<div class="box3">
<aYinTechBorderB3 :config="tableconfig"></aYinTechBorderB3>
......@@ -48,50 +65,95 @@
</template>
<script setup>
const leftConfig = reactive({
backgroundColor: $c.bll9,
decorationColor: [$c.bll3, $c.cyl5],
borderColor: $c.bll7,
titleWidth: 100,
titleColor: $c.cyl5,
decorationAlt: true,
rotate: 'y'
}),
rightConfig = reactive({
import { postFetch } from "@/api/doFetch";
const state = reactive({
leftConfig: {
backgroundColor: $c.bll9,
decorationColor: [$c.bll3, $c.cyl5],
borderColor: $c.bll7,
titleWidth: 100,
titleColor: $c.cyl5,
decorationAlt: true,
rotate: 'y'
},
rightConfig: {
backgroundColor: $c.bll9,
decorationColor: [$c.bll3, $c.cyl5],
borderColor: $c.bll7,
titleWidth: 100,
titleColor: $c.cyl5
}),
systemconfig = reactive({
},
systemconfig: {
backgroundColor: $c.bll9,
borderColor: $c.bll7,
glowColor: $c.fade($c.cyl5, .3),
decorationColor: [$c.bll3, $c.cyl5],
glow: true,
decoration: false
}),
config = reactive({
},
config: {
directionAlt: true,
rotate: "z",
opacity: 0.8,
backgroundColor: $c.bll9,
borderColor: $c.bll7,
glowColor: $c.fade($c.cyl5, .2),
decorationColor: [$c.bll3, $c.cyl5],
decoration: false,
}),
tableconfig = reactive({
backgroundColor: $c.bll9,
borderColor: $c.bll7,
decoration: false
}),
taskconfig = reactive({
titleColor: $c.cyl5
},
tableconfig: {
backgroundColor: $c.bll9,
borderColor: $c.bll7,
glowColor: $c.fade($c.cyl5, .2),
decorationColor: [$c.bll3, $c.aql5],
titleColor: $c.bll9,
glow: true
});
decoration: false
},
titleconfig: {
color: $c.cyl5,
decorationColor: $c.cyl5
},
menus: [],
activeitem: {}
});
const { leftConfig, rightConfig, systemconfig, config, tableconfig, titleconfig, menus, activeitem } = toRefs(state);
onMounted(() => {
getData();
})
function getData() {
queryAppAndMenus();
}
//应用
function queryAppAndMenus() {
postFetch({ url: "/index/queryAppAndMenus", params: {} }).then(res => {
if (res.code == "0000") {
menus.value = res?.data?.dataList ?? [];
activeitem.value = res?.data?.dataList?.[0] ?? {}
}
})
};
const handleClick = (it) => {
activeitem.value = it;
};
// const loop = (data) => {
// data.map(item => {
// if (item.children) {
// return (
// <template>1123</template>
// )
// }
// return (
// <template>789</template>
// )
// })
// };
// const RecursiveTreeNode = computed(() => {
// return <template>11</template>
// })
watch(() => activeitem.value, (newValue, oldValue) => {
console.log(newValue);
});
</script>
<style lang="less" scoped>
......@@ -136,7 +198,7 @@ const leftConfig = reactive({
.bgc(fade(@blA17, 70%));
display: inline-block;
height: 100%;
padding: 15px;
padding: 10px;
position: relative;
.icon {
......@@ -196,5 +258,43 @@ const leftConfig = reactive({
margin: 0;
}
}
.pad12 {
padding: 12px;
overflow: hidden;
}
.coltab {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
width: 162px;
.tabitem {
display: flex;
align-items: center;
padding: 0 12px;
width: 100%;
height: 40px;
cursor: pointer;
&.tabactive {
background: transparent;
border: none;
color: #fff;
background-color: rgb(1, 91, 133);
}
}
}
.tabcontent {
flex: 1;
height: 100%;
border: 1px solid #3d668e !important;
padding: 12px !important;
border-radius: 8px;
overflow-y: auto;
overflow-x: hidden;
}
}
</style>
\ No newline at end of file
src/pages/layouts/index.vue
View file @ 61149b86
......@@ -2,7 +2,7 @@
* @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-10 15:27:18
* @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-14 17:13:47
* @LastEditTime: 2023-08-15 14:06:37
* @FilePath: \vue3portal\src\pages\layouts\index.vue
* @Description:
*
......@@ -12,20 +12,9 @@
import elsheader from "./components/elsheader.vue";
import elsmain from "./components/elsmain.vue";
import "@/assets/less/main.less";
const state = reactive({
APConfig: {
width: 1920,
height: 974,
userSelect: true,
// chartCount:0
loading: false,
backgroundFillAll: false
}
})
</script>
<template>
<adaptivePanel :config='state.APConfig'>
<div class="colflex swh">
<div class="colflex swh lagoutbg">
<el-container style="overflow-y: hidden;">
<el-header height="40px" style="padding: 0;">
<elsheader></elsheader>
......@@ -35,9 +24,13 @@ const state = reactive({
</el-main>
</el-container>
</div>
</adaptivePanel>
</template>
<style lang="less" scoped></style>
\ No newline at end of file
<style lang="less" scoped>
.lagoutbg{
background: url("../../assets/image/bg.svg"), radial-gradient(ellipse at bottom,#053361 10%,#010d18 50%,#000000 100% );
background-repeat: repeat;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment