优化公共内容，增加404，优化首页功能，首页地图根据情况进行更换为图片或离线地图。

README.md

@@ -72,6 +72,17 @@ nStr：数字
 ```
 this.BASE.getNewNum(123456789) // 返回：1,2345,6789
 ```
+###### numberCeil(num)
+对一个数字上取舍，如1234，取舍结果是2000。
+适配万亿级别的数字
+>参数：  
+num: 数字。  
+
+使用方式：
+```
+this.BASE.numberCeil(1234) // 返回：2000
+this.BASE.numberCeil(12) // 返回：20
+```
 ###### cascaderBugRepair(data)
 Ant和element-ui 级联相同bug - 底层存在children的时候会显示空模块的问题，此方法可以完成任意级别的递归找children。
 >参数：  
@@ -92,6 +103,11 @@ this.BASE.cascaderBugRepair(树结构的数据)
 </VueScroll>
 ```
 
+### 404
+404.vue对所有未注入的路由地址进行拦截，统一处理。
+### 组件
+common/menu.vue菜单公共组件。
+
 # 运行、打包
 ```
 npm run serve // 运行

src/assets/css/index/index.scss

@@ -15,7 +15,16 @@
     float: left;
     padding: 10px;
     .shadow{
-      box-shadow: 0 0 5px rgba($color: #000000, $alpha: .2);
+      -webkit-box-shadow: 0 0 5px rgba($color: #000000, $alpha: .1);
+      -moz-box-shadow: 0 0 5px rgba($color: #000000, $alpha: .1);
+      -o-box-shadow: 0 0 5px rgba($color: #000000, $alpha: .1);
+      box-shadow: 0 0 5px rgba($color: #000000, $alpha: .1);
+      &:hover{
+        -webkit-box-shadow: 0 0 5px rgba($color: #000000, $alpha: .5);
+        -moz-box-shadow: 0 0 5px rgba($color: #000000, $alpha: .5);
+        -o-box-shadow: 0 0 5px rgba($color: #000000, $alpha: .5);
+        box-shadow: 0 0 5px rgba($color: #000000, $alpha: .5);
+      }
     }
     >.item{
       width: 100%;

src/assets/js/index/index.js

@@ -41,28 +41,195 @@ export default {
         }
       ]); // 完成电量
 
-      this.ET.getGaugesH("powerLoad",
-      ['月计划完成率1302%', '年计划完成率76%'],[
+      this.ET.getGaugesH("powerLoad",[
         {
-          name: '月计划完成率',
-          type: 'bar',
-          barWidth: 12,
-          itemStyle: {
-            color: this.ET.color[0],
-            barBorderRadius: [0, 3, 3, 0] // 柱子圆角
+          name: '转速',
+          type: 'gauge',
+          center: ['14%', '60%'],    // 默认全局居中
+          radius: '60%',
+          min: 0,
+          max: 100,
+          startAngle: 180, // 开始角度
+          endAngle: 0, // 结束角度
+          splitNumber: 2, // 分段
+          axisLine: { // 坐标轴线
+            lineStyle: { // 属性lineStyle控制线条样式
+              width: 12,
+              color: [ // 设置分段颜色
+                [0.5, "#4dabf7"],
+                [0.65, "#69db7c"],
+                [0.8, "#ffa94d"],
+                [1, "#ff6b6b"]
+              ]
+            }
           },
-          data: [18203, 23489]
+          axisLabel: {
+            distance: -15, // 标签与刻度线的距离。
+            formatter: function (value) {
+              console.log(value)
+              return Math.ceil(value);
+            }
+          },
+          axisTick: { // 坐标轴小标记
+            show: false,
+          },
+          splitLine: { // 分隔线
+            show: false,
+          },
+          pointer: {
+            width: 5
+          },
+          title: {
+            offsetCenter: [0, '30%'], // x, y，单位px
+          },
+          detail: { // 当前指示数值
+            fontSize: 16,
+            offsetCenter: [0, '-120%'],
+            formatter: '{value}m/s'
+          },
+          data: [{ value: 34, name: '风速' }]
         },
         {
-          name: '年计划完成率',
-          type: 'bar',
-          barWidth: 12,
-          itemStyle: {
-            color: this.ET.color[2],
-            barBorderRadius: [0, 3, 3, 0] // 柱子圆角
+          name: '转速',
+          type: 'gauge',
+          center: ['38%', '60%'], // 默认全局居中
+          radius: '60%',
+          min: 0,
+          max: 600,
+          startAngle: 180, // 开始角度
+          endAngle: 0, // 结束角度
+          splitNumber: 2, // 分段
+          axisLine: { // 坐标轴线
+            lineStyle: { // 属性lineStyle控制线条样式
+              width: 12,
+              color: [ // 设置分段颜色
+                [0.5, "#4dabf7"],
+                [0.65, "#69db7c"],
+                [0.8, "#ffa94d"],
+                [1, "#ff6b6b"]
+              ]
+            }
           },
-          data: [19325, 681807]
-        }
+          axisLabel: {
+            distance: -15, // 标签与刻度线的距离。
+            formatter: function (value) {
+              console.log(value)
+              return Math.ceil(value);
+            }
+          },
+          axisTick: {            // 坐标轴小标记
+            show: false,
+          },
+          splitLine: {           // 分隔线
+            show: false,
+          },
+          pointer: {
+            width: 5
+          },
+          title: {
+            offsetCenter: [0, '30%'],       // x, y，单位px
+          },
+          detail: { // 当前指示数值
+            fontSize: 16,
+            offsetCenter: [0, '-120%'],
+            formatter: '{value}MW'
+          },
+          data: [{ value: 341, name: '保证功率' }]
+        },
+        {
+          name: '转速',
+          type: 'gauge',
+          center: ['62%', '60%'],    // 默认全局居中
+          radius: '60%',
+          min: 0,
+          max: 600,
+          startAngle: 180, // 开始角度
+          endAngle: 0, // 结束角度
+          splitNumber: 2, // 分段
+          axisLine: {            // 坐标轴线
+            lineStyle: {       // 属性lineStyle控制线条样式
+              width: 12,
+              color: [ // 设置分段颜色
+                [0.5, "#4dabf7"],
+                [0.65, "#69db7c"],
+                [0.8, "#ffa94d"],
+                [1, "#ff6b6b"]
+              ]
+            }
+          },
+          axisLabel: {
+            distance: -15, // 标签与刻度线的距离。
+            formatter: function (value) {
+              console.log(value)
+              return Math.ceil(value);
+            }
+          },
+          axisTick: {            // 坐标轴小标记
+            show: false,
+          },
+          splitLine: {           // 分隔线
+            show: false,
+          },
+          pointer: {
+            width: 5
+          },
+          title: {
+            offsetCenter: [0, '30%'],       // x, y，单位px
+          },
+          detail: { // 当前指示数值
+            fontSize: 16,
+            offsetCenter: [0, '-120%'],
+            formatter: '{value}MW'
+          },
+          data: [{ value: 134, name: '应发功率' }]
+        },
+        {
+          name: '转速',
+          type: 'gauge',
+          center: ['86%', '60%'],    // 默认全局居中
+          radius: '60%',
+          min: 0,
+          max: 600,
+          startAngle: 180, // 开始角度
+          endAngle: 0, // 结束角度
+          splitNumber: 2, // 分段
+          axisLine: {            // 坐标轴线
+            lineStyle: {       // 属性lineStyle控制线条样式
+              width: 12,
+              color: [ // 设置分段颜色
+                [0.5, "#4dabf7"],
+                [0.65, "#69db7c"],
+                [0.8, "#ffa94d"],
+                [1, "#ff6b6b"]
+              ]
+            }
+          },
+          axisLabel: {
+            distance: -15, // 标签与刻度线的距离。
+            formatter: function (value) {
+              console.log(value)
+              return Math.ceil(value);
+            }
+          },
+          axisTick: {            // 坐标轴小标记
+            show: false,
+          },
+          splitLine: {           // 分隔线
+            show: false,
+          },
+          pointer: {
+            width: 5
+          },
+          title: {
+            offsetCenter: [0, '30%'],       // x, y，单位px
+          },
+          detail: { // 当前指示数值
+            fontSize: 16,
+            offsetCenter: [0, '-120%'],
+            formatter: '{value}MW'
+          },
+          data: [{ value: 234, name: '实发功率' }]
+        },
       ]); // 功率负荷
 
       this.ET.getLine("powerLine",[{

src/router/index.js

@@ -13,6 +13,7 @@ VueRouter.prototype.replace = function replace(location) {
 
 // 公共页面
 import main from '@views/main'
+import error404 from '@views/404'
 
 // 子路由
 import yRouter from '@router/ylf';
@@ -38,6 +39,14 @@ const routes = [
       ...zRouter
     ]
   },
+  {
+    path: '/404', // 页面不存在的情况下会跳到404页面
+    meta: {
+      requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
+    },
+    name: 'error404',
+    component: error404,
+  }
 ]
 
 const router = new VueRouter({

src/tools/base.js

@@ -122,7 +122,7 @@ export function getNewNum(nStr) {
 /*
  *  对一个数字上取舍，如1234，取舍结果是2000。
  *  适配万亿级别的数字
- *  data: 数字
+ *  num: 数字
  * */
 export function numberCeil(num) {
   num = Math.ceil(num);

src/tools/echartsTool.js

@@ -348,55 +348,17 @@ export function getMax(data) {
     ]
  *  name: 提示框name
  * */
-export function getGaugesH(id, legendData, x, data) {
-  // if (data === undefined) {
-  //   Message.error("没有找到报表数据，请检查！");
-  //   return;
-  // }
+export function getGaugesH(id, data) {
+  if (data === undefined) {
+    Message.error("没有找到报表数据，请检查！");
+    return;
+  }
   var myChart = EC.init(document.getElementById(id));
   let option = {
     tooltip: {
       formatter: "{a} <br/>{c} {b}"
     },
-    series: [
-      {
-        name: '转速',
-        type: 'gauge',
-        center: ['20%', '60%'],    // 默认全局居中
-        radius: '70%',
-        min: 0,
-        max: 100,
-        startAngle: 180, // 开始角度
-        endAngle: 0, // 结束角度
-        splitNumber: 3,
-        axisLine: {            // 坐标轴线
-          lineStyle: {       // 属性lineStyle控制线条样式
-            width: 12
-          }
-        },
-        axisLabel: {
-          distance: 1
-        },
-        axisTick: {            // 坐标轴小标记
-          show: false,
-        },
-        splitLine: {           // 分隔线
-          show: false,
-        },
-        pointer: {
-          width: 5
-        },
-        title: {
-          offsetCenter: [0, '30%'],       // x, y，单位px
-        },
-        detail: {
-          show: false,
-          // 其余属性默认使用全局文本样式，详见TEXTSTYLE
-          fontWeight: 'bolder'
-        },
-        data: [{ value: 40, name: '风速' }]
-      },
-    ]
+    series: data
   };
   myChart.setOption(option, true);
 }

src/views/404.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="frame">
+    
+    <h1>页面找不到了</h1>
+    <el-button @click="goIndex" type="success">返回首页</el-button>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: 'error',
+  data() {
+    return {
+
+    }
+  },
+  created() {
+  },
+  methods: {
+    // 回首页
+    goIndex(){
+      this.$router.replace({
+        path: "/"
+      });
+    },
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  @import "@assets/css/404.scss";
+</style>

src/views/index/index.vue

@@ -161,14 +161,14 @@
         </div>
       </div>
       <!-- 功率曲线 -->
-      <div class="item">
+      <div class="item shadow">
         <div class="title">功率曲线</div>
         <div class="con">
           <div id="powerLine" class="comReport"></div>
         </div>
       </div>
       <!-- 日发电量 -->
-      <div class="item">
+      <div class="item shadow">
         <div class="title">日发电量</div>
         <div class="con">
           <div id="dayPowerTotal" class="comReport"></div>