From ccbaaed0aacf81c1875f16af2fd6b67b044e6218 Mon Sep 17 00:00:00 2001
From: wangqiujuan0808 <578331299@qq.com>
Date: Tue, 31 Oct 2023 23:45:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Bindex.vue |   3 +-
 src/components/Cindex.vue |   1 -
 src/components/Gindex.vue |   1 -
 src/components/Header.vue | 178 +++++++++++++-----------
 src/components/Index.vue  | 283 ++++++++++++++------------------------
 src/components/Sindex.vue |   3 +-
 src/components/Windex.vue |   3 +-
 src/router/index.js       |   5 +
 src/utils/index.js        |   3 +-
 src/views/Config.vue      | 131 ++++++++++++++++++
 src/views/Login.vue       | 177 +++++++++++++-----------
 11 files changed, 441 insertions(+), 347 deletions(-)
 create mode 100644 src/views/Config.vue

diff --git a/src/components/Bindex.vue b/src/components/Bindex.vue
index 1fdf99f..438fa94 100644
--- a/src/components/Bindex.vue
+++ b/src/components/Bindex.vue
@@ -5,7 +5,6 @@
       </div>
       <div class="index-right">
         <div class="one-card">
-          <h2>数据显示</h2>
             <div class="one-card-content">
               <div>
                 <p>生物滞留区域面积</p>
