'-'

package-lock.json

@@ -1812,63 +1812,6 @@
           "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995547052&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
-          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995355917&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
-          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
-          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
-          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1618847009337&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
-          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
-          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "ssri": {
           "version": "8.0.1",
           "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1617826725566&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -1877,28 +1820,6 @@
           "requires": {
             "minipass": "^3.1.1"
           }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1622293579301&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
-          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.3.0",
-          "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.3.0.tgz?cache=0&sync_timestamp=1624994309035&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.3.0.tgz",
-          "integrity": "sha1-LxleS6D7DiY1ltaDDfF9Gjbok2w=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -4887,6 +4808,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.8.0",
+      "resolved": "https://registry.nlark.com/echarts/download/echarts-4.8.0.tgz?cache=0&sync_timestamp=1623167264935&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts%2Fdownload%2Fecharts-4.8.0.tgz",
+      "integrity": "sha1-ssHPuSKbE9No7hBPyO6mALV01MQ=",
+      "requires": {
+        "zrender": "4.3.1"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -10395,6 +10324,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.nlark.com/resize-detector/download/resize-detector-0.3.0.tgz",
+      "integrity": "sha1-/klREuGEaVUAqPUeA4nxV3TLHPw="
+    },
     "resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
@@ -12375,6 +12309,20 @@
         "@vue/shared": "3.0.11"
       }
     },
+    "vue-demi": {
+      "version": "0.9.1",
+      "resolved": "https://registry.nlark.com/vue-demi/download/vue-demi-0.9.1.tgz?cache=0&sync_timestamp=1625456204437&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-demi%2Fdownload%2Fvue-demi-0.9.1.tgz",
+      "integrity": "sha1-Jdbh69TUAQdX/zVx4r9qHXvz3oI="
+    },
+    "vue-echarts": {
+      "version": "6.0.0-rc.6",
+      "resolved": "https://registry.nlark.com/vue-echarts/download/vue-echarts-6.0.0-rc.6.tgz?cache=0&sync_timestamp=1623259509711&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-echarts%2Fdownload%2Fvue-echarts-6.0.0-rc.6.tgz",
+      "integrity": "sha1-wSr9vi6FjJQdQ0mW6bubevPIxjE=",
+      "requires": {
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.9.1"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.6.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz?cache=0&sync_timestamp=1614679624052&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.6.0.tgz",
@@ -12428,6 +12376,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.3.0",
+      "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.3.0.tgz?cache=0&sync_timestamp=1624994309035&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.3.0.tgz",
+      "integrity": "sha1-LxleS6D7DiY1ltaDDfF9Gjbok2w=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995778321&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
+          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995355917&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
+          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.nlark.com/color-convert/download/color-convert-2.0.1.tgz",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1618847009337&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1622293579301&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "4.0.8",
       "resolved": "https://registry.nlark.com/vue-router/download/vue-router-4.0.8.tgz",
@@ -13402,6 +13431,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.3.1",
+      "resolved": "https://registry.nlark.com/zrender/download/zrender-4.3.1.tgz",
+      "integrity": "sha1-uviqbcgYei+BlpLX1fm+36K5D6M="
     }
   }
 }

src/assets/css/index.css

@@ -34,11 +34,10 @@ body {
     background-size: cover;
     /* 行高是字体1.15倍 */
     line-height: 1.15;
-    height: 100vh;
+    /* height: 100vh; */
     min-height: 600px;
 }
 
