Merge branch 'ylf'

README.md

@@ -38,7 +38,7 @@ n: 传入数字。
 ```
 this.BASE.numberB0(1)
 ```
-###### getBzDate(time, tag, type = "date")
+###### getBzDate(time, tag = 0, type = "date")
 通过传入的时间戳获取所需的一个标准格式的日期
 >参数：  
 time: 时间戳  

src/assets/css/base.scss

@@ -346,4 +346,9 @@ body,
   z-index: 1;
 }
 
+.comReport{
+  width: 100%;
+  height: 100%;
+}
+
 /***框架样式 - 结束***/

src/assets/css/index/index.scss

@@ -14,6 +14,9 @@
     height: 100%;
     float: left;
     padding: 10px;
+    .shadow{
+      box-shadow: 0 0 5px rgba($color: #000000, $alpha: .2);
+    }
     >.item{
       width: 100%;
       height: calc((100% - #{15px})/4);
@@ -33,7 +36,6 @@
       >.con{
         height: 100%;
         display: block;
-        overflow: hidden;
         .one{
           float: left;
           width: 20%;
@@ -90,5 +92,89 @@
         }
       }
     }
+    >.item2{
+      width: 100%;
+      height: calc((100% - #{15px})/4);
+      margin-bottom: 5px;
+      .finishedPower, .powerLoad{
+        width: calc((100% - #{10px})/2);
+        height: 100%;
+        margin-right: 10px;
+        display: table;
+        float: left;
+        border: 1px solid $border-color-base;
+        &:last-child{
+          margin-right: 0;
+        }
+        >.title{
+          width: 30px;
+          padding: 0 5px;
+          height: 100%;
+          display: table-cell;
+          text-align: center;
+          vertical-align: middle;
+          border-right: 1px solid $border-color-base;
+        }
+        >.con{
+          height: 100%;
+          display: block;
+          .one{
+            float: left;
+            width: 20%;
+            height: 20%;
+            overflow: hidden;
+            border-bottom: 1px solid $border-color-base;
+            .name{
+              width: 110px;
+              height: 100%;
+              float: left;
+              padding: 0 3px;
+              border-right: 1px solid $border-color-base;
+              display: table;
+              >div{
+                display: table-cell;
+                vertical-align: middle;
+                text-align-last: justify;
+              }
+            }
+            .number{
+              width: calc(100% - #{160px});
+              height: 100%;
+              float: left;
+              border-right: 1px solid $border-color-base;
+              display: table;
+              >div{
+                font-family: "fontNameRegular";
+                font-size: 16px;
+                display: table-cell;
+                vertical-align: middle;
+                text-align: center;
+              }
+            }
+            .unit{
+              width: 50px;
+              height: 100%;
+              float: left;
+              border-right: 1px solid $border-color-base;
+              display: table;
+              >div{
+                display: table-cell;
+                vertical-align: middle;
+                text-align: center;
+              }
+            }
+            &:nth-child(21), &:nth-child(22), &:nth-child(23), &:nth-child(24), &:nth-child(25){
+              border-bottom: 0;
+            }
+            &:nth-child(5), &:nth-child(10), &:nth-child(15), &:nth-child(20), &:nth-child(25){
+              .unit{
+                border-right: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
   }
 }

src/assets/js/index/index.js

@@ -9,13 +9,181 @@ export default {
   components: {
     bdMap
   },
-  created: function() {
+  mounted: function() {
     this.init();
   },
   methods: {
     // 初始化
     init() {
       // websocket.init("/topic/popup");
+
+      this.ET.getBarsH("finishedPower",
+      ['月计划完成率1302%', '年计划完成率76%'],[
+        {
+          name: '月计划完成率',
+          type: 'bar',
+          barWidth: 12,
+          itemStyle: {
+            color: this.ET.color[0],
+            barBorderRadius: [0, 3, 3, 0] // 柱子圆角
+          },
+          data: [18203, 23489]
+        },
+        {
+          name: '年计划完成率',
+          type: 'bar',
+          barWidth: 12,
+          itemStyle: {
+            color: this.ET.color[2],
+            barBorderRadius: [0, 3, 3, 0] // 柱子圆角
+          },
+          data: [19325, 681807]
+        }
+      ]); // 完成电量
+
+      this.ET.getGaugesH("powerLoad",
+      ['月计划完成率1302%', '年计划完成率76%'],[
+        {
+          name: '月计划完成率',
+          type: 'bar',
+          barWidth: 12,
+          itemStyle: {
+            color: this.ET.color[0],
+            barBorderRadius: [0, 3, 3, 0] // 柱子圆角
+          },
+          data: [18203, 23489]
+        },
+        {
+          name: '年计划完成率',
+          type: 'bar',
+          barWidth: 12,
+          itemStyle: {
+            color: this.ET.color[2],
+            barBorderRadius: [0, 3, 3, 0] // 柱子圆角
+          },
+          data: [19325, 681807]
+        }
+      ]); // 功率负荷
+
+      this.ET.getLine("powerLine",[{
+        name: '应发功率(单位：MW)',
+        icon: "rect"
+      },{
+        name: '实发功率(单位：MW)',
+        icon: "rect"
+      },{
+        name: '理论功率(单位：MW)',
+        icon: "rect"
+      },{
+        name: '预测功率(单位：MW)',
+        icon: "rect"
+      },{
+        name: '保证功率(单位：MW)',
+        icon: "rect"
+      },{
+        name: '最优功率(单位：MW)',
+        icon: "rect"
+      },{
+        name: '平均风速/日照强度',
+        icon: "rect"
+      }],
+      ['00\n00', '00\n30','01\n00', '01\n30','02\n00', '02\n30','03\n00', '03\n30'],[
+        {
+          name: '应发功率(单位：MW)',
+          type: 'line',
+          smooth: true, // 平滑
+          symbol: "circle", // 拐点图形
+          symbolSize: 1,
+          data: [120, 1321, 101, 1324, 901, 2310, 1110]
+        },
+        {
+          name: '实发功率(单位：MW)',
+          type: 'line',
+          smooth: true,
+          symbol: "circle", // 拐点图形
+          symbolSize: 1,
+          data: [2220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+          name: '理论功率(单位：MW)',
+          type: 'line',
+          smooth: true,
+          symbol: "circle", // 拐点图形
+          symbolSize: 1,
+          data: [1520, 232, 201, 154, 190, 330, 410]
+        },
+        {
+          name: '预测功率(单位：MW)',
+          type: 'line',
+          smooth: true,
+          symbol: "circle", // 拐点图形
+          symbolSize: 1,
+          data: [3230.45, 332, 301, 334, 390, 330, 320]
+        },
+        {
+          name: '保证功率(单位：MW)',
+          type: 'line',
+          smooth: true,
+          symbol: "circle", // 拐点图形
+          symbolSize: 1,
+          data: [2230, 932, 901, 934, 1290, 1330, 1320]
+        },
+        {
+          name: '最优功率(单位：MW)',
+          type: 'line',
+          smooth: true,
+          symbol: "circle", // 拐点图形
+          symbolSize: 1,
+          data: [820, 932, 901, 934, 1290, 1330, 1320]
+        },
+        {
+          name: '平均风速/日照强度',
+          type: 'line',
+          smooth: true,
+          symbol: "circle", // 拐点图形
+          symbolSize: 1,
+          yAxisIndex: 1,
+          data: [10, 2, 1, 14, 12, 13, 10]
+        }
+      ]); // 功率曲线
+
+      this.ET.getBarsV("dayPowerTotal",[{
+        name: '日发电量(单位：万kWh)',
+        icon: "rect"
+      },{
+        name: '上网电量(单位：万kWh)',
+        icon: "rect"
+      },{
+        name: '购网电量(单位：万kWh)',
+        icon: "rect"
+      },{
+        name: '风速',
+        icon: "rect"
+      }],
+      ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日'], [
+        {
+          name: '日发电量(单位：万kWh)',
+          type: 'bar',
+          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
+        },
+        {
+          name: '上网电量(单位：万kWh)',
+          type: 'bar',
+          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+        },
+        {
+          name: '购网电量(单位：万kWh)',
+          type: 'bar',
+          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+        },
+        {
+          name: '风速',
+          type: 'bar',
+          yAxisIndex: 1,
+          data: [2.6, 5.9, 9.0, 26.4, 28.7, 7.7, 15.6, 8.2, 8.7, 18.8, 6.0, 2.3],
+        }
+      ]); // 日发电量
+
     },
   }
 }

src/main.js

@@ -12,12 +12,14 @@ Vue.prototype.API = axios;
 import base from "@tools/base"; // 公共方法
 Vue.prototype.BASE = base;
 
-import ECzm from "@tools/echartsToolzm"; // echarts处理
+import ECzm from "@tools/echartsToolzm"; // echarts处理 - zm
  Vue.prototype.ECZM = ECzm;
+ 
+import echartsTool from "@tools/echartsTool"; // Echarts 工具类 - ylf
+Vue.prototype.ET = echartsTool;
+
 // import formCheck from "@tools/formCheck"; // 表单的处理
 // Vue.prototype.FC = formCheck;
-// import echartsTool from "@tools/echartsTool"; // Echarts 工具类
-// Vue.prototype.ET = echartsTool;
 
 // 滚动条
 import vuescroll from "vuescroll"; 

src/tools/base.js

@@ -13,7 +13,7 @@ export function numberB0(n) {
  * type: 输出格式，date：标准日期1999-01-10；datetime：标准日期时间：1999-01-10 10:10:10。
  * 返回：1999-01-10
  */
-export function getBzDate(time, tag, type = "date") {
+export function getBzDate(time, tag = 0, type = "date") {
   let dateTime = new Date(time).getTime() + 3600*1000*24*tag;
   let newDate = new Date(dateTime);
   let result = newDate.getFullYear() + "-" + numberB0((newDate.getMonth() + 1)) + "-" + numberB0(newDate.getDate());
@@ -120,6 +120,63 @@ export function getNewNum(nStr) {
 }
 
 /*
+ *  对一个数字上取舍，如1234，取舍结果是2000
+ *  data: 数字
+ * */
+export function numberCeil(num) {
+  num = Math.ceil(num);
+  let indexNum = (num+"").length;
+  let result = 0;
+  let w = 1;
+  
+  switch(indexNum) {
+    case 1:
+      w = 1;
+      break;
+    case 2:
+      w = 10;
+      break;
+    case 3:
+      w = 100;
+      break;
+    case 4:
+      w = 1000;
+      break;
+    case 5:
+      w = 10000;
+      break;
+    case 6:
+      w = 100000;
+      break;
+    case 7:
+      w = 1000000;
+      break;
+    case 8:
+      w = 10000000;
+      break;
+    case 9:
+      w = 100000000;
+      break;
+    case 10:
+      w = 1000000000;
+      break;
+    case 11:
+      w = 10000000000;
+      break;
+    case 12:
+      w = 100000000000;
+      break;
+    case 13:
+      w = 1000000000000;
+      break;
+    default:
+      w = 10000000000000;
+  } 
+  result = Math.ceil(num/w)*w;
+  return result;
+}
+
+/*
  *  Ant和element-ui 级联相同bug - 底层存在children的时候会显示空模块的问题，此方法可以完成任意级别的递归找children。
  *  data:原型数据
  * */
@@ -139,6 +196,7 @@ export function cascaderBugRepair(data) {
 }
 
 export default {
+  numberCeil,
   getBzDate,
   cascaderBugRepair,
   getNewNum,

src/tools/echartsTool.js

@@ -1,85 +1,39 @@
-import * as EC from 'echarts';
+import EC from 'echarts';
 import { Message } from 'element-ui';
-const color = ["#00FFF0","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8cb25","#3dffb0","#e8a425","#ff7aab","#e84b1e","#552ce2","#ffae21","#e8861e","#d441ff","#35e8e4","#9c7aff","#e86fd8","#ffee38"];
+import BASE from '@tools/base';
+const color = ["#014EB5", "#A800FF", "#e82edb", "#B5454C", "#443bff", "#e8cb25", "#3dffb0", "#e8a425", "#ff7aab", "#e84b1e", "#552ce2", "#ffae21", "#e8861e", "#d441ff", "#35e8e4", "#9c7aff", "#e86fd8", "#ffee38"];
 
 /*
- *  获取 雷达图 - 常用1
+ *  获取 多柱状图 - 横向
  *  id: 元素ID
- *  horn: [
-      { name: '销售', max: 6500},
-      { name: '管理', max: 16000},
-      { name: '信息技术', max: 30000},
-      { name: '客服', max: 38000},
-      { name: '研发', max: 52000}
-    ]
+ *  x: ['月计划完成率1302%', '年计划完成率76%']
  *  data: [
       {
-        value: [4300, 10000, 28000, 35000, 50000],
-        name: '完好率'
-      }
-    ]
- *  name: 提示框name
- * */
-export function getRadar(id, horn, data, name) {
-  if(name === undefined){
-    name = "雷达数据";
-  }
-  if(data === undefined){
-    message.error("没有找到报表数据，请检查！");
-    return;
-  }
-  var myChart = EC.init(document.getElementById(id));
-  let option = {
-    tooltip: {},
-    radar: {
-      // shape: 'circle',
-      radius: "60%",
-      indicator: horn,
-      axisLine: {
-        lineStyle: {
-          color: "#FFF"
-        }
+        name: '月计划完成率',
+        type: 'bar',
+        barWidth: 12,
+        itemStyle: {
+          color: this.ET.color[0],
+          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
+        },
+        data: [18203, 23489]
       },
-      splitLine: {
-        lineStyle: {
-          color: "#2aafb7"
-        }
-      }
-    },
-    series: [{
-      name: name,
-      type: 'radar',
-      // areaStyle: {normal: {}},
-      data: data
-    }]
-  };
-  myChart.setOption(option, true);
-}
-
-/*
- *  获取 雷达图 - 常用2 - 百分比
- *  id: 元素ID
- *  horn: [
-      { name: '销售', max: 100},
-      { name: '管理', max: 100},
-      { name: '信息技术', max: 100},
-      { name: '客服', max: 100},
-      { name: '研发', max: 100}
-    ]
- *  data: [
       {
-        value: [98, 98, 98, 98, 98],
-        name: '完好率'
+        name: '年计划完成率',
+        type: 'bar',
+        barWidth: 12,
+        itemStyle: {
+          color: this.ET.color[2],
+          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
+        },
+        data: [19325, 681807]
       }
     ]
  *  name: 提示框name
  * */
-export function getRadar2(id, horn, data, name) {
-  if(name === undefined){
-    name = "雷达数据";
-  }
-  if(data === undefined){
-    message.error("没有找到报表数据，请检查！");
+export function getBarsH(id, x, data) {
+  if (data === undefined) {
+    Message.error("没有找到报表数据，请检查！");
     return;
   }
   var myChart = EC.init(document.getElementById(id));
@@ -87,87 +41,14 @@ export function getRadar2(id, horn, data, name) {
     tooltip: {
       // formatter: '{b0}<br />{a}: {c0}'
       formatter: function (params, ticket, callback) {
-        let value = params.data.name;
-        horn.forEach((item, i)=>{
-          value += '<br />'+item.name+'：'+params.data.value[i]+"%"
-        });
-        return value;
-      }
-    },
-    radar: {
-      // shape: 'circle',
-      radius: "60%",
-      indicator: horn,
-      axisLine: {
-        lineStyle: {
-          color: "#FFF"
-        }
-      },
-      splitLine: {
-        lineStyle: {
-          color: "#2aafb7"
-        }
-      }
-    },
-    series: [{
-      name: name,
-      type: 'radar',
-      // areaStyle: {normal: {}},
-      data: data
-    }]
-  };
-  myChart.setOption(option, true);
-}
-
-/*
- *  获取 柱状图 - 横向1
- *  id: 元素ID
- *  x: ['TOP6', 'TOP5', 'TOP4', 'TOP3', 'TOP2', 'TOP1']
- *  data: [{
-      value: 1000,
-      itemStyle: {
-        color: "#AAFAE0",
-        barBorderRadius: [0, 3, 3, 0] // 柱子圆角
-      }
-    },{
-      value: 2000,
-      itemStyle: {
-        color: "#FCCDBA",
-        barBorderRadius: [0, 3, 3, 0] // 柱子圆角
-      }
-    },{
-      value: 3000,
-      itemStyle: {
-        color: "#015EEA",
-        barBorderRadius: [0, 3, 3, 0] // 柱子圆角
-      }
-    }]
- *  name: 提示框name
- * */
-export function getBarHorizontal(id, x, data, name, tipX) {
-  if(name === undefined){
-    name = "数量";
-  }
-  if(data === undefined){
-    message.error("没有找到报表数据，请检查！");
-    return;
-  }
-  var myChart = EC.init(document.getElementById(id));
-  let option = {
-    tooltip: {
-      // formatter: '{b0}<br />{a}: {c0}'
-      formatter: function (params, ticket, callback) {
-        if(tipX === undefined){
-          return params.name+'<br />'+params.seriesName+': '+params.data.value;
-        }else{
-          return tipX[tipX.length - 1 - params.dataIndex]+'<br />'+params.seriesName+': '+params.data.value;
-        }
+        return '<font style="font-size: 12px; color: #ddd">' + params.name + '</font><br />' + (params.seriesIndex === 0 ? "实际" : "计划") + '发电量(万KW)：<b>' + BASE.getNewNum(params.value) + '</b>';
+        // return params.name+': '+params.seriesIndex+'<br />'+params.seriesName+': '+params.data.value;
       }
     },
     grid: {
       top: 10,
-      left: 60,
-      right: 40,
+      left: 110,
+      right: 20,
       bottom: 30,
     },
     xAxis: {
@@ -176,571 +57,354 @@ export function getBarHorizontal(id, x, data, name, tipX) {
       minInterval: 1, // 刻度不出现小数
       axisLine: {
         lineStyle: {
-          color: "#011A3F"
+          color: "#CCC"
         }
       },
-      splitLine: {
-        show: false
-      },
       axisTick: {
         show: false
       },
       axisLabel: {
-        fontSize: 12,
-        color: "#FFF"
-      },
-    },
-    yAxis: {
-      type: 'category',
-      data: x,
-      axisLine: {
-        lineStyle: {
-          color: "#011A3F"
-        }
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        fontSize: 12,
-        color: "#FFF"
-      },
-      splitLine: {
-        show: false
-      }
-    },
-    series: [
-      {
-        name: name,
-        type: 'bar',
-        barWidth: 6,
-        data: data
-      }
-    ]
-  };
-  myChart.setOption(option, true);
-}
-/*
- *  获取 柱状图 - 纵向1
- *  id: 元素ID
- *  x: ['TOP3', 'TOP2', 'TOP1']
- *  data: [{
-      value: 1000,
-      itemStyle: {
-        color: "#AAFAE0",
-        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
-      }
-    },{
-      value: 2000,
-      itemStyle: {
-        color: "#FCCDBA",
-        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
-      }
-    },{
-      value: 3000,
-      itemStyle: {
-        color: "#015EEA",
-        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
-      }
-    }]
- *  name: 提示框name
- * */
-export function getBarVertical(id, x, data, name) {
-  if(name === undefined){
-    name = "数量";
-  }
-  if(data === undefined){
-    message.error("没有找到报表数据，请检查！");
-    return;
-  }
-  var myChart = EC.init(document.getElementById(id));
-  let option = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    grid: {
-      top: 15,
-      left: 60,
-      right: 40,
-      bottom: 30,
-    },
-    yAxis: {
-      type: 'value',
-      boundaryGap: [0, 0.01],
-      minInterval: 1, // 刻度不出现小数
-      axisLine: {
-        lineStyle: {
-          color: "#011A3F"
-        }
-      },
-      splitLine: {
-        show: false
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        fontSize: 12,
-        color: "#FFF",
-        // 改变纵坐标的单位，过大的时候处理成万
+        fontSize: 10,
+        color: "#333",
         formatter: function (value, index) {
-          if(value >= 10000){
-            return (value/10000).toFixed(0)+"万";
-          }else{
+          if (value > 10000) {
+            return value / 10000 + 'w';
+          } else {
             return value;
           }
         }
-
       },
     },
-    xAxis: {
+    yAxis: {
       type: 'category',
       data: x,
       axisLine: {
         lineStyle: {
-          color: "#011A3F"
+          color: "#CCC"
         }
       },
       axisTick: {
         show: false
       },
       axisLabel: {
-        fontSize: 12,
-        color: "#FFF"
+        fontSize: 10,
+        color: "#333"
       },
       splitLine: {
         show: false
       }
     },
-    series: [
-      {
-        name: name,
-        type: 'bar',
-        barWidth: 6,
-        data: data
-      }
-    ]
+    series: data
   };
   myChart.setOption(option, true);
 }
+
 /*
- *  获取 柱状图 - 纵向2 - 一轴多线
+ *  获取 多柱状图 - 纵向
  *  id: 元素ID
- *  x: ['分中心1', '分中心2', '分中心3', '分中心4']
- *
+ *  x: ['00\n00', '00\n30','01\n00', '01\n30','02\n00', '02\n30','03\n00', '03\n30',]
  *  data: [
       {
-        name: '土建',
-        type: 'bar',
-        barWidth: 6,
-        itemStyle: {
-          color: "#4AB2EC",
-          barBorderRadius: [3, 3, 0, 0] // 柱子圆角
-        },
-        data: [7.0, 23.2, 25.6, 76.7]
-      },
-      {
-        name: '机电',
+        name: '月计划完成率',
         type: 'bar',
-        barWidth: 6,
+        barWidth: 12,
         itemStyle: {
-          color: "#F8CA9D",
-          barBorderRadius: [3, 3, 0, 0] // 柱子圆角
+          color: this.ET.color[0],
+          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
         },
-        data: [2.6, 5.9, 9.0, 26.4]
+        data: [18203, 23489]
       },
       {
-        name: '其他',
+        name: '年计划完成率',
         type: 'bar',
-        barWidth: 6,
+        barWidth: 12,
         itemStyle: {
-          color: "#8E6398",
-          barBorderRadius: [3, 3, 0, 0] // 柱子圆角
+          color: this.ET.color[2],
+          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
         },
-        data: [28.7, 70.7, 175.6, 182.2]
-      },
+        data: [19325, 681807]
+      }
     ]
+ *  name: 提示框name
  * */
-export function getBarVertical2(id, x, data) {
-  if(data === undefined){
-    message.error("没有找到报表数据，请检查！");
+export function getBarsV(id, legendData, x, data) {
+  if (data === undefined) {
+    Message.error("没有找到报表数据，请检查！");
     return;
   }
+  let maxMin = getMax(data); // 计算最大值
   var myChart = EC.init(document.getElementById(id));
   let option = {
     tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      }
+      trigger: 'axis'
+    },
+    legend: {
+      orient: 'vertical',
+      right: 10,
+      top: 10,
+      data: legendData
     },
     grid: {
-      top: 15,
+      top: 35,
       left: 60,
-      right: 40,
-      bottom: 30,
+      right: 220,
+      bottom: 40,
     },
-    yAxis: {
-      type: 'value',
-      boundaryGap: [0, 0.01],
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      boundaryGap: true, // 坐标两边留白策略 - 点在两个坐标中间
+      data: x,
       axisLine: {
         lineStyle: {
-          color: "#011A3F"
+          color: "#C8D6E4"
         }
       },
-      splitLine: {
-        show: false
-      },
       axisTick: {
-        show: false
+        lineStyle: {
+          color: "#C8D6E4"
+        }
       },
       axisLabel: {
-        fontSize: 12,
-        color: "#FFF",
-        // 改变纵坐标的单位，过大的时候处理成万
-        formatter: function (value, index) {
-          if(value >= 10000){
-            return (value/10000).toFixed(0)+"万";
-          }else{
-            return value;
-          }
-        }
+        color: "#333"
       },
     },
-    xAxis: {
-      type: 'category',
-      data: x,
+    yAxis: [{
+      type: 'value',
+      name: '发电量(万kW/h)',
       axisLine: {
-        lineStyle: {
-          color: "#011A3F"
-        }
+        show: false
       },
       axisTick: {
         show: false
       },
-      axisLabel: {
-        fontSize: 12,
-        color: "#FFF"
+      min:maxMin[0][1], // 最小值
+      max:maxMin[0][0], // 最大值
+      splitNumber:5, // 刻度数
+      interval: (maxMin[0][0]-maxMin[0][1])/5 //强制设置刻度间隔
+    },
+    {
+      type: 'value',
+      name: '风速(m/s)',
+      axisLine: {
+        show: false
       },
-      splitLine: {
+      axisTick: {
         show: false
-      }
-    },
+      },
+      min:maxMin[1][1], // 最小值
+      max:maxMin[1][0], // 最大值
+      splitNumber:5, // 刻度数
+      interval: (maxMin[1][0]-maxMin[1][1])/5 //强制设置刻度间隔
+    }],
     series: data
   };
   myChart.setOption(option, true);
 }
+
 /*
- *  获取 柱状图 - 纵向2_1 - 一轴多线百分比
+ *  获取 折线图
  *  id: 元素ID
- *  x: ['分中心1', '分中心2', '分中心3', '分中心4']
- *
+ *  x: ['00\n00', '00\n30','01\n00', '01\n30','02\n00', '02\n30','03\n00', '03\n30',]
  *  data: [
       {
-        name: '土建',
+        name: '月计划完成率',
         type: 'bar',
-        barWidth: 6,
+        barWidth: 12,
         itemStyle: {
-          color: "#4AB2EC",
-          barBorderRadius: [3, 3, 0, 0] // 柱子圆角
+          color: this.ET.color[0],
+          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
         },
-        data: [7.0, 23.2, 25.6, 76.7]
+        data: [18203, 23489]
       },
       {
-        name: '机电',
+        name: '年计划完成率',
         type: 'bar',
-        barWidth: 6,
+        barWidth: 12,
         itemStyle: {
-          color: "#F8CA9D",
-          barBorderRadius: [3, 3, 0, 0] // 柱子圆角
+          color: this.ET.color[2],
+          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
         },
-        data: [2.6, 5.9, 9.0, 26.4]
-      },
-      {
-        name: '其他',
-        type: 'bar',
-        barWidth: 6,
-        itemStyle: {
-          color: "#8E6398",
-          barBorderRadius: [3, 3, 0, 0] // 柱子圆角
-        },
-        data: [28.7, 70.7, 175.6, 182.2]
-      },
+        data: [19325, 681807]
+      }
     ]
+ *  name: 提示框name
  * */
-export function getBarVertical2_1(id, x, data) {
-  if(data === undefined){
-    message.error("没有找到报表数据，请检查！");
+export function getLine(id, legendData, x, data) {
+  if (data === undefined) {
+    Message.error("没有找到报表数据，请检查！");
     return;
   }
+  let maxMin = getMax(data); // 计算最大值
   var myChart = EC.init(document.getElementById(id));
   let option = {
     tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      },
+      trigger: 'axis'
+    },
+    legend: {
+      orient: 'vertical',
+      right: 10,
+      top: 20,
+      data: legendData
     },
     grid: {
-      top: 15,
+      top: 35,
       left: 60,
-      right: 40,
-      bottom: 30,
-    },
-    yAxis: {
-      max: 100,
-      type: 'value',
-      boundaryGap: [0, 0.01],
-      minInterval: 1, // 刻度不出现小数
-      axisLine: {
-        lineStyle: {
-          color: "#011A3F"
-        }
-      },
-      splitLine: {
-        show: false
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        fontSize: 12,
-        color: "#FFF",
-        formatter: '{value} %'
-      },
+      right: 210,
+      bottom: 40,
     },
     xAxis: {
       type: 'category',
+      boundaryGap: true, // 坐标两边留白策略 - 点在两个坐标中间
       data: x,
       axisLine: {
         lineStyle: {
-          color: "#011A3F"
+          color: "#C8D6E4"
         }
       },
       axisTick: {
-        show: false
+        lineStyle: {
+          color: "#C8D6E4"
+        }
       },
       axisLabel: {
-        fontSize: 12,
-        color: "#FFF"
+        color: "#333"
       },
-      splitLine: {
-        show: false
-      }
     },
-    series: data
-  };
-  myChart.setOption(option, true);
-}
-/*
- *  获取 柱状图 - 纵向3
- *  id: 元素ID
- *  x: ['TOP6', 'TOP5', 'TOP4', 'TOP3', 'TOP2', 'TOP1']
- *  data: [{
-      value: 1000,
-      itemStyle: {
-        color: "#D8A0FE",
-        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
-      }
-    },{
-      value: 2000,
-      itemStyle: {
-        color: "#D8A0FE",
-        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
-      }
-    },{
-      value: 3000,
-      itemStyle: {
-        color: "#D8A0FE",
-        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
-      }
-    },{
-      value: 4000,
-      itemStyle: {
-        color: "#D8A0FE",
-        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
-      }
-    },{
-      value: 5000,
-      itemStyle: {
-        color: "#D8A0FE",
-        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
-      }
-    },{
-      value: 5999,
-      itemStyle: {
-        color: "#D8A0FE",
-        barBorderRadius: [3, 3, 0, 0] // 柱子圆角
-      }
-    },]
- * */
-export function getBarVertical3(id, x, data, name) {
-  if(name === undefined){
-    name = "数量";
-  }
-  if(data === undefined){
-    message.error("没有找到报表数据，请检查！");
-    return;
-  }
-  var myChart = EC.init(document.getElementById(id));
-  let option = {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    grid: {
-      top: 25,
-      left: 80,
-      right: 40,
-      bottom: 30,
-    },
-    yAxis: {
+    yAxis: [{
       type: 'value',
-      boundaryGap: [0, 0.01],
-      minInterval: 1, // 刻度不出现小数
+      name: '功率数值(MW)',
       axisLine: {
-        lineStyle: {
-          color: "#011A3F"
-        }
-      },
-      splitLine: {
         show: false
       },
       axisTick: {
         show: false
       },
-      axisLabel: {
-        fontSize: 12,
-        color: "#FFF",
-        // 改变纵坐标的单位，过大的时候处理成万
-        formatter: function (value, index) {
-          if(value >= 10000){
-            return (value/10000).toFixed(0)+"万";
-          }else{
-            return value;
-          }
-        }
-      },
+      min:maxMin[0][1],
+      max:maxMin[0][0],
+      splitNumber:5,
+      interval: (maxMin[0][0]-maxMin[0][1])/5
     },
-    xAxis: {
-      type: 'category',
-      data: x,
+    {
+      type: 'value',
+      name: '平均风速/日照强度',
       axisLine: {
-        lineStyle: {
-          color: "#011A3F"
-        }
+        show: false
       },
       axisTick: {
         show: false
       },
-      axisLabel: {
-        fontSize: 12,
-        color: "#FFF"
-      },
-      splitLine: {
-        show: false
-      }
-    },
-    series: [
-      {
-        name: name,
-        type: 'bar',
-        barWidth: 6,
-        data: data
-      }
-    ]
+      min:maxMin[1][1],
+      max:maxMin[1][0],
+      splitNumber:5,
+      interval: (maxMin[1][0]-maxMin[1][1])/5
+    }],
+    series: data
   };
   myChart.setOption(option, true);
 }
+// 获取最大值
+export function getMax(data) {
+  let d1 = [];
+  let d0 = [];
+  data.forEach((item)=>{
+    if(item.yAxisIndex === 1){
+      d1 = d1.concat(item.data)
+    }else{
+      d0 = d0.concat(item.data)
+    }
+  });
+  return [
+    [BASE.numberCeil(Math.max.apply(null,d0)), Math.min.apply(null,d0)], 
+    [BASE.numberCeil(Math.max.apply(null,d1)), Math.min.apply(null,d1)]
+  ]
+}
 
 /*
- *  获取 饼图 - 常用1
+ *  获取 仪表
  *  id: 元素ID
- *  data: 饼图数据
- *  name: 提示框name
- *  [
-      {value: 335, name: '直接访问'},
-      {value: 310, name: '邮件营销'},
-      {value: 234, name: '联盟广告'},
-      {value: 135, name: '视频广告'},
-      {value: 1548, name: '搜索引擎'}
+ *  x: ['00\n00', '00\n30','01\n00', '01\n30','02\n00', '02\n30','03\n00', '03\n30',]
+ *  data: [
+      {
+        name: '月计划完成率',
+        type: 'bar',
+        barWidth: 12,
+        itemStyle: {
+          color: this.ET.color[0],
+          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
+        },
+        data: [18203, 23489]
+      },
+      {
+        name: '年计划完成率',
+        type: 'bar',
+        barWidth: 12,
+        itemStyle: {
+          color: this.ET.color[2],
+          barBorderRadius: [0, 3, 3, 0] // 柱子圆角
+        },
+        data: [19325, 681807]
+      }
     ]
+ *  name: 提示框name
  * */
-export function getPie(id, data, name) {
-  if(name === undefined){
-    name = "占比";
-  }
-  if(data === undefined){
-    message.error("没有找到报表数据，请检查！");
-    return;
-  }
+export function getGaugesH(id, legendData, x, data) {
+  // if (data === undefined) {
+  //   Message.error("没有找到报表数据，请检查！");
+  //   return;
+  // }
   var myChart = EC.init(document.getElementById(id));
   let option = {
     tooltip: {
-      trigger: 'item',
-      formatter: "{a} <br/>{b} : {c} ({d}%)"
-    },
-    grid: {
-      left: 44,
-      right: 25,
-      top: 56,
-      bottom: 40
+      formatter: "{a} <br/>{c} {b}"
     },
-    color: color,
-    series: [{
-      name: name,
-      type: 'pie',
-      radius: ['45%', '65%'],
-      center: ['50%', '50%'],
-      data: data,
-      labelLine: {
-        length: 10,
-        length2: 10,
-        lineStyle: {
-          color: "#FFF"
-        }
-      },
-      itemStyle: {
-        emphasis: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: 'rgba(0, 0, 0, 0.5)'
+    series: [
+      {
+        name: '转速',
+        type: 'gauge',
+        center: ['20%', '60%'],    // 默认全局居中
+        radius: '70%',
+        min: 0,
+        max: 100,
+        startAngle: 180, // 开始角度
+        endAngle: 0, // 结束角度
+        splitNumber: 3,
+        axisLine: {            // 坐标轴线
+          lineStyle: {       // 属性lineStyle控制线条样式
+            width: 12
+          }
+        },
+        axisTick: {            // 坐标轴小标记
+          show: false,
+        },
+        splitLine: {           // 分隔线
+          show: false,
+        },
+        pointer: {
+          width: 5
         },
-        normal: {
-          label: {
-            textStyle: {
-              color:'#FFF',
-              fontSize: 14,
-            }
-          },
+        title: {
+          offsetCenter: [0, '30%'],       // x, y，单位px
         },
+        detail: {
+          // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+          fontWeight: 'bolder'
+        },
+        data: [{ value: 1.51, name: '风速' }]
       },
-      label: {
-        formatter: ['{b}','{d}%'].join('\n')
-      }
-    }]
+    ]
   };
   myChart.setOption(option, true);
 }
 
 
 export default {
+  getGaugesH,
 
-  getRadar,
-  getRadar2,
-
-  getBarHorizontal,
-  getBarVertical,
-  getBarVertical2,
-  getBarVertical2_1,
-  getBarVertical3,
+  getBarsH,
+  getBarsV,
 
-  getPie,
+  getLine,
 
   color,
 }

src/views/index/index.vue

@@ -9,7 +9,7 @@
     <!-- 右侧数据区域 -->
     <div class="data">
       <!-- 综合指标 -->
-      <div class="item comprehensiveKPI">
+      <div class="item shadow">
         <div class="title">综合指标</div>
         <div class="con">
           
@@ -139,31 +139,39 @@
           </div>
           <div class="one">
             <div class="name"><div>年限电损失电量</div></div>
-            <div class="number"><div>734</div></div>
+            <div class="number"><div>73.41</div></div>
             <div class="unit"><div>万kwh</div></div>
           </div>
           
         </div>
       </div>
       <!-- 完成电量 -->
-      <div class="item comprehensiveKPI">
-        <div class="title">完成电量</div>
-        <div class="con">
-          内容
+      <div class="item2">
+        <div class="finishedPower shadow">
+          <div class="title">完成电量</div>
+          <div class="con">
+            <div id="finishedPower" class="comReport"></div>
+          </div>
+        </div>
+        <div class="powerLoad shadow">
+          <div class="title">功率负荷</div>
+          <div class="con">
+            <div id="powerLoad" class="comReport"></div>
+          </div>
         </div>
       </div>
       <!-- 功率曲线 -->
-      <div class="item comprehensiveKPI">
+      <div class="item">
         <div class="title">功率曲线</div>
         <div class="con">
-          内容
+          <div id="powerLine" class="comReport"></div>
         </div>
       </div>
       <!-- 日发电量 -->
-      <div class="item comprehensiveKPI">
+      <div class="item">
         <div class="title">日发电量</div>
         <div class="con">
-          内容
+          <div id="dayPowerTotal" class="comReport"></div>
         </div>
       </div>