.gitignore

@@ -1,17 +1,14 @@
 .DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+node_modules/
+dist/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
+**/*.log
+
+tests/**/coverage/
+tests/e2e/reports
+selenium-debug.log
 
 # Editor directories and files
 .idea
@@ -20,4 +17,7 @@ pnpm-debug.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw?
+*.local
+
+package-lock.json
+yarn.lock

public/index.html

@@ -6,6 +6,192 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <style>
+        html,
+        body,
+        #app {
+            height: 100%;
+            margin: 0px;
+            padding: 0px;
+        }
+        .chromeframe {
+            margin: 0.2em 0;
+            background: #ccc;
+            color: #000;
+            padding: 0.2em 0;
+        }
+
+        #loader-wrapper {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 999999;
+        }
+
+        #loader {
+            display: block;
+            position: relative;
+            left: 50%;
+            top: 50%;
+            width: 150px;
+            height: 150px;
+            margin: -75px 0 0 -75px;
+            border-radius: 50%;
+            border: 3px solid transparent;
+            border-top-color: #FFF;
+            -webkit-animation: spin 2s linear infinite;
+            -ms-animation: spin 2s linear infinite;
+            -moz-animation: spin 2s linear infinite;
+            -o-animation: spin 2s linear infinite;
+            animation: spin 2s linear infinite;
+            z-index: 1001;
+        }
+
+        #loader:before {
+            content: "";
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            right: 5px;
+            bottom: 5px;
+            border-radius: 50%;
+            border: 3px solid transparent;
+            border-top-color: #FFF;
+            -webkit-animation: spin 3s linear infinite;
+            -moz-animation: spin 3s linear infinite;
+            -o-animation: spin 3s linear infinite;
+            -ms-animation: spin 3s linear infinite;
+            animation: spin 3s linear infinite;
+        }
+
+        #loader:after {
+            content: "";
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            right: 15px;
+            bottom: 15px;
+            border-radius: 50%;
+            border: 3px solid transparent;
+            border-top-color: #FFF;
+            -moz-animation: spin 1.5s linear infinite;
+            -o-animation: spin 1.5s linear infinite;
+            -ms-animation: spin 1.5s linear infinite;
+            -webkit-animation: spin 1.5s linear infinite;
+            animation: spin 1.5s linear infinite;
+        }
+
+
+        @-webkit-keyframes spin {
+            0% {
+                -webkit-transform: rotate(0deg);
+                -ms-transform: rotate(0deg);
+                transform: rotate(0deg);
+            }
+            100% {
+                -webkit-transform: rotate(360deg);
+                -ms-transform: rotate(360deg);
+                transform: rotate(360deg);
+            }
+        }
+
+        @keyframes spin {
+            0% {
+                -webkit-transform: rotate(0deg);
+                -ms-transform: rotate(0deg);
+                transform: rotate(0deg);
+            }
+            100% {
+                -webkit-transform: rotate(360deg);
+                -ms-transform: rotate(360deg);
+                transform: rotate(360deg);
+            }
+        }
+
+
+        #loader-wrapper .loader-section {
+            position: fixed;
+            top: 0;
+            width: 51%;
+            height: 100%;
+            background: #7171C6;
+            z-index: 1000;
+            -webkit-transform: translateX(0);
+            -ms-transform: translateX(0);
+            transform: translateX(0);
+        }
+
+        #loader-wrapper .loader-section.section-left {
+            left: 0;
+        }
+
+        #loader-wrapper .loader-section.section-right {
+            right: 0;
+        }
+
+
+        .loaded #loader-wrapper .loader-section.section-left {
+            -webkit-transform: translateX(-100%);
+            -ms-transform: translateX(-100%);
+            transform: translateX(-100%);
+            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+        }
+
+        .loaded #loader-wrapper .loader-section.section-right {
+            -webkit-transform: translateX(100%);
+            -ms-transform: translateX(100%);
+            transform: translateX(100%);
+            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+        }
+
+        .loaded #loader {
+            opacity: 0;
+            -webkit-transition: all 0.3s ease-out;
+            transition: all 0.3s ease-out;
+        }
+
+        .loaded #loader-wrapper {
+            visibility: hidden;
+            -webkit-transform: translateY(-100%);
+            -ms-transform: translateY(-100%);
+            transform: translateY(-100%);
+            -webkit-transition: all 0.3s 1s ease-out;
+            transition: all 0.3s 1s ease-out;
+        }
+
+        .no-js #loader-wrapper {
+            display: none;
+        }
+
+        .no-js h1 {
+            color: #222222;
+        }
+
+        #loader-wrapper .load_title {
+            font-family: 'Open Sans';
+            color: #FFF;
+            font-size: 19px;
+            width: 100%;
+            text-align: center;
+            z-index: 9999999999999;
+            position: absolute;
+            top: 60%;
+            opacity: 1;
+            line-height: 30px;
+        }
+
+        #loader-wrapper .load_title span {
+            font-weight: normal;
+            font-style: italic;
+            font-size: 13px;
+            color: #FFF;
+            opacity: 0.5;
+        }
+    </style>
   </head>
   <body>
     <noscript>

