首页和站点详情页排版

src/assets/css/index.css

@@ -67,7 +67,7 @@ textarea:-ms-input-placeholder {
 header {
     position: relative;
     /* height: 1.25rem; */
-    height: .9625rem;
+    height: .8375rem;
     background: url(../images/head_bg.png) no-repeat;
     background-position: center 0;
     background-size: cover;
@@ -79,7 +79,7 @@ header {
     min-width: 1024px;
     /* max-width: 1920px; */
     padding: 0.125rem 0.125rem 0;
-    height: calc(100% - .9625rem);
+    height: calc(100% - .8375rem);
     color: #fff;
     min-height: 650px;
     /* min-height: 750px */
@@ -474,7 +474,7 @@ p {
 
 .alarm,
 .text-red {
-    color: #F66167
+    color: #FA0D1B
 }
 
 .statisSec ul {
@@ -617,7 +617,7 @@ p {
 
 .panel.powerView {
     height: 100%;
-    background-image: url(../images/powerView-bg.png);
+    /* background-image: url(../images/powerView-bg.png); */
 }
 
 .overview .topBox {
@@ -645,7 +645,7 @@ p {
 }
 
 .overview .bottomBox .panel {
-    background-image: url(../images/powerBottom-bg.png);
+    /* background-image: url(../images/powerBottom-bg.png); */
     padding-bottom: 0
 }
 
@@ -662,7 +662,7 @@ p {
 
 .histTab li {
     display: inline-block;
-    border: 1px solid #0df4fe;
+    border: 1px solid #0065C7;
     padding: .05rem .12rem;
     cursor: pointer;
     font-size: .15rem
@@ -699,7 +699,7 @@ p {
 /* 分时电量end */
 
 .histTab li.active {
-    background: #036B77
+    background: #0065C7
 }
 
 
@@ -710,7 +710,7 @@ p {
     display: flex;
     align-items: center;
     justify-content: center;
-    /* border: 1px solid red; */
+    border: 1px solid #0065C7;
     background-image: url(../images/map-sec-bg.png);
     background-size: 100% 100%;
 }
@@ -806,8 +806,8 @@ p {
   width: 80%; */
     height: 24px !important;
     line-height: 24px !important;
-    background-color: rgba(3, 107, 119, 0.5);
-    border: 1px solid rgba(3, 107, 119, 1);
+    background: rgba(9, 9, 27, 0.8);
+    border: 1px solid #0081FF;
     z-index: 199;
     color: #fff
 }

src/router/index.js

@@ -12,7 +12,7 @@ let routes = [
         name: 'login',
         meta: { title: '登录', name: "登录 ", type: "" },
         component: () =>
-            import('../views/login.vue'),
+            import ('../views/login.vue'),
         hidden: true,
     },
     {
@@ -20,7 +20,7 @@ let routes = [
         name: 'home',
         meta: { title: '首页', name: "智慧用电监控平台", type: "index" },
         component: () =>
-            import('../views/home/index.vue'),
+            import ('../views/home/index.vue'),
     },
 
     // ming router end
@@ -55,7 +55,7 @@ let routes = [
         name: 'overview',
         meta: { title: '概览', name: "测试站点一", type: "menu" },
         component: () =>
-            import('../views/site/Overview.vue'),
+            import ('../views/site/Overview.vue'),
     },
     //配电系统图页面
     {
@@ -63,17 +63,9 @@ let routes = [
         name: 'power_diagram',
         meta: { title: '配电系统图', name: "测试站点一", type: "menu" },
         component: () =>
-            import('../views/site/Power_diagram.vue'),
+            import ('../views/site/Power_diagram.vue'),
         // import ('../views/site/CircuitEdit.vue'),
     },
-    //配电系统图页面
-    {
-        path: '/CircuitEdit',
-        name: 'CircuitEdit',
-        meta: { title: '配电系统图', name: "测试站点一", type: "menu" },
-        component: () =>
-            import('../views/site/CircuitEdit.vue'),
-    },
 
     //设备监控页面
     {
@@ -81,7 +73,7 @@ let routes = [
         name: 'device_motore',
         meta: { title: '设备监控', name: "测试站点一", type: "menu" },
         component: () =>
-            import('../views/site/Device_motore.vue'),
+            import ('../views/site/Device_motore.vue'),
     },
     //事件告警页面
     {
@@ -89,7 +81,7 @@ let routes = [
         name: 'event_alarm',
         meta: { title: '事件告警', name: "测试站点一", type: "menu" },
         component: () =>
-            import('../views/site/Event_alarm.vue'),
+            import ('../views/site/Event_alarm.vue'),
     },
 
 
@@ -100,7 +92,7 @@ let routes = [
         name: 'CircuitEdit1',
         meta: { title: '编辑器', name: "测试站点一", type: "" },
         component: () =>
-            import('../views/CircuitEdit1.vue'),
+            import ('../views/CircuitEdit1.vue'),
     },
     // 预览页页面
     {
@@ -109,7 +101,7 @@ let routes = [
         meta: { title: '预览', name: "测试站点一", type: "" },
         component: () =>
             // import('../views/CircuitPreview.vue'),
-            import('../views/CircuitPreview.vue'),
+            import ('../views/CircuitPreview.vue'),
         // import('../views/site/Power_diagram.vue'),
     },
 

src/views/index.vue

@@ -3,7 +3,7 @@
     <div id="header" >
       <!-- 主页路由菜单 开始 -->
       <div class="router-index"  v-if="!home">
-        <!-- <router-link
+        <router-link
           class="router-left"
           :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
           v-for="route in router.slice(1, 2)"
@@ -17,7 +17,7 @@
           :href="'https://wx.ewoogi.com/manage/#/'"
           class="router-left router_left1"
           >后台管理</a
-        > -->
+        >
 
         <!-- <a
           :href="'http://localhost:9999/#/login?userName=admin'"
@@ -203,18 +203,17 @@ export default {
     line-height: 1rem;
     // margin-left: 1rem;
     .router-left {
-      width: 1.525rem;
+      width: 1.5rem;
       height: 0.5rem;
       display: block;
       text-align: center;
       line-height: 0.5rem;
-      margin: 0.125rem;
+      margin: 0.15rem;
       font-size: 0.225rem;
     }
     .router-left:hover {
       background: url(./../assets/images/router_left2.png) no-repeat;
       background-size: cover;
-      color: #fac112;
     }
     .router_left1 {
       background: url(./../assets/images/router_left1.png) no-repeat;
@@ -223,7 +222,6 @@ export default {
     }
     .router_left2 {
       background: url(./../assets/images/router_left2.png) no-repeat;
-      color: #fac112;
       background-size: cover;
     }
   }
@@ -247,18 +245,17 @@ export default {
       }
     }
     .router-left {
-      width: 1.525rem;
+      width: 1.5rem;
       height: 0.5rem;
       display: block;
       text-align: center;
       line-height: 0.5rem;
-      margin: 0.125rem;
+      margin: 0.15rem;
       font-size: 0.225rem;
     }
     .router-left:hover {
       background: url(./../assets/images/router_left2.png) no-repeat;
       background-size: cover;
-      color: #fac112;
     }
     .router_left1 {
       background: url(./../assets/images/router_left1.png) no-repeat;
@@ -267,7 +264,6 @@ export default {
     }
     .router_left2 {
       background: url(./../assets/images/router_left2.png) no-repeat;
-      color: #fac112;
       background-size: cover;
     }
 
@@ -280,18 +276,18 @@ export default {
     }
 
     .router-rigth {
-      width: 1.525rem;
+      width: 1.5rem;
       height: 0.5rem;
       display: block;
       text-align: center;
       line-height: 0.5rem;
-      margin: 0.125rem;
+      margin: 0.15rem;
       font-size: 0.225rem;
     }
     .router-rigth:hover {
       background: url(./../assets/images/router_right2.png) no-repeat;
       background-size: cover;
-      color: #fac112;
+      // color: #83817a;
     }
     .router_rigth1 {
       background: url(./../assets/images/router_right1.png) no-repeat;
@@ -300,7 +296,7 @@ export default {
     }
     .router_rigth2 {
       background: url(./../assets/images/router_right2.png) no-repeat;
-      color: #fac112;
+      // color: #fac112;
       background-size: cover;
     }
   }
@@ -311,9 +307,9 @@ export default {
     font-weight: 600;
     letter-spacing: 1px;
     text-align: center;
-    line-height: 1rem;
+    line-height: .8375rem;
     margin: 0 auto;
-    width: 6rem;
+    width: 3.5rem;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -331,7 +327,7 @@ export default {
     .home {
       width: 0.3125rem;
       height: 0.25rem;
-      margin-top: 0.25rem;
+      margin-top: 0.29rem;
       background: url(./../assets/images/home.png) no-repeat;
       background-size: cover;
       margin-right: 0.3rem;
@@ -342,19 +338,19 @@ export default {
       font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
       font-weight: 400;
       color: #fff;
-      line-height: 0.75rem;
+      line-height: .84rem;
       margin-right: 0.25rem;
     }
     .news {
       font-size: 0.25rem;
       color: #fff;
-      line-height: 0.35rem;
+      line-height: .84rem;
       cursor: pointer;
 
       div {
         width: 0.3rem;
         height: 0.2375rem;
-        margin-top: 0.25rem;
+        margin-top: 0.3rem;
         background: url(./../assets/images/news.png) no-repeat;
         background-size: cover;
       }
@@ -380,7 +376,7 @@ export default {
     .admin {
       width: 0.325rem;
       height: 0.325rem;
-      margin-top: 0.2rem;
+      margin-top: 0.26rem;
       background: url(./../assets/images/admin.png) no-repeat;
       background-size: cover;
       cursor: pointer;

src/views/site/Overview.vue

@@ -1,6 +1,8 @@
 <template>
   <!-- <indexroute></indexroute> -->
     <section class="mainbox overview">
+      <img src="../../assets/images/site-bg.png" alt="" style="position:fixed;top:0; right:0;width:100%;height: 100%;">
+
       <!-- topBox start -->
       <div class="topBox">
         <div class="column">
@@ -44,7 +46,7 @@
 
         <div class="column">
           <div class="panel deviceSum">
-            <h2>设备统计</h2>
+            <h2>设备工况</h2>
             <ul>
               <li>
                 <p>监测对象</p>
@@ -99,7 +101,7 @@
                 <option :value="2">月</option>
               </select> -->
             </div>
-            <h2>历史趋势</h2>
+            <h2>历史数据</h2>
             <ul class="histTab">
               <li @click="msg = 0" :class="{ active: msg === 0 }">电流</li>
               <li @click="msg = 1" :class="{ active: msg === 1 }">电压</li>

src/views/site/components/Overview/histTrendChart.vue

@@ -100,7 +100,7 @@ export default {
       // console.log(JSON.stringify(data),JSON.stringify(dataAll));
 
       option = {
-        color: ["#FEB70D", "#50F335", "#0DC8FE"],
+        color: ["#F66167", "#35B8FC", "#32E6FC"],
         tooltip: {
           trigger: "axis",
         },

src/views/site/components/Overview/modelStaticTop.vue

@@ -4,7 +4,7 @@
       <li>
         <div>
           <p>今日用电量</p>
-          <p>
+          <p style="color:#0DF4FE">
             <span class="num static">{{ data.dayCount }}</span
             >kWh
           </p>
@@ -17,10 +17,11 @@
       <li>
         <div>
           <p>实时负载</p>
-          <p>
+          <p class="text-yellow">
             <span class="num text-yellow" style="margin-bottom: 0"
-              >{{ exception }} kWh</span
+              >{{ exception }} </span
             >
+            kWh
           </p>
         </div>
       </li>
@@ -78,8 +79,10 @@ export default {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: #081f2f;
-      box-shadow: inset 0 0 0.1rem 0.0125rem rgba(0, 244, 253, 0.6);
+      border:1px solid #0065C7;
+      
+background: rgba(0, 0, 0, 0.4);
+      // box-shadow: inset 0 0 0.1rem 0.0125rem rgba(0, 244, 253, 0.6);
       p {
         font-size: 0.2rem;
       }

src/views/site/components/Overview/powerTop.vue

@@ -11,8 +11,9 @@
           <p>
             上月同期 {{ data.lastMonthCount }}
             <span class="text-red" style="margin-left: 5px">
-              {{ data.monthRadio + "%" }} ↑</span
-            >
+              {{ data.monthRadio + "%" }}
+              <img src="../../../../assets/images/arrowUp.png" alt=""
+            /></span>
           </p>
         </div>
       </li>
@@ -26,8 +27,9 @@
           <p>
             去年同期 {{ data.lastYearCount == null ? 0 : data.lastYearCount }}
             <span class="text-red" style="margin-left: 5px"
-              >{{ data.yearRadio }}% ↑</span
-            >
+              >{{ data.yearRadio }}%
+              <img src="../../../../assets/images/arrowUp.png" alt=""
+            /></span>
           </p>
         </div>
       </li>
@@ -65,13 +67,18 @@ export default {
   display: flex;
   text-align: center;
   height: 100%;
+
   li:first-child {
     margin-right: 0.07rem;
-    box-shadow: inset 0 0 0.1rem 0.0125rem rgba(0, 244, 253, 0.6);
+    .num {
+      color: #31e9ff;
+    }
   }
   li:last-child {
     margin-left: 0.07rem;
-    box-shadow: inset 0 0 0.1rem 0.0125rem rgba(251, 183, 86, 0.6);
+    .num {
+      color: #37a5eb;
+    }
   }
 
   li {
@@ -82,10 +89,14 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: #081f2f;
-    // border: 1px solid rgba(0,244,253,.5);
+    
+background: rgba(0, 0, 0, 0.4);
+    border: 1px solid #0065c7;
     p {
       font-size: 0.2rem;
+      img {
+        width: 0.15rem;
+      }
     }
     .num {
       margin: 0.0625rem;

src/views/site/components/Overview/realTimeChart.vue

@@ -60,7 +60,7 @@ export default {
       });
 
       option = {
-        color: ["#FCFF14", "#35F393"],
+        color: ["#F66167", "#31E9FF"],
         tooltip: {
           trigger: "axis",
         },