修改问题

package-lock.json

@@ -12,6 +12,7 @@
         "@sentry/browser": "^6.3.1",
         "@sentry/tracing": "^6.3.1",
         "axios": "^0.21.1",
+        "dayjs": "^1.11.10",
         "echarts": "^5.4.2",
         "element-plus": "^2.3.4",
         "js-base64": "^3.7.5",
@@ -2512,9 +2513,9 @@
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
     "node_modules/dayjs": {
-      "version": "1.11.7",
+      "version": "1.11.10",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "node_modules/debug": {
       "version": "2.6.9",
@@ -8915,9 +8916,9 @@
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
     "dayjs": {
-      "version": "1.11.7",
+      "version": "1.11.10",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
-      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "debug": {
       "version": "2.6.9",

package.json

@@ -14,6 +14,7 @@
     "@sentry/browser": "^6.3.1",
     "@sentry/tracing": "^6.3.1",
     "axios": "^0.21.1",
+    "dayjs": "^1.11.10",
     "echarts": "^5.4.2",
     "element-plus": "^2.3.4",
     "js-base64": "^3.7.5",

src/components/Bindex.vue

@@ -9,32 +9,32 @@
             <div class="one-card-content">
               <div>
                 <p>生物滞留区域面积</p>
-                <font>75</font>
+                <font class="font30">75</font>
                 <font>㎡</font>
               </div>
               <div>
                 <p>滞留系统液位</p>
-                <font>323</font>
+                <font class="font30">323</font>
                 <font>mm</font>
               </div>
               <div>
                 <p>渗透量</p>
-                <font>1356</font>
+                <font class="font30">1356</font>
                 <font>m³</font>
               </div>
               <div>
                 <p>COD</p>
-                <font>19</font>
+                <font class="font30">19</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>氨氮</p>
-                <font>8</font>
+                <font class="font30">8</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>SS</p>
-                <font>9</font>
+                <font class="font30">9</font>
                 <font>mg/L</font>
               </div>
             </div>
@@ -104,7 +104,7 @@
               text-align: center;
               padding: 10px;
               border-radius: 10px;
-              font-size: 26px;
+              font-size: 20px;
               line-height: 45px;
             }
           }

src/components/Cindex.vue

@@ -9,42 +9,42 @@
             <div class="one-card-content">
               <div>
                 <p>地块面积</p>
-                <font>730</font>
+                <font class="font30">730</font>
                 <font>㎡</font>
               </div>
               <div>
                 <p>地块调蓄容积</p>
-                <font>500</font>
+                <font class="font30">500</font>
                 <font>m³</font>
               </div>
               <div>
                 <p>调蓄池液位</p>
-                <font>3.6</font>
+                <font class="font30">3.6</font>
                 <font>m</font>
               </div>
               <div>
                 <p>溢流量</p>
-                <font>1.25</font>
+                <font class="font30"> 1.25</font>
                 <font>L/s</font>
               </div>
               <div>
                 <p>COD</p>
-                <font>8</font>
+                <font class="font30">8</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>氨氮</p>
-                <font>12.5</font>
+                <font class="font30">12.5</font>
                 <font>mg/L</font>
               </div>
               <div>
-                <p>ss</p>
+                <p>SS</p>
-                <font>20.7</font>
+                <font class="font30">20.7</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>地块剩余调蓄容积</p>
-                <font>316</font>
+                <font class="font30">316</font>
                 <font>m³</font>
               </div>
             </div>

src/components/Gindex.vue

@@ -9,42 +9,42 @@
             <div class="one-card-content">
               <div>
                 <p>径流系数</p>
-                <font>0.6</font>
+                <font class="font30">0.6</font>
               </div>
               <div>
                 <p>蒸腾量</p>
-                <font>32%</font>
+                <font class="font30">32</font>
-          
+                <font>%</font>
               </div>
               <div>
                 <p>COD</p>
-                <font>27</font>
+                <font class="font30">27</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>氨氮</p>
-                <font>11</font>
+                <font class="font30">11</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>Ss</p>
-                <font>6</font>
+                <font class="font30">6</font>
                 <font>mg/L</font>
               </div>
               <div>
                 <p>屋面温度 无绿化</p>
-                <font>23</font>
+                <font class="font30">23</font>
                 <font>℃</font>
               </div>
               <div>
                 <p>屋面温度 有绿化</p>
-                <font>19</font>
+                <font class="font30">19</font>
                 <font>℃</font>
               </div>
               <div>
                 <p>热岛减率</p>
-                <font>21%</font>
+                <font class="font30">21</font>
-          
+                <font>%</font>
               </div>
             </div>
         </div>

src/components/Header.vue

@@ -5,26 +5,13 @@
       <span style="font-size: 20px">{{ name  }}</span>
     </div>
     <div class="div30" style="font-size: 24px;text-align: center;">{{modelName}}</div>
-    <div class="right div30">
+    <div class="right div30 ">
-      <el-popover
+      <p class="mr10">
-        placement="bottom"
+        {{ currentTime }}
-        :width="320"
+      </p>
-        trigger="click"
+      <p class="mr10">登录名： admin</p>
-        popper-class="popper-user-box"
+      <img src="../assets/index.png" alt="" class="mr10" @click="back"/>
-      >
+      <el-tag size="small" effect="dark" class="logout" @click="logout">退出</el-tag>
-        <template #reference>
-          <div class="author">
-            <i class="icon el-icon-s-custom" />
-            {{ userInfo && userInfo.nickName || '' }}
-            <i class="el-icon-caret-bottom" />
-          </div>
-        </template>
-        <div class="nickname">
-          <p>登录名：{{ userInfo && userInfo.loginUserName || '' }}</p>
-          <p>昵称：{{ userInfo && userInfo.nickName || '' }}</p>
-          <el-tag size="small" effect="dark" class="logout" @click="logout">退出</el-tag>
-        </div>
-      </el-popover>
     </div>
   </div>
 </template>
@@ -35,6 +22,7 @@ import { useRouter } from 'vue-router'
 import { localRemove, pathMap } from '@/utils'
 import myApi from '@/api/myApi.js'
 import {useStore} from 'vuex';
+import dayjs from 'dayjs';
 export default {
   name: 'Header',
   setup() {
@@ -44,27 +32,30 @@ export default {
       name: 'dashboard',
       userInfo: null,
       hasBack: false,
-      modelName: ''
+      modelName: '',
+      currentTime: '',
+      interval: ''
     })
     onMounted(() => {
-      const pathname = window.location.hash.split('/')[1] || ''
+      // const pathname = window.location.hash.split('/')[1] || ''
-      if (!['login'].includes(pathname)) {
+      // if (!['login'].includes(pathname)) {
-        // getUserInfo()
+        
-      }
+      // }
+      state.interval = setInterval(updateTime, 1000)
     })
     const getUserInfo = async () => {
-      const userInfo = await myApi.getUserInfo();
+
-      state.userInfo = userInfo
     }
     const logout = async () => {
-      await myApi.logout();
+      router.push('/login')
-      localRemove('token')
-      window.location.reload()
     }
     const back = () => {
       router.push('/home')
       store.commit("setModelName", '');
     }
+    const updateTime = () => {
+      state.currentTime = dayjs().format('YYYY年 MM月 DD日 HH:mm:ss')
+    }
     router.afterEach((to) => {
       console.log('to', to)
       const { id } = to.query
@@ -99,6 +90,15 @@ export default {
     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;
@@ -116,7 +116,7 @@ export default {
   }
   .popper-user-box .nickname {
     position: relative;
-    color: #ffffff;
+    color: #000;
   }
   .popper-user-box .nickname .logout {
     position: absolute;

src/components/Index.vue

@@ -10,11 +10,11 @@
             <div class="one-card-content">
               <div>
                 <p>节水量</p>
-                <font>4.00m³</font>
+                <font><span class="font26">4.00</span>m³</font>
               </div>
               <div>
                 <p>节碳量</p>
-                <font>0.67KG</font>
+                <font><span class="font26">0.67</span>kg</font>
               </div>
             </div>
           </div>
@@ -30,16 +30,14 @@
            
             <div class="one-card-content">
               <div>
-                <p>原水箱液位</p>
+                <p>原水箱液位：<span class="font26">0.39</span>m</p>
-                <p>0.39m</p>
+                <p>历史最高：<span class="font26">0.50</span>m</p>
-                <p>历史最高：0.50m</p>
+                <p>历史最低：<span class="font26">0.24</span>m</p>
-                <p>历史最低：0.24m</p>
               </div>
               <div>
-                <p>净水箱液位</p>
+                <p>净水箱液位：<span class="font26">0.81</span>m</p>
-                <p>0.81m</p>
+                <p>历史最高：<span class="font26">1.63</span>m</p>
-                <p>历史最高：1.63m</p>
+                <p>历史最低：<span class="font26">0.48</span>m</p>
-                <p>历史最低：0.48m</p>
               </div>
             </div>
           </div>
@@ -56,23 +54,23 @@
             <div class="one-card-content">
               <div>
                 <p>UF产水</p>
-                <p>瞬时流量：0.00 m³/H</p>
+                <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
-                <p>累计流量：4m³</p>
+                <p>累计流量：<span class="font26">4</span>m³</p>
               </div>
               <div>
                 <p>自来水前端</p>
-                <p>瞬时流量：0.00 m³/H</p>
+                <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
-                <p>累计流量：4m³</p>
+                <p>累计流量：<span class="font26">4</span>m³</p>
               </div>
               <div class="mt10">
                 <p>供水</p>
-                <p>瞬时流量：0.00 m³/H</p>
+                <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
-                <p>累计流量：4m³</p>
+                <p>累计流量：<span class="font26">4</span>m³</p>
               </div>
               <div class="mt10">
                 <p>自来水后端</p>
-                <p>瞬时流量：0.00 m³/H</p>
+                <p>瞬时流量：<span class="font26">0.00</span> m³/H</p>
-                <p>累计流量：4m³</p>
+                <p>累计流量：<span class="font26">4</span>m³</p>
               </div>
             </div>
           </div>
@@ -89,17 +87,17 @@
             <div class="one-card-content">
               <div>
                 <p>原水水质</p>
-                <p>余氯：0.00 mg/L</p>
+                <p>余氯：<span class="font26">0.00</span> mg/L</p>
-                <p>浊度：1.63 mg/L</p>
+                <p>浊度：<span class="font26">1.63</span> mg/L</p>
-                <p>氨氮：1.41 mg/L</p>
+                <p>氨氮：<span class="font26">1.41</span> mg/L</p>
-                <p>COD：4.80 mg/L</p>
+                <p>COD：<span class="font26">4.80</span> mg/L</p>
               </div>
               <div>
                 <p>净水水质</p>
-                <p>余氯：-0.73 mg/L</p>
+                <p>余氯：<span class="font26">-0.73</span> mg/L</p>
-                <p>浊度：3.56 mg/L</p>
+                <p>浊度：<span class="font26">3.56</span> mg/L</p>
-                <p>氨氮：41.89 mg/L</p>
+                <p>氨氮：<span class="font26">41.89</span> mg/L</p>
-                <p>COD：3.53 mg/L</p>
+                <p>COD：<span class="font26">3.53</span> mg/L</p>
               </div>
             </div>
           </div>
@@ -174,7 +172,7 @@
               text-align: left;
               padding: 10px;
               border-radius: 10px;
-              
+              font-size: 16px;
             }
           }
         }

src/components/Liquid.vue

@@ -4,23 +4,25 @@
       <div class="date">
         <Date />
       </div>
-      <div
+      <div v-for="(item, index) of listData" :key="index" class="echart-content">
-        v-for="(item, index) of listData"
-        :key="index"
-        class="echart-content"
-      >
         <BarEchart :echartData="item" />
       </div>
     </div>
     <div class="right-div">
-      <div
+      <div class="height46">
-        v-for="(item, index) of dataList"
+        <div v-for="(item, index) of olddataList" :key="index" :class="'div' + index">
-        :key="index"
+          <div>{{ item.title }}</div>
-        :class="'div' + index"
+          <div v-for="(it, i) of item.data" :key="i">
-      >
+            <Process :itemData="it"></Process>
-        <div>{{ item.title }}</div>
+          </div>
-        <div v-for="(it, i) of item.data" :key="i">
+        </div>
-          <Process :itemData="it"></Process>
+      </div>
+      <div class="height46">
+        <div v-for="(item, index) of puredataList" :key="index" :class="'div' + index">
+          <div>{{ item.title }}</div>
+          <div v-for="(it, i) of item.data" :key="i">
+            <Process :itemData="it"></Process>
+          </div>
         </div>
       </div>
     </div>
@@ -57,7 +59,7 @@ export default {
           color: ["#308286", "#eafbf7"],
         }
       ],
-      dataList: [
+      olddataList: [
         {
           title: "原水箱液位数据（m）:",
           data: [
@@ -90,7 +92,9 @@ export default {
               value: "80",
             },
           ],
-        },
+        }
+      ],
+      puredataList: [
         {
           title: "净水箱液位数据（m）:",
           data: [
@@ -126,7 +130,7 @@ export default {
         }
       ],
     });
-    onMounted(async () => {});
+    onMounted(async () => { });
 
     return {
       ...toRefs(state),
@@ -142,6 +146,7 @@ export default {
   display: flex;
   justify-content: space-between;
   padding: 10px;
+
   .left-div {
     width: 75%;
     height: 100%;
@@ -149,20 +154,30 @@ export default {
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
+
     .echart-content {
       width: 100%;
       height: 46%;
     }
   }
+
   .right-div {
     width: 22%;
     height: 100%;
+    .height46 {
+      height: 46%;
+      display: flex;
+      flex-direction: column;
+      justify-content: end;
+      padding: 10px;
+    }
   }
+
   .date {
-  width: 100%;
+    width: 100%;
-  display: flex;
+    display: flex;
-  justify-content: end;
+    justify-content: end;
-  height: 3%;
+    height: 3%;
-}
+  }
 }
 </style>

src/components/Menus.vue

@@ -67,6 +67,9 @@ ul {
     &.active-menu {
       background: #a7dcf5;
     }
+    &:hover {
+      transform: scale(1.1);
+    }
   }
 }
 </style>

src/components/Sindex.vue

@@ -8,22 +8,22 @@
           <div class="one-card-content">
               <div>
                 <p>透水铺砖储水量</p>
-                <font>200</font>
+                <font class="font30">200</font>
                 <font>m³</font>
               </div>
               <div>
                 <p>透水铺砖表面温度</p>
-                <font>16.5</font>
+                <font class="font30">16.5</font>
                 <font>℃</font>
               </div>
               <div>
                 <p>热岛消减率</p>
-                <font>19.6</font>
+                <font class="font30">19.6</font>
                 <font>%</font>
               </div>
               <div>
                 <p>孔隙率</p>
-                <font>10</font>
+                <font class="font30">10</font>
                 <font>%</font>
               </div>
             </div>
@@ -35,32 +35,32 @@
             <div class="one-card-content">
               <div>
                 <p>透水铺装面积</p>
-                <font>500</font>
+                <font class="font30">500</font>
                 <font>㎡</font>
               </div>
               <div>
                 <p>入渗系统面积</p>
-                <font>437</font>
+                <font class="font30">437</font>
                 <font>㎡</font>
               </div>
               <div>
                 <p>透水系数</p>
-                <font>10</font>
+                <font class="font30">10</font>
                 <font>mm/min</font>
               </div>
               <div>
                 <p>入渗系数</p>
-                <font>1.3</font>
+                <font class="font30">1.3</font>
                 <font>mm/min</font>
               </div>
               <div>
                 <p>透水层厚度</p>
-                <font>300</font>
+                <font class="font30">300</font>
                 <font>mm</font>
               </div>
               <div>
                 <p>渗透量</p>
-                <font>362</font>
+                <font class="font30">362</font>
                 <font>m³</font>
               </div>
             </div>
@@ -126,7 +126,7 @@
               text-align: center;
               padding: 10px;
               border-radius: 10px;
-              font-size: 26px;
+              font-size: 20px;
               line-height: 45px;
             }
           }
@@ -161,7 +161,7 @@
               text-align: center;
               padding: 10px;
               border-radius: 10px;
-              font-size: 26px;
+              font-size: 20px;
               line-height: 45px;
             }
           }