@@ -86,7 +85,7 @@
           }
           .one-card-content {
             width: 100%;
-            height: 90%;
+            height: 100%;
             display: flex;
             flex-wrap: wrap;
             justify-content: space-around;
diff --git a/src/components/Cindex.vue b/src/components/Cindex.vue
index 3436ffe..fd88102 100644
--- a/src/components/Cindex.vue
+++ b/src/components/Cindex.vue
@@ -5,7 +5,6 @@
       </div>
       <div class="index-bottom">
         <div class="one-card">
-          <h2>数据显示</h2>
             <div class="one-card-content">
               <div>
                 <p>地块面积</p>
diff --git a/src/components/Gindex.vue b/src/components/Gindex.vue
index e9dc0c2..b9e8836 100644
--- a/src/components/Gindex.vue
+++ b/src/components/Gindex.vue
@@ -5,7 +5,6 @@
       </div>
       <div class="index-bottom">
         <div class="one-card">
-          <h2>数据显示</h2>
             <div class="one-card-content">
               <div>
                 <p>径流系数</p>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index e29dbb0..e13f6cb 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,127 +1,137 @@
 <template>
   <div class="header">
     <div class="div30 left" @click="back" style="cursor: pointer">
-      <i v-if="hasBack" class="el-icon-back" ></i>
-      <span style="font-size: 20px">{{ name  }}</span>
+      <i v-if="hasBack" class="el-icon-back"></i>
+      <span style="font-size: 20px">{{ projectName }}</span>
     </div>
-    <div class="div30" style="font-size: 24px;text-align: center;">{{modelName}}</div>
-    <div class="right div30 ">
+    <div class="div30" style="font-size: 24px; text-align: center">
+      {{ modelName }}
+    </div>
+    <div class="right div30">
       <p class="mr10">
         {{ currentTime }}
       </p>
       <p class="mr10">登录名： admin</p>
       <img src="../assets/index.png" alt="" class="mr10" @click="back"/>
-      <el-tag size="small" effect="dark" class="logout" @click="logout">退出</el-tag>
+      <el-icon size="32" class="mr10" @click="setting"><Setting /></el-icon>
+      <el-icon size="32" class="mr10" @click="logout"><SwitchButton /></el-icon>
     </div>
   </div>
 </template>
 
 <script>
-import { onMounted, reactive, toRefs } from 'vue'
-import { useRouter } from 'vue-router'
-import { localRemove, pathMap } from '@/utils'
-import myApi from '@/api/myApi.js'
-import {useStore} from 'vuex';
-import dayjs from 'dayjs';
+import { onMounted, reactive, toRefs } from "vue";
+import { useRouter } from "vue-router";
+import { localRemove, pathMap } from "@/utils";
+import myApi from "@/api/myApi.js";
+import { useStore } from "vuex";
+import dayjs from "dayjs";
+import { localSet,localGet } from '@/utils';
 export default {
-  name: 'Header',
+  name: "Header",
   setup() {
-    const router = useRouter()
+    const router = useRouter();
     const store = useStore();
     const state = reactive({
-      name: 'dashboard',
+      name: "dashboard",
       userInfo: null,
       hasBack: false,
-      modelName: '',
-      currentTime: '',
-      interval: ''
-    })
+      modelName: "",
+      currentTime: "",
+      interval: "",
+      projectName: ''
+    });
     onMounted(() => {
       // const pathname = window.location.hash.split('/')[1] || ''
       // if (!['login'].includes(pathname)) {
-        
-      // }
-      state.interval = setInterval(updateTime, 1000)
-    })
-    const getUserInfo = async () => {
 
-    }
+      // }
+      state.interval = setInterval(updateTime, 1000);
+      state.projectName = localGet('projectName') || "世博浦西区活水公园";
+    });
+    const getUserInfo = async () => {};
     const logout = async () => {
-      router.push('/login')
-    }
+      router.push("/login");
+    };
     const back = () => {
-      router.push('/home')
-      store.commit("setModelName", '');
-    }
+      router.push("/home");
+      store.commit("setModelName", "");
+    };
     const updateTime = () => {
-      state.currentTime = dayjs().format('YYYY年 MM月 DD日 HH:mm:ss')
+      state.currentTime = dayjs().format("YYYY年 MM月 DD日 HH:mm:ss");
+    };
+
+    const setting = () => {
+      router.push("/config");
     }
     router.afterEach((to) => {
-      console.log('to', to)
-      const { id } = to.query
+      console.log("to", to);
+      const { id } = to.query;
       state.name = pathMap[to.name];
       state.modelName = store.state.modelName;
       // state.hasBack = ['level2', 'level3', 'order_detail'].includes(to.name)
-    })
+    });
     return {
       ...toRefs(state),
       logout,
-      back
-    }
-  }
-}
+      back,
+      setting
+    };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .header {
-    height: 50px;
-    border-bottom: 1px solid #e9e9e9;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 20px;
-    .div30 {
-      width: 33%;
-    }
+.header {
+  height: 50px;
+  border-bottom: 1px solid #e9e9e9;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  .div30 {
+    width: 33%;
   }
-  .el-icon-back {
-    border: 1px solid #e9e9e9;
-    padding: 4px;
-    border-radius: 50px;
-    margin-right: 10px;
-  }
-  .right {
-    display: flex;
-    justify-content: end;
-    align-items: center;
-    cursor: pointer;
-    img {
-      width: 32px;
-    }
-  }
-  .right > div > .icon{
-    font-size: 18px;
-    margin-right: 6px;
-  }
-  .author {
-    margin-left: 10px;
-    cursor: pointer;
+}
+.el-icon-back {
+  border: 1px solid #e9e9e9;
+  padding: 4px;
+  border-radius: 50px;
+  margin-right: 10px;
+}
+.right {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  cursor: pointer;
+  img {
+    width: 32px;
   }
+}
+.right > div > .icon {
+  font-size: 18px;
+  margin-right: 6px;
+}
+.author {
+  margin-left: 10px;
+  cursor: pointer;
+}
 </style>
 <style>
-  .popper-user-box {
-    background: url('https://s.yezgea02.com/lingling-h5/static/account-banner-bg.png') 50% 50% no-repeat!important;
-    background-size: cover!important;
-    border-radius: 0!important;
-  }
-  .popper-user-box .nickname {
-    position: relative;
-    color: #000;
-  }
-  .popper-user-box .nickname .logout {
-    position: absolute;
-    right: 0;
-    top: 0;
-    cursor: pointer;
-  }
+.popper-user-box {
+  background: url("https://s.yezgea02.com/lingling-h5/static/account-banner-bg.png")
+    50% 50% no-repeat !important;
+  background-size: cover !important;
+  border-radius: 0 !important;
+}
+.popper-user-box .nickname {
+  position: relative;
+  color: #000;
+}
+.popper-user-box .nickname .logout {
+  position: absolute;
+  right: 0;
+  top: 0;
+  cursor: pointer;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Index.vue b/src/components/Index.vue
index 99c64f0..61df449 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -1,205 +1,134 @@
 <template>
-    <div class="index"> 
-      <div class="index-left">
-  
-      </div>
-      <div class="index-right">
-        <div class="one-card">
-          <div class="one-card-left">
-            
-            <div class="one-card-content">
-              <div>
-                <p>节水量</p>
-                <font><span class="font26">4.00</span>m³</font>
-              </div>
-              <div>
-                <p>节碳量</p>
-                <font><span class="font26">0.67</span>kg</font>
-              </div>
+  <div class="index">
+    <div class="index-left"></div>
+    <div class="index-right">
+      <div class="one-card">
+        <div class="one-card-content">
+            <div>
+              <p>节水量</p>
+              <font><span class="font26">4.00</span>m³</font>
+            </div>
+            <div>
+              <p>节碳量</p>
+              <font><span class="font26">0.67</span>kg</font>
+            </div>
+             <div>
+              <p>原水箱液位：<span class="font26">0.39</span>m</p>
+              <p>历史最高：<span class="font26">0.50</span>m</p>
+              <p>历史最低：<span class="font26">0.24</span>m</p>
+            </div>
+            <div>
+              <p>净水箱液位：<span class="font26">0.81</span>m</p>
+              <p>历史最高：<span class="font26">1.63</span>m</p>
+              <p>历史最低：<span class="font26">0.48</span>m</p>
+            </div>
+             <div>
+              <p>UF产水</p>
+              <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
+              <p>累计流量：<span class="font26">4</span>m³</p>
+            </div>
+            <div>
+              <p>自来水前端</p>
+              <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
+              <p>累计流量：<span class="font26">4</span>m³</p>
+            </div>
+            <div >
+              <p>供水</p>
+              <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
+              <p>累计流量：<span class="font26">4</span>m³</p>
+            </div>
+            <div >
+              <p>自来水后端</p>
+              <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
+              <p>累计流量：<span class="font26">4</span>m³</p>
+            </div>
+            <div>
+              <p>原水水质</p>
+              <p>余氯：<span class="font26">0.00</span> mg/L</p>
+              <p>浊度：<span class="font26">1.63</span> mg/L</p>
+              <p>氨氮：<span class="font26">1.41</span> mg/L</p>
+              <p>COD：<span class="font26">4.80</span> mg/L</p>
+            </div>
+            <div>
+              <p>净水水质</p>
+              <p>余氯：<span class="font26">-0.73</span> mg/L</p>
+              <p>浊度：<span class="font26">3.56</span> mg/L</p>
+              <p>氨氮：<span class="font26">41.89</span> mg/L</p>
+              <p>COD：<span class="font26">3.53</span> mg/L</p>
             </div>
           </div>
-          <div class="color0 one-card-right">
-            <h3>
-              节水与节碳
-            </h3>
-          </div>
-          
-        </div>
-        <div class="one-card">
-          <div class="one-card-left">
-           
-            <div class="one-card-content">
-              <div>
-                <p>原水箱液位：<span class="font26">0.39</span>m</p>
-                <p>历史最高：<span class="font26">0.50</span>m</p>
-                <p>历史最低：<span class="font26">0.24</span>m</p>
-              </div>
-              <div>
-                <p>净水箱液位：<span class="font26">0.81</span>m</p>
-                <p>历史最高：<span class="font26">1.63</span>m</p>
-                <p>历史最低：<span class="font26">0.48</span>m</p>
-              </div>
-            </div>
-          </div>
-          <div class="color1 one-card-right">
-            <h3>
-              液位
-            </h3>
-          </div>
-          
-        </div>
-        <div class="one-card">
-          <div class="one-card-left">
-           
-            <div class="one-card-content">
-              <div>
-                <p>UF产水</p>
-                <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
-                <p>累计流量：<span class="font26">4</span>m³</p>
-              </div>
-              <div>
-                <p>自来水前端</p>
-                <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
-                <p>累计流量：<span class="font26">4</span>m³</p>
-              </div>
-              <div class="mt10">
-                <p>供水</p>
-                <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
-                <p>累计流量：<span class="font26">4</span>m³</p>
-              </div>
-              <div class="mt10">
-                <p>自来水后端</p>
-                <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
-                <p>累计流量：<span class="font26">4</span>m³</p>
-              </div>
-            </div>
-          </div>
-          <div class="color2 one-card-right">
-            <h3>
-              流量
-            </h3>
-          </div>
-          
-        </div>
-        <div class="one-card">
-          <div class="one-card-left">
-            
-            <div class="one-card-content">
-              <div>
-                <p>原水水质</p>
-                <p>余氯：<span class="font26">0.00</span> mg/L</p>
-                <p>浊度：<span class="font26">1.63</span> mg/L</p>
-                <p>氨氮：<span class="font26">1.41</span> mg/L</p>
-                <p>COD：<span class="font26">4.80</span> mg/L</p>
-              </div>
-              <div>
-                <p>净水水质</p>
-                <p>余氯：<span class="font26">-0.73</span> mg/L</p>
-                <p>浊度：<span class="font26">3.56</span> mg/L</p>
-                <p>氨氮：<span class="font26">41.89</span> mg/L</p>
-                <p>COD：<span class="font26">3.53</span> mg/L</p>
-              </div>
-            </div>
-          </div>
-          <div class="color3 one-card-right">
-            <h3>
-              水质
-            </h3>
-          </div>
-          
-        </div>
+        
       </div>
     </div>
-  </template>
+  </div>
+</template>
   
   <script>
-  import Menus from "@/components/Menus.vue";
-  import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
-  export default {
-    name: 'index',
-    components: {
-      Menus
-    },
-    setup() {
-      const state = reactive({
-      })
-    }
-  }
-  </script>
+import Menus from "@/components/Menus.vue";
+import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
+export default {
+  name: "index",
+  components: {
+    Menus,
+  },
+  setup() {
+    const state = reactive({});
+  },
+};
+</script>
   <style lang="scss" scoped>
-  .mt10 {
-      margin-top: 10px;
-    }
-    .index {
-      width: 100%;
-      height:100%;
-      display: flex;
-      justify-content: space-between;
-      .index-left {
-        width: 69%;
-        border: 1px solid rgb(179, 174, 174);
-      }
-      .index-right {
-        width: 30%;
-        display: flex;
+.mt10 {
+  margin-top: 10px;
+}
+.index {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  .index-left {
+    width: 69%;
+    border: 1px solid rgb(179, 174, 174);
+  }
+  .index-right {
+    width: 30%;
+    display: flex;
         justify-content: space-between;
         flex-direction: column;
         .one-card {
-        width: 100%;
-        height: 260px;
-        box-shadow: 0 0 8px #99ACB0 inset;
-        display: flex;
-        justify-content: space-between;
-        .one-card-left {
-          width: 80%;
-          padding: 10px;
+          width: 100%;
+          height: 100%;
+          box-shadow: 0 0 8px #99ACB0 inset;
           
+          h2 {
+            padding: 20px;
+            text-align: center;
+          }
           .one-card-content {
             width: 100%;
             height: 100%;
             display: flex;
             flex-wrap: wrap;
-            // border: 1px solid #1840af;
-            justify-content: space-between;
+            justify-content: space-around;
+            align-items: center;
+
             >div {
-              width: 48%;
-              // height: 48%;
+              width: 46%;
+              // height: 22%;
               border: 1px solid rgb(197, 195, 195);
               display: flex;
               flex-direction: column;
+              background:#d8e8f7;
               // align-items: center;
               justify-content: center;
-              text-align: left;
+              text-align: center;
               padding: 10px;
               border-radius: 10px;
-              font-size: 16px;
+              font-size: 20px;
+              line-height: 40px;
+              margin: 10px 0;
             }
           }
         }
-        .one-card-right {
-          width: 20%;
-          background: #ddd;
-          h3 {
-            width: 100%;
-            height:100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-        }
-        .color0 {
-          background: linear-gradient(to right, rgb(171, 187, 187), #7BB7B7);
-        }
-        .color1 {
-          background: linear-gradient(to right, #e2eff1, #99ACB0);
-        }
-        .color2 {
-          background: linear-gradient(to right, #b8e5f5, #6ED2F6);
-        }
-        .color3 {
-          background: linear-gradient(to right, #bfdad9, #A3D8D6);
-        }
-      }
-      }
-    }
-  </style>
\ No newline at end of file
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Sindex.vue b/src/components/Sindex.vue
index d6aa387..d192d89 100644
--- a/src/components/Sindex.vue
+++ b/src/components/Sindex.vue
@@ -31,7 +31,6 @@
       </div>
       <div class="index-right">
         <div class="one-card">
-          <h2>数据显示</h2>
             <div class="one-card-content">
               <div>
                 <p>透水铺装面积</p>
@@ -143,7 +142,7 @@
           box-shadow: 0 0 8px #99ACB0 inset;
           .one-card-content {
             width: 100%;
-            height: 90%;
+            height: 100%;
             display: flex;
             flex-wrap: wrap;
             justify-content: space-around;
diff --git a/src/components/Windex.vue b/src/components/Windex.vue
index 565e24a..65f0052 100644
--- a/src/components/Windex.vue
+++ b/src/components/Windex.vue
@@ -5,7 +5,6 @@
       </div>
       <div class="index-right">
         <div class="one-card">
-          <h2>数据显示</h2>
             <div class="one-card-content">
               <div>
                 <p>降雨量</p>
@@ -86,7 +85,7 @@
           }
           .one-card-content {
             width: 100%;
-            height: 90%;
+            height: 100%;
             display: flex;
             flex-wrap: wrap;
             justify-content: space-around;
diff --git a/src/router/index.js b/src/router/index.js
index 737f34d..865903d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -56,6 +56,11 @@ const router = createRouter({
       path: '/chuxu',
       name: 'chuxu',
       component: () => import(/* webpackChunkName: "link" */ '../views/Chuxu.vue')
+    },
+    {
+      path: '/config',
+      name: 'config',
+      component: () => import(/* webpackChunkName: "link" */ '../views/Config.vue')
     }
   ]
 })
diff --git a/src/utils/index.js b/src/utils/index.js
index 1f9423c..e19fab2 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -36,5 +36,6 @@ export const pathMap = {
   green: '世博浦西区活水公园',
   biology: '世博浦西区活水公园',
   shentou: '世博浦西区活水公园',
-  chuxu: '世博浦西区活水公园'
+  chuxu: '世博浦西区活水公园',
+  config: '世博浦西区活水公园'
 }
\ No newline at end of file
diff --git a/src/views/Config.vue b/src/views/Config.vue
new file mode 100644
index 0000000..e4de82e
--- /dev/null
+++ b/src/views/Config.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="home">
+    <el-form
+      ref="ruleFormRef"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="180px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="项目名称配置：" prop="name">
+        <el-input v-model="ruleForm.name" />
+      </el-form-item>
+      <el-form-item label="登陆背景配置：" prop="loginImage">
+        <el-upload
+          class="avatar-uploader"
+          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload"
+        >
+          <img
+            v-if="ruleForm.loginImage"
+            :src="ruleForm.loginImage"
+            class="avatar"
+          />
+          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="主页背景配置：" prop="bgImage">
+        <el-upload
+          class="avatar-uploader"
+          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload"
+        >
+          <img
+            v-if="ruleForm.bgImage"
+            :src="ruleForm.bgImage"
+            class="avatar"
+          />
+          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+        </el-upload>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm()"> 提交 </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
+import { useRouter } from "vue-router";
+import { useStore } from "vuex";
+import { localSet,localGet } from '@/utils'
+export default {
+  name: "home",
+  setup() {
+    const ruleFormRef = ref(null);
+    const router = useRouter();
+    const store = useStore();
+    const state = reactive({
+      ruleForm: {
+        name: '',
+        loginImage: "",
+        bgImage: "",
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入项目名称",
+            trigger: "change",
+          },
+        ],
+      },
+    });
+    onMounted(() => {
+      state.ruleForm.name = localGet('projectName') || '世博浦西区活水公园';
+    })
+    const submitForm = async () => {
+      ruleFormRef.value.validate(async (valid) => {
+        if (valid) {
+          localSet('projectName', state.ruleForm.name);
+          router.go(0);
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    };
+    return {
+      ...toRefs(state),
+      submitForm,
+      ruleFormRef,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.home {
+  width: 100%;
+  height: 100%;
+  // background: url(../assets/bg2.png) left top no-repeat;
+  // background-size: 100% 100%;
+  // border: 1px solid rgb(180, 20, 180);
+  display: flex;
+  justify-content: space-between;
+  .avatar-uploader {
+    ::v-deep .el-upload {
+      border: 1px dashed #99acb0;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    ::v-deep .el-upload:hover {
+      border-color: #99acb0;
+    }
+  }
+
+  .el-icon.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    text-align: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
index df6c7f6..1bfb276 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -4,20 +4,38 @@
       <div class="head">
         <!-- <img class="logo" src="https://s.weituibao.com/1582958061265/mlogo.png" /> -->
         <div class="name">
-          <div class="title">世博浦西区活水公园</div>
+          <div class="title">{{projectName}}</div>
           <!-- <div class="tips">Vue3.0 后台管理系统</div> -->
         </div>
       </div>
-      <el-form label-position="top" :rules="rules" :model="ruleForm" ref="loginForm" class="login-form">
+      <el-form
+        label-position="top"
+        :rules="rules"
+        :model="ruleForm"
+        ref="loginForm"
+        class="login-form"
+      >
         <el-form-item label="账号" prop="username">
-          <el-input type="text" v-model.trim="ruleForm.username" autocomplete="off" @keyup.enter="submitForm"></el-input>
+          <el-input
+            type="text"
+            v-model.trim="ruleForm.username"
+            autocomplete="off"
+            @keyup.enter="submitForm"
+          ></el-input>
         </el-form-item>
         <el-form-item label="密码" prop="password">
-          <el-input type="password" v-model.trim="ruleForm.password" autocomplete="off" @keyup.enter="submitForm" ></el-input>
+          <el-input
+            type="password"
+            v-model.trim="ruleForm.password"
+            autocomplete="off"
+            @keyup.enter="submitForm"
+          ></el-input>
         </el-form-item>
         <el-form-item>
           <!-- <div style="color: #333">登录表示您已同意<a>《服务条款》</a></div> -->
-          <el-button style="width: 100%" type="primary" @click="submitForm">立即登录</el-button>
+          <el-button style="width: 100%" type="primary" @click="submitForm" @keyup.enter="submitForm"
+            >立即登录</el-button
+          >
           <!-- <el-checkbox v-model="checked" @change="!checked">下次自动登录</el-checkbox> -->
         </el-form-item>
       </el-form>
@@ -26,106 +44,111 @@
 </template>
 
 <script>
-import md5 from 'js-md5';
-import { reactive, ref, toRefs } from 'vue'
-import { localSet } from '@/utils'
+import md5 from "js-md5";
+import { reactive, ref, toRefs, onMounted } from "vue";
 import myApi from "@/api/myApi.js";
+import { localSet, localGet } from "@/utils";
 export default {
-  name: 'Login',
+  name: "Login",
   setup() {
-    const loginForm = ref(null)
+    const loginForm = ref(null);
     const state = reactive({
+      projectName: "",
       ruleForm: {
-        username: '',
-        password: ''
+        username: "",
+        password: "",
       },
       checked: true,
       rules: {
         username: [
-          { required: 'true', message: '账户不能为空', trigger: 'blur' }
+          { required: "true", message: "账户不能为空", trigger: "blur" },
         ],
         password: [
-          { required: 'true', message: '密码不能为空', trigger: 'blur' }
-        ]
-      }
-    })
+          { required: "true", message: "密码不能为空", trigger: "blur" },
+        ],
+      },
+    });
+
+    onMounted(() => {
+      state.projectName = localGet("projectName") || "世博浦西区活水公园";
+    });
     const submitForm = async () => {
       loginForm.value.validate(async (valid) => {
         if (valid) {
           const param = {
-            userName: state.ruleForm.username || '',
-            passwordMd5: md5(state.ruleForm.password)
-          }
+            userName: state.ruleForm.username || "",
+            passwordMd5: md5(state.ruleForm.password),
+          };
           // const res = await myApi.login(param);
-          localSet('token', "81527a9e9e2594b58babdd7f623f112f")
-          window.location.href = '/';
+          localSet("token", "81527a9e9e2594b58babdd7f623f112f");
+          window.location.href = "/";
         } else {
-          console.log('error submit!!')
+          console.log("error submit!!");
           return false;
         }
-      })
-    }
+      });
+    };
     const resetForm = () => {
       loginForm.value.resetFields();
-    }
+    };
     return {
       ...toRefs(state),
       loginForm,
       submitForm,
-      resetForm
-    }
-  }
-}
+      resetForm,
+    };
+  },
+};
 </script>
 
 <style scoped>
-  .login-body {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    /* background-color: #fff; */
-    /* background-image: linear-gradient(25deg, #077f7c, #3aa693, #5ecfaa, #7ffac2); */
-    background: url('../assets/bg1.png') no-repeat;
-    background-size: 100% 100%;
-  }
-  .login-container {
-    width: 420px;
-    height: 400px;
-    background-color: #fff;
-    border-radius: 4px;
-    box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
-  }
-  .head {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 40px 0 20px 0;
-  }
-  .head img {
-    width: 100px;
-    height: 100px;
-    margin-right: 20px;
-  }
-  .head .title {
-    font-size: 28px;
-    color: #1BAEAE;
-    font-weight: bold;
-  }
-  .head .tips {
-    font-size: 12px;
-    color: #999;
-  }
-  .login-form {
-    width: 70%;
-    margin: 0 auto;
-  }
+.login-body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  /* background-color: #fff; */
+  /* background-image: linear-gradient(25deg, #077f7c, #3aa693, #5ecfaa, #7ffac2); */
+  background: url("../assets/bg1.png") no-repeat;
+  background-size: 100% 100%;
+}
+.login-container {
+  width: 420px;
+  height: 400px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0px 21px 41px 0px rgba(0, 0, 0, 0.2);
+}
+.head {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 0 20px 0;
+}
+.head img {
+  width: 100px;
+  height: 100px;
+  margin-right: 20px;
+}
+.head .title {
+  font-size: 28px;
+  color: #1baeae;
+  font-weight: bold;
+}
+.head .tips {
+  font-size: 12px;
+  color: #999;
+}
+.login-form {
+  width: 70%;
+  margin: 0 auto;
+}
 </style>
 <style>
-  .el-form--label-top .el-form-item__label {
-    padding: 0;
-  }
-  .login-form .el-form-item {
-    margin-bottom: 20px;
-  }
+.el-form--label-top .el-form-item__label {
+  padding: 0;
+}
+.login-form .el-form-item {
+  margin-bottom: 20px;
+}
 </style>
\ No newline at end of file