首页及站点详情页排版

src/assets/css/index.css

@@ -56,6 +56,7 @@ header {
     height: calc(100vh - 1.125rem);
     color: #fff;
     min-height: 650px;
+    /* min-height: 750px */
 }
 
 .mainbox .column {
@@ -229,11 +230,13 @@ header {
 }
 
 .panel h2 {
+    position: absolute;
+    top: 0;
     height: 0.6rem;
     line-height: 0.6rem;
     text-align: center;
     color: #fff;
-    font-size: 0.25rem;
+    font-size: .225rem;
     font-weight: 400;
 }
 
@@ -370,7 +373,8 @@ p {
     margin-bottom: .1875rem;
 }
 
-.text-blue {
+.text-blue,
+.static {
     color: #0DF4FE
 }
 
@@ -382,6 +386,18 @@ p {
     color: #FE5C0D
 }
 
+.offLine {
+    color: #989898
+}
+
+.error {
+    color: #F6E418
+}
+
+.alarm {
+    color: #FF0000
+}
+
 .statisSec ul {
     display: flex;
     width: 100%;
@@ -501,4 +517,25 @@ p {
 }
 
 
+/* 站点概览 */
+
+.powerView {
+    border: 1px solid red;
+}
+
+.panel.powerView {
+    height: 100%;
+    background-image: url(../images/powerView-bg.png);
+}
+
+.overview .bottomBox .panel {
+    background-image: url(../images/powerBottom-bg.png);
+    padding-bottom: 0
+}
+
+.overview .map {
+    background-image: none;
+}
+
+
 /* ming end */

src/router/index.js

@@ -5,15 +5,16 @@ const routerHistory = createWebHistory(process.env.BASE_URL);
 
 let routes = [
     // ming router start
-
-    // 大屏首页
+    // 大屏首页看板
     {
         path: '/',
         name: 'home',
         meta: { title: '首页', name: "智慧用电监控平台", type: "index" },
         component: () =>
-            import('../views/home/index.vue'),
+            import ('../views/home/index.vue'),
     },
+
+
     // ming router end
 
 
@@ -24,7 +25,7 @@ let routes = [
         name: 'data_mage',
         meta: { title: '数据管理', name: "智慧用电监控平台 ", type: "index" },
         component: () =>
-            import('../views/index/Data_mage.vue'),
+            import ('../views/index/Data_mage.vue'),
     },
     //电能质量页面
     {
@@ -32,7 +33,7 @@ let routes = [
         name: 'power_quality',
         meta: { title: '电能质量', name: "智慧用电监控平台  ", type: "index" },
         component: () =>
-            import('../views/index/Power_quality.vue'),
+            import ('../views/index/Power_quality.vue'),
     },
     //系统管理页面
     {
@@ -40,7 +41,7 @@ let routes = [
         name: 'system_mage',
         meta: { title: '系统管理', name: "智慧用电监控平台   ", type: "index" },
         component: () =>
-            import('../views/index/System_mage.vue'),
+            import ('../views/index/System_mage.vue'),
     },
     //概览页面站点详情页面
     {
@@ -48,7 +49,7 @@ let routes = [
         name: 'overview',
         meta: { title: '概览', name: "测试站点一", type: "menu" },
         component: () =>
-            import('../views/site/Overview.vue'),
+            import ('../views/site/Overview.vue'),
     },
     //配电系统图页面
     {
@@ -57,7 +58,7 @@ let routes = [
         meta: { title: '配电系统图', name: "测试站点一", type: "menu" },
         component: () =>
             // import('../views/site/Power_diagram.vue'),
-            import('../views/site/CircuitEdit.vue'),
+            import ('../views/site/CircuitEdit.vue'),
     },
 
     //设备监控页面
@@ -66,7 +67,7 @@ let routes = [
         name: 'device_motore',
         meta: { title: '设备监控', name: "测试站点一", type: "menu" },
         component: () =>
-            import('../views/site/Device_motore.vue'),
+            import ('../views/site/Device_motore.vue'),
     },
     //事件告警页面
     {
@@ -74,9 +75,9 @@ let routes = [
         name: 'event_alarm',
         meta: { title: '事件告警', name: "测试站点一", type: "menu" },
         component: () =>
-            import('../views/site/Event_alarm.vue'),
+            import ('../views/site/Event_alarm.vue'),
     },
-    
+
 
     //配电系统图页面
     {
@@ -85,7 +86,7 @@ let routes = [
         meta: { title: '配电系统图', name: "测试站点一", type: "menu" },
         component: () =>
             // import('../views/site/Power_diagram.vue'),
-            import('../views/site/Power_diagram.vue'),
+            import ('../views/site/Power_diagram.vue'),
     },
     // 编辑器页面
     {
@@ -93,7 +94,7 @@ let routes = [
         name: 'CircuitEdit',
         meta: { title: '编辑器', name: "测试站点一", type: "" },
         component: () =>
-            import('../views/CircuitEdit.vue'),
+            import ('../views/CircuitEdit.vue'),
     },
     // 预览页页面
     {
@@ -101,10 +102,10 @@ let routes = [
         name: 'CircuitPreview',
         meta: { title: '预览', name: "测试站点一", type: "" },
         component: () =>
-        // import('../views/CircuitPreview.vue'),
-            import('../views/CircuitPreview.vue'),
+            // import('../views/CircuitPreview.vue'),
+            import ('../views/CircuitPreview.vue'),
     },
-    
+
 
 
 ]

src/views/home/components/mapStaticTop.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="mapStaticTop">
+    <ul>
+      <li>
+        <div>
+          <p><span class="num static">36</span></p>
+          <p>站点总数</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <p><span class="num offLine">36</span></p>
+          <p>离线站点</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <p><span class="num error">36</span></p>
+          <p>故障站点</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <p><span class="num alarm">36</span></p>
+          <p>告警站点</p>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<style lang="scss">
+.mapStaticTop {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  z-index: 1;
+  ul {
+    display: flex;
+    text-align: center;
+
+    li {
+      flex: 1;
+      width: 1.5rem;
+      height: 0.8rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #00f4fd;
+      p{
+          font-size:.2rem
+      }
+      .num{
+          margin-bottom:.0625rem;
+          display:inline-block;
+          font-size:.3rem
+      }
+    }
+  }
+}
+</style>

src/views/home/components/statisBottom.vue

@@ -5,8 +5,6 @@
         <div>
           <p><span class="num text-blue">1564.26</span></p>
           <p class="mb-10">(kW)</p>
-          
-          
         </div>
         <p  class="timeEle">日用电量</p>
       </li>

src/views/home/index.vue

@@ -8,8 +8,10 @@
         </div>
         <div class="column mapBox">
           <div class="map panel" id="mapF" style="height:100%;z-index:999999999999;width:100%">
+            <map-static-top></map-static-top>
             <div id="pickerBox">
               <input id="pickerInput" placeholder="输入关键字选取地点" />
+              <i class="el-icon-search"></i>
               <div id="poiInfo"></div>
             </div>
             <div class="panel-footer"></div>
@@ -69,12 +71,13 @@ import statisBottom from "./components/statisBottom";
 import pieChart from "./components/pieChart";
 import barChart from "./components/barChart";
 import lineChart from "./components/lineChart";
+import mapStaticTop from "./components/mapStaticTop";
 // 地图
 import AMap from "AMap";
 import AMapUI from "AMapUI";
 export default {
   name: "index",
-  components: { statisTop, statisBottom, pieChart, barChart, lineChart },
+  components: { statisTop, statisBottom, pieChart, barChart, lineChart ,mapStaticTop},
   data() {
     return {
       map: null,
@@ -258,14 +261,45 @@ export default {
 #pickerBox {
   position: absolute;
   z-index: 9999;
-  top: 50px;
-  right: 30px;
-  width: 300px;
+  top:.15rem;
+  right:.15rem;
+   width: 3rem;
+  height:.425rem;
+ 
+}
+ .el-icon-search{
+  position: absolute;
+    right: .1375rem;
+    top: .1rem;
+    font-size: .2125rem;color: #00f4fd
 }
 
 #pickerInput {
-  width: 200px;
-  padding: 5px 5px;
+  width: 3rem;
+  line-height:.425rem;
+  padding:0 .125rem;
+  outline:none;
+  border: 1px solid #00f4fd;
+border-radius: 18px;
+background:rgba(0,0,0,0);
+color:#fff;
+
+}
+
+input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+  color:#fff;
+}
+
+input:-moz-placeholder, textarea:-moz-placeholder {
+  color:#fff;
+}
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  color:#fff;
+}
+
+input:-ms-input-placeholder, textarea:-ms-input-placeholder {
+  color:#fff;
 }
 
 #poiInfo {

src/views/site/Overview.vue

@@ -1,19 +1,106 @@
 <template>
-  <div>
-    <section class="mainbox"></section>
+  <div class="overview">
+    <section class="mainbox">
+
+       <!-- topBox start -->
+      <div class="topBox">
+
+
+        <div class="column " >
+          <div class="panel powerView">
+             <h2>用电量概览</h2>
+             <div class="panel-footer"></div>
+          </div>
+          
+        </div>
+        <div class="column mapBox">
+          <div class="map panel" style="height:100%;z-index:999999999999;width:100%">
+            <map-static-top></map-static-top>
+            <div class="panel-footer"></div>
+          </div>
+        </div>
+
+        <div class="column">
+          <div class="panel deviceSum">
+           <h2>设备统计</h2>
+            <pie-chart></pie-chart>
+            <div class="panel-footer"></div>
+          </div>
+          <div class="panel deviceSum" style="margin-bottom:0">
+            <h2>告警统计</h2>
+            <pie-chart></pie-chart>
+            <div class="panel-footer"></div>
+          </div>
+        </div>
+      </div>
+       <!-- topBox end -->
+
+
+      <!-- bottomBox start -->
+      <div class="bottomBox">
+        <div class="column">
+          <div class="panel currentUsage" style="height: 100%">
+            <h2>实时负荷曲线</h2>
+            <real-time-chart></real-time-chart>
+            <div class="panel-footer"></div>
+          </div>
+        </div>
+        <div class="column">
+          <div class="panel currentUsage" style="height: 100%">
+             <h2>需量趋势</h2>
+            <bar-chart></bar-chart>
+            <div class="panel-footer"></div>
+          </div>
+        </div>
+         <div class="column">
+          <div class="panel currentUsage" style="height: 100%">
+             <div class="filterSec">
+              <select name="" id="">
+                <option value="11">日</option>
+                <option value="22">月</option>
+              </select>
+            </div>
+            <h2>历史趋势</h2>
+           <hist-trend-chart></hist-trend-chart>
+            <div class="panel-footer"></div>
+          </div>
+        </div>
+      </div>
+       <!-- bottomBox end -->
+    </section>
   </div>
 </template>
 <script>
+// import statisTop from "./components/Overview/statisTop";
+// import statisBottom from "./components/Overview/statisBottom";
+import pieChart from "./components/Overview/pieChart";
+import barChart from "./components/Overview/barChart";
+// import lineChart from "./components/Overview/lineChart";
+import mapStaticTop from "./components/Overview/mapStaticTop";
+
+import realTimeChart from "./components/Overview/realTimeChart";
+import histTrendChart from "./components/Overview/histTrendChart";
+
 export default {
+  name: "index",
+  // components: { statisTop, statisBottom, pieChart, barChart, lineChart,mapStaticTop },
+   components: { pieChart,barChart, mapStaticTop,realTimeChart,histTrendChart },
   data() {
-    return {};
+    return {
+     
+    };
+  },
+  created() {},
+  mounted() {
+   
+  },
+  methods: {
+
+    
   },
-  name: "overview",
-  components: {},
-  mounted() {},
-  methods: {},
 };
 </script>
 
-<style>
+<style lang="scss">
+
 </style>

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

@@ -0,0 +1,184 @@
+<template>
+  <div ref="distion" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {},
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.distion);
+      var option;
+
+      option = {
+        //    backgroundColor:'#323a5e',
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        grid: {
+          left: "0%",
+          right: "0%",
+          bottom: "0%",
+          top: "22%",
+          containLabel: true,
+        },
+        legend: {
+          itemGap: 30,
+          left: '30%',
+          top: 0,
+          textStyle: {
+            color: "#fff",
+          },
+          itemWidth: 12,
+          itemHeight: 10,
+        },
+        xAxis: {
+          type: "category",
+          data: ["0:00",
+            "2:00",
+            "4:00",
+            "6:00",
+            "8:00",
+            "10:00",
+            "12:00",
+            "13:00",
+            "16:00",
+            "18:00",
+            "20:00",
+            "22:00",
+          ],
+          axisLine: {
+            lineStyle: {
+              color:"rgba(0,0,0,0.1)",
+            },
+          },
+          axisTick: {
+                show: false
+            },
+          axisLabel: {
+            // interval: 0,
+            // rotate: 40,
+            textStyle: {
+                 color: '#fff',
+              fontFamily: "Microsoft YaHei",
+            },
+          },
+        },
+
+        yAxis: {
+          type: "value",
+        //   max: "800",
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "white",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+          axisLabel: {},
+        },
+        // dataZoom: [
+        //   {
+        //     show: true,
+        //     height: 12,
+        //     xAxisIndex: [0],
+        //     bottom: "8%",
+        //     start: 10,
+        //     end: 90,
+        //     handleIcon:
+        //       "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+        //     handleSize: "110%",
+        //     handleStyle: {
+        //       color: "#d3dee5",
+        //     },
+        //     textStyle: {
+        //       color: "#fff",
+        //     },
+        //     borderColor: "#90979c",
+        //   },
+        //   {
+        //     type: "inside",
+        //     show: true,
+        //     height: 15,
+        //     start: 1,
+        //     end: 35,
+        //   },
+        // ],
+        series: [
+          {
+            name: "昨日",
+            type: "bar",
+            barWidth: "20%",
+            barGap: '0%',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#00A7FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00A7FD",
+                  },
+                ]),
+              },
+            },
+            data: [40, 40, 30, 30, 30, 40, 40, 40, 30,40,50,60],
+          },
+          {
+            name: "当日",
+            type: "bar",
+            barWidth: "20%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#FD8F00",
+                  },
+                  {
+                    offset: 1,
+                    color: "#FD8F00",
+                  },
+                ]),
+              },
+            },
+            data: [40, 50, 50, 50, 50, 40, 40, 50, 50,20,40,30],
+          },
+        ],
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,150 @@
+<template>
+  <div ref="distion" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {},
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.distion);
+      var option;
+
+      option = {
+        color: ["#FEB70D", "#50F335","#0DC8FE"],
+        tooltip: {
+          trigger: "axis",
+        },
+        // 图列组件
+        legend: {
+          itemHeight: 10, //改变圆圈大小
+          itemWidth: 26, //改变圆圈大小
+          itemGap: 30,
+          textStyle: {
+            color: "#fff",
+          },
+
+          left: "30%",
+          bottom:'0'
+        },
+        grid: {
+          left: "0%",
+          right: "0%",
+          bottom: "15%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+         data: ["0:00",
+            "2:00",
+            "4:00",
+            "6:00",
+            "8:00",
+            "10:00",
+            "12:00",
+            "13:00",
+            "16:00",
+            "18:00",
+            "20:00",
+            "22:00",
+          ],
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#fff", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+        },
+        yAxis: {
+             name: 'A',
+              nameTextStyle: {
+            color: "#fff",
+            fontSize: 10,
+           
+        },
+            max: 1,  //设置左侧最大值
+          type: "value",
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#fff", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "IA(A)",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            // data: yearData[0].data[0],
+            data: [
+              0.24, 0.40, 0.101, 0.134, 0.30, 0.230, 0.210, 0.230, 0.120, 0.230,0.22,0.42,0.52,0.11
+            ],
+            symbolSize: 6, //拐点圆的大小
+            // symbol: 'circle',
+          },
+          {
+            name: "IB(A)",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            // data: yearData[0].data[1],
+            data: [
+            0.230, 0.210, 0.230, 0.120, 0.230,0.22,0.42,0.52,0.11, 0.210, 0.230, 0.120, 0.230
+            ],
+            symbolSize: 6, //拐点圆的大小
+            // symbol: 'circle',
+          },
+          {
+            name: "IC(A)",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            // data: yearData[0].data[1],
+            data: [
+             0.230, 0.120, 0.230,0.230, 0.210, 0.230, 0.120, 0.230,0.22,0.42,0.52,0.11, 0.210
+            ],
+            symbolSize: 6, //拐点圆的大小
+            // symbol: 'circle',
+          },
+        ],
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+      this.chart = chart;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,129 @@
+<template>
+  <div ref="distion" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {},
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.distion);
+      var option;
+
+      var arr = new Array();
+      for (var i = 0; i < 32; i++) {
+        arr.push(i);
+      }
+
+      option = {
+        color: ["#00F4FD", "#FD8F00"],
+        tooltip: {
+          trigger: "axis",
+        },
+        // 图列组件
+        legend: {
+          itemHeight: 10, //改变圆圈大小
+          itemWidth: 26, //改变圆圈大小
+          itemGap: 30,
+          textStyle: {
+            color: "#fff",
+          },
+
+          left: "30%",
+          top: 0,
+        },
+        grid: {
+          left: "0%",
+          right: "0%",
+          bottom: "0%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          data: arr,
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#fff", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#fff", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "故障数量",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            // data: yearData[0].data[0],
+            data: [
+              24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120, 230, 210,
+              230, 120, 230, 210, 120, 120, 230, 210, 230, 120, 230, 210, 120,
+              24, 40, 101, 134, 90, 230,
+            ],
+            symbolSize: 6, //拐点圆的大小
+            // symbol: 'circle',
+          },
+          {
+            name: "故障抢修数量",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            // data: yearData[0].data[1],
+            data: [
+              30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130, 110,
+              240, 228, 240, 130, 240, 220, 130, 240, 228, 240, 130, 240, 220,
+              130, 30, 50, 110, 144, 110, 240, 228, 240,
+            ],
+            symbolSize: 6, //拐点圆的大小
+            // symbol: 'circle',
+          },
+        ],
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+      this.chart = chart;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+  <div class="mapStaticTop">
+    <ul>
+      <li>
+        <div>
+          <p><span class="num static">36</span></p>
+          <p>站点总数</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <p><span class="num offLine">36</span></p>
+          <p>离线站点</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <p><span class="num error">36</span></p>
+          <p>故障站点</p>
+        </div>
+      </li>
+      <li>
+        <div>
+          <p><span class="num alarm">36</span></p>
+          <p>告警站点</p>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<style lang="scss">
+.mapStaticTop {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  z-index: 1;
+  ul {
+    display: flex;
+    text-align: center;
+
+    li {
+      flex: 1;
+      width: 1.5rem;
+      height: 0.8rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #00f4fd;
+      p{
+          font-size:.2rem
+      }
+      .num{
+          margin-bottom:.0625rem;
+          display:inline-block;
+          font-size:.3rem
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,161 @@
+<template>
+
+  <div ref="distion" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {
+    // className: {
+    //   type: String,
+    //   default: "chart",
+    // },
+    // width: {
+    //   type: String,
+    //   default: "100%",
+    // },
+    // height: {
+    //   type: String,
+    //   default: "400px",
+    // },
+    // perData: {
+    //   type: Array,
+    //   default: () => [
+    //     {
+    //       color: "#01ACFF",
+    //       name: "摄像头",
+    //       value: [39],
+    //       // nAmount: 566557.14,
+    //     },
+    //   ],
+    // },
+  },
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.distion);
+      var option;
+
+      var pie = [
+        {
+          value: 50,
+          name: "正常",
+        },
+        {
+          value: 150,
+          name: "故障",
+        },
+        {
+          value: 100,
+          name: "离线",
+        },
+        {
+          value: 100,
+          name: "预警",
+        },
+        {
+          value: 100,
+          name: "其他",
+        },
+      ];
+      var totalNum = 0;
+      pie.forEach(function (value) {
+        totalNum += value.value;
+      });
+
+      option = {
+        grid: {
+        },
+
+        title: [
+          {
+            text: "{name|" + totalNum + "}\n{val|设备总数}",
+            top: "center",
+            left: "center",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: 30,
+                  fontWeight: "normal",
+                  color: "#FFFFFF",
+                  fontFamily:"impact",
+                   padding: [0, 0,3,0]
+
+                },
+                val: {
+                  fontSize: 14,
+                  fontWeight: "normal",
+                  color: "#FFFFFF",
+                  padding: [3,0,0, 0]
+                },
+              },
+            },
+          },
+        ],
+        tooltip: {
+          trigger: "item",
+          formatter: function (params) {
+            return (
+              params.name +
+              "：" +
+              params.value +
+              "<br>占比：" +
+              params.percent.toFixed(2) +
+              "%"
+            );
+          },
+        },
+        // itemStyle:{
+        //     normal: {
+        //          label: {
+        //              show: true,
+        //         position: 'outside',
+        //              color: 'green',
+        //          }
+        //     }
+        // },
+
+        series: [
+          {
+            label: {
+              normal: {
+                show: true,
+                formatter: " {b}：{c} ",
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            name: "访问来源",
+            radius: ["45%", "67%"],
+            type: "pie", 
+            data: pie,
+          },
+        ],
+        color: ["#0DFE95", "#F7B61C", "#2BCCFF", "#FE5C0D", "#4388F9"],
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+      this.chart = chart;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,139 @@
+<template>
+  <div ref="distion" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {},
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.distion);
+      var option;
+
+      option = {
+        color: ["#FCFF14", "#35F393"],
+        tooltip: {
+          trigger: "axis",
+        },
+        // 图列组件
+        legend: {
+          itemHeight: 10, //改变圆圈大小
+          itemWidth: 26, //改变圆圈大小
+          itemGap: 30,
+          textStyle: {
+            color: "#fff",
+          },
+
+          left: "30%",
+          bottom:'0'
+        },
+        grid: {
+          left: "0%",
+          right: "0%",
+          bottom: "15%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+         data: ["0:00",
+            "2:00",
+            "4:00",
+            "6:00",
+            "8:00",
+            "10:00",
+            "12:00",
+            "13:00",
+            "16:00",
+            "18:00",
+            "20:00",
+            "22:00",
+          ],
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#fff", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+        },
+        yAxis: {
+             name: 'MW',
+              nameTextStyle: {
+            color: "#fff",
+            fontSize: 10,
+           
+        },
+            max: 1,  //设置左侧最大值
+          type: "value",
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#fff", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            // data: yearData[0].data[0],
+            data: [
+              0.24, 0.40, 0.101, 0.134, 0.30, 0.230, 0.210, 0.230, 0.120, 0.230,0.22,0.42,0.52,0.11
+            ],
+            symbolSize: 6, //拐点圆的大小
+            // symbol: 'circle',
+          },
+          {
+            name: "今日",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            // data: yearData[0].data[1],
+            data: [
+            0.230, 0.210, 0.230, 0.120, 0.230,0.22,0.42,0.52,0.11, 0.210, 0.230, 0.120, 0.230
+            ],
+            symbolSize: 6, //拐点圆的大小
+            // symbol: 'circle',
+          },
+        ],
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+      this.chart = chart;
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,43 @@
+<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 class="panel-footer"></div>
+  </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/site/components/Overview/statisTop.vue

@@ -0,0 +1,68 @@
+<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 class="panel-footer">
+      
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "statisTop",
+  components: {},
+  methods: {
+    // Site_details(){
+    //   this.$router.push({ path: '/Site_details'});//, query: { title: title }
+    // }
+  },
+};
+</script>
+
+<style>
+
+
+</style>