src/components/Windex.vue

@@ -9,32 +9,32 @@
             <div class="one-card-content">
               <div>
                 <p>降雨量</p>
-                <font>12</font>
+                <font class="font30">12</font>
                 <font>mm/s</font>
               </div>
               <div>
                 <p>温度</p>
-                <font>23</font>
+                <font class="font30">23</font>
                 <font>℃</font>
               </div>
               <div>
                 <p>空气湿度</p>
-                <font>22</font>
+                <font class="font30">22</font>
                 <font>%</font>
               </div>
               <div>
                 <p>蒸发量</p>
-                <font>9</font>
+                <font class="font30">9</font>
                 <font>mm</font>
               </div>
               <div>
                 <p>土壤湿度</p>
-                <font>56</font>
+                <font class="font30">56</font>
                 <font>%</font>
               </div>
               <div>
                 <p>风速</p>
-                <font>3</font>
+                <font class="font30">3</font>
                 <font>m/s</font>
               </div>
             </div>
@@ -104,7 +104,7 @@
               text-align: center;
               padding: 10px;
               border-radius: 10px;
-              font-size: 26px;
+              font-size: 20px;
               line-height: 45px;
             }
           }

src/css/index.scss

@@ -64,6 +64,16 @@ s {
 {
   margin-right: 20px;
 }
+.mr10 
+{
+  margin-right: 10px;
+}
+.font30 {
+  font-size: 30px;
+}
+.font26 {
+  font-size: 26px;
+}
 .btns {
   text-align: center;
 }

src/utils/dayjs.js

@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'  // 导入中文语言包
+import weekOfYear from 'dayjs/plugin/weekOfYear'
+import weekday from 'dayjs/plugin/weekday'
+
+dayjs.extend(weekOfYear)
+dayjs.extend(weekday)
+dayjs.locale('zh-cn')  // 设置语言为中文

src/views/Login.vue

@@ -4,16 +4,16 @@
       <div class="head">
         <!-- <img class="logo" src="https://s.weituibao.com/1582958061265/mlogo.png" /> -->
         <div class="name">
-          <div class="title">海绵城市智能监测井</div>
+          <div class="title">世博浦西区活水公园</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-item label="账号" prop="username">
-          <el-input type="text" v-model.trim="ruleForm.username" autocomplete="off"></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"></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> -->