diff --git a/src/api/request.js b/src/api/request.js
index 95b76695fbb7bba71c744a05478089d7630127c2..36d28a9a7003cb310480d03ab16a035fe8704eab 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -142,7 +142,7 @@ request.interceptors.response.use(async (response, options) => {
ElMessage.closeAll();
data?.msg && ElMessage({
message: data?.msg,
- type: 'warning',
+ type: 'warning'
});
}
if (data.code == "0001") {
diff --git a/src/assets/less/main.less b/src/assets/less/main.less
index 194fd78c5684229233f6359a7286ff1e545308c8..9e825247fc4c5befd7dc016b0aa03225ad2795c8 100644
--- a/src/assets/less/main.less
+++ b/src/assets/less/main.less
@@ -38,7 +38,30 @@ body {
.set3 {
flex: 3;
}
-.swh{
+
+.set4 {
+ flex: 4;
+}
+
+.swh {
width: 100%;
height: 100%;
+}
+
+.scrollbar {
+ &::-webkit-scrollbar {
+ width: 5px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: #05192e;
+ border-radius: 5px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ border-radius: 5px;
+ }
+
+ &::-webkit-scrollbar-button {}
}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index bfcd4aa82f72c4a7daacd0c329e9303cf18c281a..68da64992a362922d912c0f4d6357e6e82cea8be 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,14 @@
+/*
+ * @Author: zuolingling zuolingling@jsnangao.com
+ * @Date: 2023-08-14 13:31:41
+ * @LastEditors: zuolingling zuolingling@jsnangao.com
+ * @LastEditTime: 2023-08-14 13:31:41
+ * @FilePath: \vue3portal\src\main.js
+ * @Description:
+ *
+ * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
+ */
+import 'element-plus/dist/index.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
diff --git a/src/pages/layouts/components/elsheader.vue b/src/pages/layouts/components/elsheader.vue
index 7b42eb690ccffddc70fde27108d8e0bf5606cab1..c00f8650ab83ab8cef1b21b1a9436fbac8c1c3ea 100644
--- a/src/pages/layouts/components/elsheader.vue
+++ b/src/pages/layouts/components/elsheader.vue
@@ -2,7 +2,7 @@
* @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-10 17:03:11
* @LastEditors: zuolingling zuolingling@jsnangao.com
- * @LastEditTime: 2023-08-11 17:23:21
+ * @LastEditTime: 2023-08-14 17:16:10
* @FilePath: \vue3portal\src\pages\layouts\components\elsheader.vue
* @Description:
*
@@ -35,28 +35,62 @@
</el-dropdown>
</div>
<el-dialog v-model="dialogVisible" title="修改密ç " width="30%" :before-close="handleClose">
- <template #footer>
- <span class="dialog-footer">
- <el-button type="primary" @click="dialogVisible = false">
- æ交
- </el-button>
- </span>
- </template>
+ <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>
+ <el-form-item label="新密ç " prop="password">
+ <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
+ </el-form-item>
+ <el-form-item label="确认新密ç " prop="confirmPassword">
+ <el-input v-model="ruleForm.confirmPassword" type="password" autocomplete="off" />
+ </el-form-item>
+ <el-form-item>
+ <el-button style="width: 100%;" type="primary" @click="submitForm(ruleFormRef)"
+ :loading="loading">æ交</el-button>
+ </el-form-item>
+ </el-form>
</el-dialog>
</div>
</template>
<script setup>
-import { ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
import { Lock, SwitchButton } from "@element-plus/icons-vue";
-import { getFetch } from "@/api/doFetch";
+import { getFetch, postFetch } from "@/api/doFetch";
+const validatePass = (rule, value, callback) => {
+ if (value && value !== ruleForm.password) {
+ callback(new Error("2次密ç ä¸ä¸€è‡´ï¼"))
+ } else {
+ callback()
+ }
+};
const store = useStore();
+const currentUser = computed(() => {
+ return store.state.currentUser
+});
let titleconfig = reactive({
width: 1920,
scale: .75
}),
- dialogVisible = ref(false);
-const currentUser = computed(() => store.state.currentUser);
+ dialogVisible = ref(false),
+ ruleFormRef = ref({}),
+ loading = ref(false),
+ ruleForm = reactive({
+ username: '',
+ oldPassword: '',
+ password: '',
+ confirmPassword: ''
+ }),
+ rules = reactive({
+ oldPassword: [{ required: true, trigger: 'submit', }],
+ password: [{ required: true, trigger: 'submit', }],
+ confirmPassword: [{ validator: validatePass, trigger: 'blur', required: true }]
+ });
const loginOut = () => {
getFetch({ url: "/logout", params: {} }).then(res => {
window.location.href = res?.logoutRedirectUrl;
@@ -66,6 +100,7 @@ const loginOut = () => {
const handleCommand = (command) => {
if (command == "pwd") {
dialogVisible.value = true;
+ ruleFormRef.value.resetFields()
} else {
store.commit('CHANGE_USER', {
currentUser: {}
@@ -75,10 +110,35 @@ const handleCommand = (command) => {
};
const handleClose = () => {
dialogVisible.value = false;
-}
-// watch(() => dialogVisible.value, (newValue, oldValue) => {
-// console.log(newValue, oldValue);
-// })
+};
+const submitForm = async (formEl) => {
+ if (!formEl) return
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ loading.value = true;
+ let newfields = JSON.parse(JSON.stringify(ruleForm));
+ delete newfields.username;
+ postFetch({ url: "/user/updatePassword", params: { ...newfields } }).then(res => {
+ if (res?.code == "0000") {
+ ElMessage.success('密ç 修改æˆåŠŸ,请é‡æ–°ç™»å½•');
+ store.commit('CHANGE_USER', {
+ currentUser: {}
+ });
+ loginOut();
+ }
+ loading.value = false;
+ dialogVisible.value = false;
+ })
+
+ } else {
+ return false
+ }
+ })
+};
+watch(() => currentUser.value?.username, (newValue, oldValue) => {
+ ruleForm.username = newValue;
+})
+
</script>
@@ -89,7 +149,6 @@ const handleClose = () => {
padding: 0 18px;
height: 100%;
justify-content: flex-end;
-
.headerright {
height: 100%;
gap: 15px
diff --git a/src/pages/layouts/components/elsmain.vue b/src/pages/layouts/components/elsmain.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a18d77bf7d62f05e2e6fe4f8d8eec67cfb7e204a
--- /dev/null
+++ b/src/pages/layouts/components/elsmain.vue
@@ -0,0 +1,200 @@
+<template>
+ <div class="mainbox">
+ <div class="set3 colflex leftbox">
+ <div class="box2">
+ <aYinTechBorderA1 :config="{ ...leftConfig, title: '设备状æ€' }"></aYinTechBorderA1>
+ </div>
+ <div class="box2">
+ <aYinTechBorderA1 :config="{ ...leftConfig, title: '设备开动率' }"></aYinTechBorderA1>
+ </div>
+ <div class="box3">
+ <aYinTechBorderA1 :config="{ ...leftConfig, title: '任务待办' }"></aYinTechBorderA1>
+ </div>
+ <div class="box2">
+ <aYinTechBorderA1 :config="{ ...leftConfig, title: '生产数æ®' }"></aYinTechBorderA1>
+ </div>
+ </div>
+ <div class="set4 colflex" style="justify-content: space-between;">
+ <div class="middlebox">
+ <aYinTechBorderB4 :config="systemconfig"></aYinTechBorderB4>
+ </div>
+ <div class="box1 rowflex" style="gap:15px">
+ <div class="item5 counter-item"></div>
+ <div class="item5 counter-item"></div>
+ <div class="item5 counter-item"></div>
+ <div class="item5 counter-item"></div>
+ <div class="item5 counter-item"></div>
+ </div>
+ <div class="box3">
+ <aYinTechBorderB1 :config="config"></aYinTechBorderB1>
+ </div>
+ </div>
+ <div class="set3 colflex leftbox">
+ <div class="box2">
+ <aYinTechBorderA1 :config="{ ...rightConfig, title: '能耗统计' }"></aYinTechBorderA1>
+ </div>
+ <div class="box2">
+ <aYinTechBorderA1 :config="{ ...rightConfig, title: '用电趋势' }"></aYinTechBorderA1>
+ </div>
+ <div class="box3">
+ <aYinTechBorderB3 :config="tableconfig"></aYinTechBorderB3>
+ </div>
+ <div class="box2">
+ <aYinTechBorderA1 :config="{ ...rightConfig, title: 'è´¨é‡åˆæ ¼çŽ‡è¶‹åŠ¿', titleWidth: 120 }"></aYinTechBorderA1>
+ </div>
+
+ </div>
+ </div>
+</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({
+ backgroundColor: $c.bll9,
+ decorationColor: [$c.bll3, $c.cyl5],
+ borderColor: $c.bll7,
+ titleWidth: 100,
+ titleColor: $c.cyl5
+ }),
+ systemconfig = reactive({
+ backgroundColor: $c.bll9,
+ borderColor: $c.bll7,
+ glowColor: $c.fade($c.cyl5, .3),
+ decorationColor: [$c.bll3, $c.cyl5],
+ glow: true,
+ decoration: false
+ }),
+ config = reactive({
+ 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({
+ backgroundColor: $c.bll9,
+ borderColor: $c.bll7,
+ glowColor: $c.fade($c.cyl5, .2),
+ decorationColor: [$c.bll3, $c.aql5],
+ titleColor: $c.bll9,
+ glow: true
+ });
+</script>
+
+<style lang="less" scoped>
+.mainbox {
+ overflow-y: auto;
+ overflow-x: hidden;
+ display: flex;
+ gap: 18px;
+
+ .leftbox {
+ gap: 15px;
+ }
+
+ .box1 {
+ width: 100%;
+ height: 100px;
+ }
+
+ .box2 {
+ width: 100%;
+ height: 200px;
+ }
+
+ .box3 {
+ width: 100%;
+ height: 300px;
+ }
+
+ .middlebox {
+ width: 100%;
+ height: 500px;
+ }
+
+ .item5 {
+ height: 100%;
+ flex: 1;
+ }
+
+ .counter-item {
+ .bdl(@blA15, 3px);
+ .bdFilter;
+ .bgc(fade(@blA17, 70%));
+ display: inline-block;
+ height: 100%;
+ padding: 15px;
+ position: relative;
+
+ .icon {
+ .fc(var(--font-normal));
+ font-size: 32px;
+ z-index: 1;
+ .poa;
+ left: 5px;
+ top: 50%;
+ .fixc("y");
+ width: 50px;
+ height: 58px;
+ line-height: 60px;
+ text-align: center;
+ }
+
+ .name {
+ .fc(var(--font-normal));
+ font-size: 16px;
+ .ff("cn1");
+ z-index: 1;
+ .por;
+
+ .unit {
+ font-size: 12px;
+ }
+ }
+
+ .content {
+ .fc(var(--font-normal));
+ margin: 10px 0;
+
+ .num {
+ font-size: 24px;
+ .por;
+ font-weight: bold;
+ .ff("en0");
+ .fc(var(--font-normal));
+
+ .dt-scroll-digital {
+ text-align: center;
+ }
+
+ .plus {
+ .poa;
+ left: 101%;
+ top: -5px;
+ font-size: 12px;
+ .fc(var(--font-normal));
+ font-weight: normal;
+ .ff("arial");
+ }
+ }
+ }
+
+ &:last-child {
+ margin: 0;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/layouts/index.vue b/src/pages/layouts/index.vue
index 392dfb238527f2feb62b4161f124d58d318690cc..b67c400dac56f0da4a968997610a8bd23940c934 100644
--- a/src/pages/layouts/index.vue
+++ b/src/pages/layouts/index.vue
@@ -2,7 +2,7 @@
* @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-10 15:27:18
* @LastEditors: zuolingling zuolingling@jsnangao.com
- * @LastEditTime: 2023-08-11 11:19:18
+ * @LastEditTime: 2023-08-14 17:13:47
* @FilePath: \vue3portal\src\pages\layouts\index.vue
* @Description:
*
@@ -10,30 +10,32 @@
-->
<script setup>
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,
+const state = reactive({
+ APConfig: {
+ width: 1920,
+ height: 974,
+ userSelect: true,
// chartCount:0
- loading:false,
- backgroundFillAll:false
+ loading: false,
+ backgroundFillAll: false
}
})
</script>
<template>
<adaptivePanel :config='state.APConfig'>
<div class="colflex swh">
- <el-container>
- <el-header height="40px" style="padding: 0;">
- <elsheader></elsheader>
- </el-header>
- <el-main style="flex:1;">Main</el-main>
- </el-container>
- </div>
+ <el-container style="overflow-y: hidden;">
+ <el-header height="40px" style="padding: 0;">
+ <elsheader></elsheader>
+ </el-header>
+ <el-main class="scrollbar" style="flex:1;">
+ <elsmain></elsmain>
+ </el-main>
+ </el-container>
+ </div>
</adaptivePanel>
-
</template>