-
 header {
     position: relative;
     /* height: 1.25rem; */
@@ -54,7 +53,9 @@ header {
     min-width: 1024px;
     max-width: 1920px;
     padding: 0.125rem 0.125rem 0;
-    height: calc(100vh - 1.125rem)
+    height: calc(100vh - 1.125rem);
+    color: #fff;
+    min-height: 650px;
 }
 
 .mainbox .column {
@@ -103,8 +104,11 @@ header {
     height: 3.875rem;
     border: 1px solid rgba(25, 186, 139, 0.17);
     /* background: rgba(255, 255, 255, 0.04) url(../images/line\(1\).png); */
-    padding: 0 .225rem 0.5rem;
+    padding: 0 .275rem 0.2rem;
     margin-bottom: .225rem;
+    padding-top: .825rem;
+    background-size: cover;
+    background-repeat: no-repeat;
 }
 
 .panel.statisTop {
@@ -332,4 +336,114 @@ header {
 }
 
 
+/* 首页样式 */
+
+p {
+    margin: 0;
+}
+
+.mb-10 {
+    margin-bottom: .1875rem;
+}
+
+.text-blue {
+    color: #0DF4FE
+}
+
+.text-yellow {
+    color: #FEB70D
+}
+
+.text-orange {
+    color: #FE5C0D
+}
+
+.statisSec ul {
+    display: flex;
+    width: 100%;
+    /* width: calc(100% - .75rem); */
+    margin: 0 auto;
+    text-align: center;
+    background-size: 100% 100%;
+    margin-bottom: 0.2rem;
+}
+
+.statisSec .statisTop ul {
+    height: 29%;
+}
+
+.statisSec ul li {
+    flex: 1;
+    font-size: 0.2125rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.statisSec ul li div p:first-child {
+    margin-bottom: .06rem
+}
+
+.num {
+    font-size: .35rem;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
+}
+
+.statisTop {
+    background-image: url(../images/statisTop-bg.png);
+}
+
+.statisTop>ul:first-child {
+    background-image: url(../images/statisTop1.png)
+}
+
+.statisTop>ul:nth-child(2) {
+    background-image: url(../images/statisTop2.png)
+}
+
+.statisTop>ul:nth-child(3) {
+    background-image: url(../images/statisTop3.png)
+}
+
+.statisBottom {
+    background-image: url(../images/statisTop-bg.png);
+}
+
+.statisSec .statisBottom ul {
+    height: 100%;
+}
+
+.statisSec .statisBottom ul li {
+    position: relative;
+    background-size: 100% 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-image: url(../images/bg-blue.png);
+}
+
+.statisSec .statisBottom ul li:nth-child(2) {
+    background-image: url(../images/bg-yellow.png);
+}
+
+.statisSec .statisBottom ul li:nth-child(3) {
+    background-image: url(../images/bg-orange.png);
+}
+
+.statisSec .statisBottom ul li:nth-child(2) {
+    margin: 0 .125rem;
+}
+
+.statisSec .statisBottom .num {
+    font-size: .3rem
+}
+
+.timeEle {
+    position: absolute;
+    width: 100%;
+    line-height: 2.4;
+    /* background: #30cfff61; */
+    bottom: 0
+}
+
+
 /* ming end */

src/assets/fonts/font.css

@@ -0,0 +1,12 @@
+@font-face {
+    font-family: "impact";
+    src: url('impact.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+/* @font-face {
+    font-family: electronicFont;
+    src: url('DS-DIGIT.TTF')
+} */

src/main.js

@@ -25,6 +25,13 @@ app.use(Antd).mount('#app');
 //引入rem字体配置
 import '@/assets/js/flexible.js';
 
+//  引入字体样式
+import '@/assets/fonts/font.css';
+
+
+import * as echarts from 'echarts'
+app.use(echarts);
+
 
 /*路由守卫*/
 router.beforeEach((to, from, next) => {

src/views/home/components/pieChart.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>dsds</div>
+</template>

src/views/home/components/statisBottom.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="panel statisBottom">
+    <ul>
+      <li style="">
+        <div>
+          <p><span class="num text-blue">1564.26</span></p>
+          <p class="mb-10">(kW)</p>
+          
+          
+        </div>
+        <p  class="timeEle">日用电量</p>
+      </li>
+      <li>
+        <div>
+          <p><span class="num text-yellow">156445.89</span></p>
+          <p class="mb-10">(kW)</p>
+          
+        </div>
+        <p class="timeEle">月用电量</p>
+      </li>
+      <li>
+        <div>
+          <p><span class="num text-orange">4521564.63</span></p>
+           <p class="mb-10">(kW)</p>
+        </div>
+        <p class="timeEle">年用电量</p>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: "statisTop",
+  components: {},
+  methods: {
+    // Site_details(){
+    //   this.$router.push({ path: '/Site_details'});//, query: { title: title }
+    // }
+  },
+};
+</script>
+
+<style>
+</style>

src/views/home/components/statisTop.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="panel statisTop">
+    <ul>
+      <li>
+        <div>
+          <p><span class="num text-orange">135</span> 条</p>
+          <p>告警总数</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <p><span class="num text-orange">50</span> 条</p>
+          <p>未处理告警数</p>
+        </div>
+      </li>
+    </ul>
+
+    <ul>
+      <li>
+        <div>
+          <p><span class="num text-blue">100</span> 个</p>
+          <p>总站点数</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <p><span class="num text-blue">1000</span> kW</p>
+          <p>总实时负荷</p>
+        </div>
+      </li>
+    </ul>
+
+    <ul>
+      <li>
+        <div>
+          <p><span class="num text-yellow">36</span> 名</p>
+          <p>运维人员</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <p><span class="num text-yellow">8</span> 名</p>
+          <p>电力人员</p>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: "statisTop",
+  components: {},
+  methods: {
+    // Site_details(){
+    //   this.$router.push({ path: '/Site_details'});//, query: { title: title }
+    // }
+  },
+};
+</script>
+
+<style>
+
+
+</style>

src/views/home/index.vue

@@ -2,20 +2,16 @@
   <div>
     <section class="mainbox">
       <div class="topBox">
-        <div class="column">
-          <div class="panel statisTop">
-            <h2>
-              柱状图-就业行业 <a href="javascript:;">2019</a>
-              <a href="javacript:;"> 2020</a>
-            </h2>
-            <div class="chart"></div>
-            <div class="panel-footer"></div>
-          </div>
-          <div class="panel statisBottom">
+        <div class="column statisSec">
+
+          <statis-top></statis-top>
+          <statis-bottom></statis-bottom>
+          
+          <!-- <div class="panel statisBottom">
             <h2>折线图-人员变化</h2>
             <div class="chart"></div>
             <div class="panel-footer"></div>
-          </div>
+          </div> -->
           <!-- <div class="panel pie">
           <h2>饼形图-年龄分布</h2>
           <div class="chart"></div>
@@ -27,9 +23,7 @@
         </div>
         <div class="column">
           <div class="panel deviceSum">
-            <h2>柱状图-技能掌握</h2>
-            <div class="chart"></div>
-            <div class="panel-footer"></div>
+            <pie-chart></pie-chart>
           </div>
           <div class="panel line1 operStatus">
             <h2>折线图-播放量</h2>
@@ -52,9 +46,12 @@
   </div>
 </template>
 <script>
+import statisTop from "./components/statisTop";
+import statisBottom from "./components/statisBottom";
+import pieChart from "./components/pieChart";
 export default {
   name: "index",
-  components: {},
+  components: {statisTop,statisBottom,pieChart},
   methods:{
     Overview(){
       this.$router.push({ path: '/Overview'});//, query: { title: title }