1748

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") {

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

src/main.js

+/*
+ * @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'

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

src/pages/layouts/components/elsmain.vue

+<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

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>