修改web组态代码

src/App.vue

@@ -1,10 +1,10 @@
 <template>
-  <index></index>
+  <index v-if="$route.meta.title != '登录'"></index>
   <router-view />
 </template>
 
 <script>
-import index from './views/index'
+import index from "./views/index";
 export default {
   name: "App",
   data() {
@@ -12,7 +12,7 @@ export default {
       title: "",
     };
   },
-  components: {index},
+  components: { index },
 };
 </script>
 

src/router/index.js

@@ -7,7 +7,7 @@ let routes = [
     // ming router start
     // 大屏首页看板
     {
-        path: '/',
+        path: '/home',
         name: 'home',
         meta: { title: '首页', name: "智慧用电监控平台", type: "index" },
         component: () =>
@@ -81,7 +81,8 @@ 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'),
     },
     // 编辑器页面
     {
@@ -102,6 +103,15 @@ let routes = [
         // import('../views/site/Power_diagram.vue'),
     },
 
+    //登录页面
+    {
+        path: '/',
+        name: 'login',
+        meta: { title: '登录', name: "登录 ", type: "" },
+        component: () =>
+            import ('../views/login.vue'),
+    },
+
 
 
 ]

src/views/home/components/barChart.vue

@@ -5,7 +5,6 @@
 import * as echarts from "echarts";
 
 export default {
-
   props: { feptrendIco: Object },
   data() {
     return {};
@@ -22,7 +21,6 @@ export default {
     },
   },
 
-
   mounted() {
     this.$nextTick(() => {
       // console.log(this.feptrendIco)
@@ -38,6 +36,16 @@ export default {
     //次数分布折线图
     initChart() {
 
+      // 比较两个日期数组，取较长的那个
+      var chooseData=[];
+      var aList = this.feptrendIco[0].listDate.length;
+      var bList = this.feptrendIco[1].listDate.length;
+      if(aList>bList){
+        chooseData=this.feptrendIco[0].listDate
+      }else{
+         chooseData=this.feptrendIco[1].listDate
+      }
+
       var chart = echarts.init(this.$refs.barChart);
       var option;
 
@@ -59,7 +67,7 @@ export default {
         },
         legend: {
           itemGap: 30,
-          left: '30%',
+          left: "30%",
           top: 0,
           textStyle: {
             color: "#fff",
@@ -82,20 +90,20 @@ export default {
           //   "20:00",
           //   "22:00",
           // ],
-          data:this.feptrendIco[0].listDate,
+          data: chooseData,
           axisLine: {
             lineStyle: {
-              color:"rgba(0,0,0,0.1)",
+              color: "rgba(0,0,0,0.1)",
             },
           },
           axisTick: {
-                show: false
-            },
+            show: false,
+          },
           axisLabel: {
             // interval: 0,
             // rotate: 40,
             textStyle: {
-                 color: '#fff',
+              color: "#fff",
               fontFamily: "Microsoft YaHei",
             },
           },
@@ -103,7 +111,7 @@ export default {
 
         yAxis: {
           type: "value",
-        //   max: "800",
+          //   max: "800",
           axisLine: {
             show: false,
             lineStyle: {
@@ -148,10 +156,10 @@ export default {
         series: [
           {
             // name: "昨日",
-            name:this.feptrendIco[0].name,
+            name: this.feptrendIco[0].name,
             type: "bar",
             barWidth: "20%",
-            barGap: '0%',
+            barGap: "0%",
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -167,11 +175,11 @@ export default {
               },
             },
             // data: [40, 40, 30, 30, 30, 40, 40, 40, 30,40,50,60],
-            data:this.feptrendIco[0].list
+            data: this.feptrendIco[0].list,
           },
           {
             // name: "当日",
-            name:this.feptrendIco[1].name,
+            name: this.feptrendIco[1].name,
             type: "bar",
             barWidth: "20%",
             itemStyle: {
@@ -189,7 +197,7 @@ export default {
               },
             },
             // data: [40, 50, 50, 50, 50, 40, 40, 50, 50,20,40,30],
-            data:this.feptrendIco[1].list
+            data: this.feptrendIco[1].list,
           },
         ],
       };

src/views/login.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="loginBox">
+     <!-- <div class=" absCenterBox"></div> -->
+    <div class="loginInnerBox">
+      <h2 class="bigTit">智慧用电监控平台</h2>
+
+      <p class="loginTitle">用户登录</p>
+      <div class="oneSec">
+        <img class="icon" src="../assets/images/userIcon.png" alt="" />
+        <input type="text" placeholder="请输入登录ID" />
+      </div>
+      <div class="oneSec">
+        <img class="icon" src="../assets/images/passwordIcon.png" alt="" />
+        <input type="text" placeholder="请输入密码" />
+      </div>
+      <div class="remember">
+        <el-checkbox label="记住密码"></el-checkbox>
+      </div>
+      <div class="submitBox">登 录</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss">
+#header {
+  display: none;
+}
+.bigTit {
+  position: absolute;
+  top: -90px;
+    left: 7px;
+    text-align: center;
+    width: 100%;
+  color: #00e1eb;
+  font-size: 0.625rem;
+  
+//   margin-left:-0.775rem;
+  font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+  font-weight: bold;
+  letter-spacing: 17px;
+}
+.loginBox {
+  background-image: url(../assets/images/login-bg.png) !important;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 100vh;
+  min-width: 1024px;
+  min-height: 600px;
+  background-position: center center;
+  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: red;
+
+  .loginInnerBox {
+    position: relative;
+    width: 8.3875rem;
+    height: 5.8rem;
+    background-image: url(../assets/images/loginIn-bg.png) !important;
+    background-size: cover;
+    padding: 0.45rem 0.775rem;
+    // text-align: center;
+    .loginTitle {
+      font-size: 0.45rem;
+      color: #00e1eb;
+      text-align: center;
+      letter-spacing: 12px;
+    }
+    .oneSec {
+      text-align: left;
+      width: 6.85rem;
+      height: 0.7375rem;
+      line-height: 0.7375rem;
+      background: rgba(11, 161, 248, 0.4);
+      border: 1px solid #0ba1f8;
+      margin-top: 0.4875rem;
+      position: relative;
+      .icon {
+        position: absolute;
+        top: 0.2rem;
+        left: 0.2rem;
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+      input {
+        background: transparent;
+        border: 0;
+        -webkit-appearance: none;
+        border-radius: 0;
+        // padding: 12px 5px 12px 0;
+        color: #fff;
+        height: 47px;
+        caret-color: #fff;
+        outline: none;
+        font-size: 0.325rem;
+        padding-left: 0.85rem;
+        line-height: 0.7375rem;
+        height: 0.7375rem;
+      }
+    }
+    .remember {
+      margin: 0.275rem 0;
+      .el-checkbox__inner {
+        width: 0.3rem;
+        height: 0.3rem;
+      }
+      .el-checkbox__label {
+        font-size: 0.325rem;
+        font-weight: 300;
+      }
+      .el-checkbox__inner::after {
+        top: 0.07rem;
+        width: 0.0625rem;
+        left: 0.1125rem;
+      }
+      .el-checkbox {
+        color: #fff;
+      }
+    }
+    .submitBox {
+      width: 6.85rem;
+      height: 0.7375rem;
+      opacity: 1;
+      background: #00e1eb;
+      color: #001a2b;
+      font-size: 0.45rem;
+      text-align: center;
+      line-height: 0.7375rem;
+      cursor: pointer;
+    }
+  }
+}
+</style>