配置

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;

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>

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>

src/components/Header.vue

@@ -2,74 +2,83 @@
   <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>
+      <span style="font-size: 20px">{{ projectName }}</span>
+    </div>
+    <div class="div30" style="font-size: 24px; text-align: center">
+      {{ modelName }}
     </div>
-    <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 { onMounted, reactive, toRefs } from "vue";
-import { useRouter } from 'vue-router'
+import { useRouter } from "vue-router";
-import { localRemove, pathMap } from '@/utils'
+import { localRemove, pathMap } from "@/utils";
-import myApi from '@/api/myApi.js'
+import myApi from "@/api/myApi.js";
-import {useStore} from 'vuex';
+import { useStore } from "vuex";
-import dayjs from 'dayjs';
+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: '',
+      modelName: "",
-      currentTime: '',
+      currentTime: "",
-      interval: ''
+      interval: "",
-    })
+      projectName: ''
+    });
     onMounted(() => {
       // const pathname = window.location.hash.split('/')[1] || ''
       // if (!['login'].includes(pathname)) {
 
       // }
-      state.interval = setInterval(updateTime, 1000)
+      state.interval = setInterval(updateTime, 1000);
-    })
+      state.projectName = localGet('projectName') || "世博浦西区活水公园";
-    const getUserInfo = async () => {
+    });
-
+    const getUserInfo = async () => {};
-    }
     const logout = async () => {
-      router.push('/login')
+      router.push("/login");
-    }
+    };
     const back = () => {
-      router.push('/home')
+      router.push("/home");
-      store.commit("setModelName", '');
+      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)
+      console.log("to", to);
-      const { id } = to.query
+      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>
@@ -110,7 +119,8 @@ export default {
 </style>
 <style>
 .popper-user-box {
-    background: url('https://s.yezgea02.com/lingling-h5/static/account-banner-bg.png') 50% 50% no-repeat!important;
+  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;
 }

src/components/Index.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="index">
-      <div class="index-left">
+    <div class="index-left"></div>
-  
-      </div>
     <div class="index-right">
       <div class="one-card">
-          <div class="one-card-left">
-            
         <div class="one-card-content">
             <div>
               <p>节水量</p>
@@ -16,19 +12,6 @@
               <p>节碳量</p>
               <font><span class="font26">0.67</span>kg</font>
             </div>
-            </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>
@@ -39,19 +22,6 @@
               <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>
@@ -62,29 +32,16 @@
               <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
               <p>累计流量：<span class="font26">4</span>m³</p>
             </div>
-              <div class="mt10">
+            <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">
+            <div >
               <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>
@@ -100,12 +57,6 @@
               <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>
@@ -116,15 +67,14 @@
 import Menus from "@/components/Menus.vue";
 import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
 export default {
-    name: 'index',
+  name: "index",
   components: {
-      Menus
+    Menus,
   },
   setup() {
-      const state = reactive({
+    const state = reactive({});
-      })
+  },
-    }
+};
-  }
 </script>
   <style lang="scss" scoped>
 .mt10 {
@@ -146,60 +96,39 @@
         flex-direction: column;
         .one-card {
           width: 100%;
-        height: 260px;
+          height: 100%;
           box-shadow: 0 0 8px #99ACB0 inset;
-        display: flex;
-        justify-content: space-between;
-        .one-card-left {
-          width: 80%;
-          padding: 10px;
           
+          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-around;
-            justify-content: space-between;
+            align-items: center;
+
             >div {
-              width: 48%;
+              width: 46%;
-              // height: 48%;
+              // 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>

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;

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;

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')
     }
   ]
 })

src/utils/index.js

@@ -36,5 +36,6 @@ export const pathMap = {
   green: '世博浦西区活水公园',
   biology: '世博浦西区活水公园',
   shentou: '世博浦西区活水公园',
-  chuxu: '世博浦西区活水公园'
+  chuxu: '世博浦西区活水公园',
+  config: '世博浦西区活水公园'
 }

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>

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,56 +44,61 @@
 </template>
 
 <script>
-import md5 from 'js-md5';
+import md5 from "js-md5";
-import { reactive, ref, toRefs } from 'vue'
+import { reactive, ref, toRefs, onMounted } from "vue";
-import { localSet } from '@/utils'
 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: '',
+        username: "",
-        password: ''
+        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 || '',
+            userName: state.ruleForm.username || "",
-            passwordMd5: md5(state.ruleForm.password)
+            passwordMd5: md5(state.ruleForm.password),
-          }
+          };
           // const res = await myApi.login(param);
-          localSet('token', "81527a9e9e2594b58babdd7f623f112f")
+          localSet("token", "81527a9e9e2594b58babdd7f623f112f");
-          window.location.href = '/';
+          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>
@@ -86,7 +109,7 @@ export default {
   width: 100%;
   /* background-color: #fff; */
   /* background-image: linear-gradient(25deg, #077f7c, #3aa693, #5ecfaa, #7ffac2); */
-    background: url('../assets/bg1.png') no-repeat;
+  background: url("../assets/bg1.png") no-repeat;
   background-size: 100% 100%;
 }
 .login-container {
@@ -109,7 +132,7 @@ export default {
 }
 .head .title {
   font-size: 28px;
-    color: #1BAEAE;
+  color: #1baeae;
   font-weight: bold;
 }
 .head .tips {