src/assets/styles/vpp.css

@@ -0,0 +1,64 @@
+.app-container {
+  width: 100%;
+  height: calc(100vh);
+  /*background-color: #101C38;*/
+  background: url(../../assets/images/bg/bg1.png) 100% no-repeat;
+  background-size: 100% 100%;
+  color: white;
+}
+
+.topBanner {
+  width: 100%;
+  height: 7%;
+  background: url(../../assets/images/bg/bgBanner.png) -2px -1px no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.topLogo {
+  position: absolute;
+  width: 270px;
+  height: 66px;
+  left: 2%;
+  top: 0;
+  background: url(../../assets/images/logo.png) -2px -1px no-repeat;
+  z-index: auto;
+}
+
+.main-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.main-card {
+  margin-top: .5%;
+  width: 98%;
+  height: calc(30vh);
+  border-width: 0px;
+  border-style: dashed;
+  border-color: aqua;
+  display: flex;
+  justify-content: space-around;
+}
+
+.barBox {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background: url(../../assets/images/bg/bgBar.png) -2px -1px no-repeat;
+  margin-right: 1%;
+}
+
+.barTitle {
+  display: flex;
+  align-items: center;
+  margin-left: 10%;
+  margin-top: 0.5%;
+  font-size: 18px;
+  font-style: italic;
+  font-weight: bold;
+}

src/main.js

@@ -4,6 +4,8 @@ import router from './router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
+import '@/assets/styles/vpp.css' // public css
+
 Vue.use(ElementUI)
 Vue.config.productionTip = false
 

src/router/index.js

@@ -8,6 +8,11 @@ Vue.use(VueRouter)
 
 const routes = [
   {
+    path: '/dailyPlanning',
+    component: () => import('@/views/dailyPlanning/index'),
+    hidden: true
+  },
+  {
     path: '/',
     name: 'Login',
     component: Login
@@ -22,6 +27,7 @@ const routes = [
     name: '发电计划',
     component: Fdjh
   }
+
 ]
 
 const router = new VueRouter({

src/views/dailyPlanning/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="app-container">
+    <div class="topBanner">
+      <div class="topLogo"></div>
+    </div>
+    <div class="main-container">
+      <div class="main-card">
+        <div class="barBox">
+          <div class="barTitle">
+            信息总览
+          </div>
+        </div>
+        <div class="barBox">
+          <div class="barTitle">
+            告警信息
+          </div>
+        </div>
+        <div class="barBox">
+          <div class="barTitle">
+            风电发电功率
+          </div>
+        </div>
+      </div>
+      <div class="main-card">
+        <div class="barBox">
+          <div class="barTitle">
+            负荷用电功率
+          </div>
+        </div>
+        <div class="barBox">
+          <div class="barTitle">
+            联络线信息
+          </div>
+        </div>
+        <div class="barBox">
+          <div class="barTitle">
+            光伏发电功率
+          </div>
+        </div>
+      </div>
+      <div class="main-card">
+        <div class="barBox">
+          <div class="barTitle">
+            储能发电/用电功率
+          </div>
+        </div>
+        <div class="barBox">
+          <div class="barTitle">
+            断面信息
+          </div>
+        </div>
+        <div class="barBox">
+          <div class="barTitle">
+            火电发电功率
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "dailyPlanning"
+}
+</script>
+
+<style scoped>
+</style>