1743

src/assets/less/main.less

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

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

 <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

@@ -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>
+<style lang="less" scoped>
\ No newline at end of file
+.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