统计分析

src/components/chart/combination/multiple-bar-line-chart.vue

@@ -184,7 +184,15 @@ export default {
     // 颜色
     color: {
       type: Array,
-      default: () => ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
+      default: () => [
+        "#05bb4c",
+        "#4b55ae",
+        "#fa8c16",
+        "#f8de5b",
+        "#1a93cf",
+        "#c531c7",
+        "#bd3338",
+      ],
     },
     showAnimation: {
       type: Boolean,
@@ -196,18 +204,41 @@ export default {
       id: "",
       chart: null,
       firstAnimation: true,
+      newbarData: null,
     };
   },
+  watch: {
+    barData: {
+      handler(newValue, oldValue) {
+        console.warn(newValue);
+        this.newbarData = newValue;
+        this.initChart();
+      },
+      deep: true,
+    },
+    lineData : {
+      handler(newValue, oldValue) {
+        console.warn(newValue);
+        this.newlineData = newValue;
+        this.initChart();
+      },
+      deep: true,
+    },
+  },
   computed: {
     legend() {
-      return this.barData.map((t) => {
+      return this.newbarData.map((t) => {
         return t.title;
       });
     },
     xdata() {
       let result = [];
-      if (this.barData && this.barData.length > 0 && this.barData[0].value.length > 0) {
-        result = this.barData[0].value.map((t) => {
+      if (
+        this.newbarData &&
+        this.newbarData.length > 0 &&
+        this.newbarData[0].value.length > 0
+      ) {
+        result = this.newbarData[0].value.map((t) => {
           return t.text;
         });
       }
@@ -255,8 +286,8 @@ export default {
     },
     series() {
       let result = [];
-      if (this.barData && this.barData.length > 0) {
-        this.barData.forEach((value, index) => {
+      if (this.newbarData && this.newbarData.length > 0) {
+        this.newbarData.forEach((value, index) => {
           result.push({
             name: value.title,
             type: "bar",
@@ -324,10 +355,10 @@ export default {
       };
 
       // line data
-      if (this.lineData && this.lineData.data.length > 0) {
+      if (this.newlineData && this.newlineData.data.length > 0) {
         option.yAxis.push({
           type: "value",
-          name: this.lineData.name,
+          name: this.newlineData.name,
           axisLabel: {
             formatter: "{value} ",
             color: partten.getColor("gray"),
@@ -349,9 +380,9 @@ export default {
         });
 
         option.series.push({
-          name: this.lineData.name,
+          name: this.newlineData.name,
           type: "line",
-          data: this.lineData.data,
+          data: this.newlineData.data,
           smooth: true, //平滑展示
           yAxisIndex: option.yAxis.length - 1,
           lineStyle: {
@@ -366,7 +397,7 @@ export default {
       chart.clear();
       chart.setOption(option);
 
-      this.resize = function() {
+      this.resize = function () {
         chart.resize();
       };
 
@@ -375,6 +406,7 @@ export default {
   },
   created() {
     this.id = "pie-chart-" + util.newGUID();
+    this.newbarData = this.barData;
   },
   mounted() {
     this.$nextTick(() => {

src/components/chart/combination/vertival-bar-line-chart.vue

@@ -41,7 +41,7 @@ export default {
     },
     lineData: {
       type: Array,
-      default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
+      // default: () => [200, 350, 400, 500, 600, 700, 800, 900, 1200],
     },
     // 单位
     units: {
@@ -63,11 +63,22 @@ export default {
     return {
       id: "",
       chart: null,
+      newbardata:null
     };
   },
+    watch: {
+    bardata: {
+      handler(newValue, oldValue) {
+        console.warn(newValue);
+        this.newbardata = newValue;
+        this.initChart();
+      },
+      deep: true,
+    },
+  },
   computed: {
     legend() {
-      return this.bardata.legend;
+      return this.newbardata.legend;
     },
   },
   methods: {
@@ -93,7 +104,7 @@ export default {
         },
         legend: {
           show: this.showLegend,
-          data: this.bardata.legend,
+          data: this.newbardata.legend,
           right: 120,
           icon: "ract",
           itemWidth: 8,
@@ -116,7 +127,7 @@ export default {
             axisTick: {
               show: false,
             },
-            data: this.bardata.area,
+            data: this.newbardata.area,
           },
         ],
         yAxis: [
@@ -168,28 +179,28 @@ export default {
       };
 
       // line data
-      if (this.lineData.length > 0) {
-        option.series.push({
-          name: this.units[0],
-          type: "line",
-          data: this.lineData,
-          smooth: false, //平滑展示
-          yAxisIndex: 0,
-          lineStyle: {
-            // color: partten.getColor("green"),
-            color: "#323E6F",
-          },
-          itemStyle: {
-            // color: partten.getColor("green"),
-            color: "#323E6F",
-          },
-        });
-      }
+      // if (this.lineData.length > 0) {
+      //   option.series.push({
+      //     name: this.units[0],
+      //     type: "line",
+      //     data: this.lineData,
+      //     smooth: false, //平滑展示
+      //     yAxisIndex: 0,
+      //     lineStyle: {
+      //       // color: partten.getColor("green"),
+      //       color: "#323E6F",
+      //     },
+      //     itemStyle: {
+      //       // color: partten.getColor("green"),
+      //       color: "#323E6F",
+      //     },
+      //   });
+      // }
 
       // bar data
-      for (var i = 0; i < this.bardata.legend.length; i++) {
+      for (var i = 0; i < this.newbardata.legend.length; i++) {
         option.series.push({
-          name: this.bardata.legend[i],
+          name: this.newbardata.legend[i],
           type: "bar",
           stack: "总量",
           yAxisIndex: 1,
@@ -198,7 +209,7 @@ export default {
             show: false,
             position: "insideRight",
           },
-          data: this.bardata.data[i],
+          data: this.newbardata.data[i],
         });
       }
 
@@ -207,6 +218,7 @@ export default {
   },
   created() {
     this.id = "pie-chart-" + util.newGUID();
+    this.newbardata = this.bardata
   },
   mounted() {
     this.$nextTick(() => {

src/components/chart/line/double-line-chart.vue

@@ -124,31 +124,43 @@ export default {
       id: "",
       chart: null,
       color: ["#05bb4c", "#f8de5b", "#4b55ae", "#fa8c16"],
+      newlist: null,
     };
   },
+  watch: {
+    list: {
+      handler(newValue, oldValue) {
+        console.warn(newValue);
+        this.newlist = newValue;
+        this.$nextTick(() => {
+          this.initChart();
+        });
+      },
+      deep: true,
+    },
+  },
   computed: {
     colorValue() {
       return partten.getColor(this.color);
     },
     datas() {
-      return this.list.map((t) => {
+      return this.newlist.map((t) => {
         return t.value;
       });
     },
     legend() {
-      return this.list.map((t) => {
+      return this.newlist.map((t) => {
         return t.title;
       });
     },
     xdata() {
-      return this.list[0].value.map((t) => {
+      return this.newlist[0].value.map((t) => {
         return t.text;
       });
     },
     series() {
       let result = [];
-      this.list.forEach((value, index) => {
-        
+      this.newlist.forEach((value, index) => {
         result.push({
           name: value.title,
           type: "line",
@@ -243,7 +255,7 @@ export default {
       chart.clear();
       chart.setOption(option);
 
-      this.resize = function() {
+      this.resize = function () {
         chart.resize();
       };
 
@@ -254,6 +266,9 @@ export default {
     this.$nextTick(() => {
       this.id = "pie-chart-" + util.newGUID();
     });
+    this.newlist = this.list;
+    console.warn(this.list);
+    console.warn(this.newlist);
   },
   mounted() {
     this.$nextTick(() => {

src/views/NewPages/znzhfx.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="znzhfx">
-    <el-scrollbar height="1022px">
+    <el-scrollbar height="910px">
       <el-row :gutter="20" class="table-panel">
         <el-col :span="24">
           <div class="back">
@@ -60,7 +60,11 @@
       </div>
       <div class="mg-b-16">
         <panel :title="'损失电量分析'" :showLine="true">
-          <multiple-bar-line-chart :height="'21.296vh'" :barData="bar1Data" />
+          <multiple-bar-line-chart
+            :height="'21.296vh'"
+            :barData="bar1Data"
+            :lineData="lineData"
+          />
         </panel>
       </div>
       <div class="mg-b-16">
@@ -69,8 +73,8 @@
         </panel>
       </div>
       <div class="mg-b-16">
-        <panel :title="'损失电量分析'" :showLine="true" :list="list">
-          <double-line-chart :height="'21.296vh'" />
+        <panel :title="'损失电量分析'" :showLine="true" >
+          <double-line-chart :height="'21.296vh'" :list="list" />
         </panel>
       </div>
     </el-scrollbar>
@@ -95,32 +99,32 @@ export default {
   },
   data() {
     return {
-      wtId:'',
-      year:'',
-      month:'',
-      tableVal:'',
-      tabrow:{
-         "fdl":'实际发电量（万千瓦时）',
-         "fs":'平均风速（m/s）',
-         "gzss":'故障损失电量（万千瓦时）',
-         "jxss":'计划检修损失电量（万千瓦时）',
-         "xdss":'调度限电损失电量（万千瓦时）',
-         "xnss":'性能未达标损失电量（万千瓦时）',
-         "slss":'受累损失电量（万千瓦时）',
-         "llfdl":'理论发电量（万千瓦时）',
-         "gzxs":'故障停运时间（小时）',
-         "jxxs":'检修停运时间（小时）',
-         "tjxs":'待机时间（小时）',
-         "zdxs":'通讯中断时间（小时）',
-         "yxxs":'并网时间（小时）',
-         "lyxs":'设备利用小时（小时）',
-         "sbklyl":'设备利用率（%）',
-         "dxklyxs":'等效可用系数（%）',
-         "xfqr":'小风切入风速（m/s）',
-         "glyzxxs":'功率特性一致性系数（%）',
-         "yxfss":'有效风时数（小时）',
-         "xfqrhgl":'小风切入合格率（%）',
-         "jfpl":'静风频率（%）',
+      wtId: "",
+      year: "",
+      month: "",
+      tableVal: "",
+      tabrow: {
+        fdl: "实际发电量（万千瓦时）",
+        fs: "平均风速（m/s）",
+        gzss: "故障损失电量（万千瓦时）",
+        jxss: "计划检修损失电量（万千瓦时）",
+        xdss: "调度限电损失电量（万千瓦时）",
+        xnss: "性能未达标损失电量（万千瓦时）",
+        slss: "受累损失电量（万千瓦时）",
+        llfdl: "理论发电量（万千瓦时）",
+        gzxs: "故障停运时间（小时）",
+        jxxs: "检修停运时间（小时）",
+        tjxs: "待机时间（小时）",
+        zdxs: "通讯中断时间（小时）",
+        yxxs: "并网时间（小时）",
+        lyxs: "设备利用小时（小时）",
+        sbklyl: "设备利用率（%）",
+        dxklyxs: "等效可用系数（%）",
+        xfqr: "小风切入风速（m/s）",
+        glyzxxs: "功率特性一致性系数（%）",
+        yxfss: "有效风时数（小时）",
+        xfqrhgl: "小风切入合格率（%）",
+        jfpl: "静风频率（%）",
       },
       tableData2: {
         column: [
@@ -163,6 +167,41 @@ export default {
       bar1Data: [
         {
           title: "日发电量",
+          yAxisIndex: 0,
+          value: [
+            {
+              text: "05-01",
+              value: 1,
+            },
+            {
+              text: "05-01",
+              value: 2,
+            },
+            {
+              text: "05-01",
+              value: 1,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+            {
+              text: "05-01",
+              value: 3,
+            },
+          ],
+        },
+        {
+          title: "风速",
+          yAxisIndex: 0,
           value: [
             {
               text: "05-01",
@@ -195,6 +234,11 @@ export default {
           ],
         },
       ],
+      lineData: {
+        name: "风速",
+        unit: "km",
+        data: [200, 800, 400, 500, 800, 700, 800, 900, 200],
+      },
       bar2data: {
         area: [
           "05-01",
@@ -318,135 +362,152 @@ export default {
     this.wtId = this.$route.params.wtId;
     this.year = this.$route.params.year;
     this.month = this.$route.params.month;
-    this.search()
-    this.searchChart()
+    this.search();
+    this.searchChart();
   },
-  filters:{
-    tabrowfil(val){
-      return this.tabrow[val]
-    }
+  filters: {
+    tabrowfil(val) {
+      return this.tabrow[val];
+    },
   },
-  methods:{
+  methods: {
     async search() {
       const { data } = await this.API.requestData({
         subUrl: "/singleanalysis/singleanalysisSub",
-        method:'POST',
-        data:{
-             wtId : this.wtId,
-             year : this.year,
-             month : this.month,
-        }
+        method: "POST",
+        data: {
+          wtId: this.wtId,
+          year: this.year,
+          month: this.month,
+        },
       });
       console.warn(data.data);
-      const res = data.data
-      this.tableVal = data.data
+      const res = data.data;
+      this.tableVal = data.data;
       console.warn(this.tableVal);
-      let arr=[];
-      let keyarr = Object.keys(res.byzb)
+      let arr = [];
+      let keyarr = Object.keys(res.byzb);
       console.warn(keyarr);
-      let jarr = Object.keys(res)
-      for(let k of keyarr){
-        let obj={
-          'name' : k,
-          'byzb' : null,
-          'hbzb' : null,
-          'hqzb' : null,
-          'tbzb' : null,
-          'tqzb' : null,
-        }
-        for(let i in res){
-          for(let j of jarr){
-            if(i == j){
-            obj[j] = res[i][k]
-          }
+      let jarr = Object.keys(res);
+      for (let k of keyarr) {
+        let obj = {
+          name: k,
+          byzb: null,
+          hbzb: null,
+          hqzb: null,
+          tbzb: null,
+          tqzb: null,
+        };
+        for (let i in res) {
+          for (let j of jarr) {
+            if (i == j) {
+              obj[j] = res[i][k];
+            }
           }
         }
-        arr.push(obj)
+        arr.push(obj);
       }
-      arr= arr.filter((e)=>{
-        return e.name != 'id' &&  e.name != 'windturbineid' && e.name != 'windturbineName' 
-        && e.name != 'windPowerStationId' && e.name != 'windPowerStationName' 
-        && e.name != 'recorddate' && e.name != 'swdl'&& e.name != 'gwdl' 
-        && e.name != 'rlxs' && e.name != 'fjrl'
-      })
-      arr.forEach(e=>{
-        e.name = this.tabrow[e.name]
-      })
-      this.tableData2.data = arr
+      arr = arr.filter((e) => {
+        return (
+          e.name != "id" &&
+          e.name != "windturbineid" &&
+          e.name != "windturbineName" &&
+          e.name != "windPowerStationId" &&
+          e.name != "windPowerStationName" &&
+          e.name != "recorddate" &&
+          e.name != "swdl" &&
+          e.name != "gwdl" &&
+          e.name != "rlxs" &&
+          e.name != "fjrl"
+        );
+      });
+      arr.forEach((e) => {
+        e.name = this.tabrow[e.name];
+      });
+      this.tableData2.data = arr;
       console.warn(arr);
     },
-     async searchChart() {
+    async searchChart() {
       const { data } = await this.API.requestData({
         subUrl: "/singleanalysis/singleanalysisChart",
-        method:'POST',
-        data:{
-             wtId : this.wtId,
-             year : this.year,
-             month : this.month,
-        }
+        method: "POST",
+        data: {
+          wtId: this.wtId,
+          year: this.year,
+          month: this.month,
+        },
       });
       console.warn(data.data);
-      const res = data.data
-      let arrff=[];
-      res.ff.forEach(e => {
-        let obj={
-          text: new Date(e.recorddate ).formatDate("MM-dd"),
-          value:e.fdl,
-        }
-        arrff.push(obj)
+      const res = data.data;
+      let arrfffdl = [];
+      let arrfffs = [];
+      res.ff.forEach((e) => {
+        let obj = {
+          text: new Date(e.recorddate).formatDate("MM-dd"),
+          value: e.fdl,
+        };
+        let obj1 = {
+          text: new Date(e.recorddate).formatDate("MM-dd"),
+          value: e.fs,
+        };
+        arrfffdl.push(obj);
+        arrfffs.push(obj1);
       });
-      this.bar1Data[0].value = arrff
+      this.bar1Data[0].value = arrfffdl;
+      this.lineData.data = arrfffs;
       ////
-      let arrjdjf=[];
-      let arrjddj=[];
-      res.jd.forEach(e => {
-        let obj={
-          text: new Date(e.recorddate ).formatDate("MM-dd"),
-          value:e.jfpl,
-        }
-        let obj1={
-          text: new Date(e.recorddate ).formatDate("MM-dd"),
-          value:e.tjxs,
-        }
-        arrjdjf.push(obj)
-        arrjddj.push(obj1)
+      let arrjdjf = [];
+      let arrjddj = [];
+      res.jd.forEach((e) => {
+        let obj = {
+          text: new Date(e.recorddate).formatDate("MM-dd"),
+          value: e.jfpl,
+        };
+        let obj1 = {
+          text: new Date(e.recorddate).formatDate("MM-dd"),
+          value: e.tjxs,
+        };
+        arrjdjf.push(obj);
+        arrjddj.push(obj1);
       });
-      let obj={
+      let obj = {
         title: "静风时长(小时)",
         smooth: false,
-        value:arrjdjf
-      }
-      let obj1={
+        value: arrjdjf,
+      };
+      let obj1 = {
         title: "待机时长(小时)",
         smooth: false,
-        value:arrjddj
-      }
-      this.list =[]
-      this.list.push(obj)
-      this.list.push(obj1)
+        value: arrjddj,
+      };
+      this.list = [];
+      this.list.push(obj);
+      this.list.push(obj1);
       console.warn(this.list);
       /////
-      let arrwsarea=[];
-      let arrwslegend=["限电损失电量",
-          "性能未达标损失电量",
-          "检修损失电量",
-          "故障损失电量",
-          "受累损失电量" ];
-      let arrwsdata=[];
-      res.ws.forEach(e => {
-        let arr=[]
-        for(let k of ['xdss','xnss','jxss','gzss','slss']){
-          arr.push(e[k])
+      let arrwsarea = [];
+      let arrwslegend = [
+        "限电损失电量",
+        "性能未达标损失电量",
+        "检修损失电量",
+        "故障损失电量",
+        "受累损失电量",
+      ];
+      let arrwsdata = [];
+      res.ws.forEach((e) => {
+        let arr = [];
+        for (let k of ["xdss", "xnss", "jxss", "gzss", "slss"]) {
+          arr.push(e[k]);
         }
-        arrwsdata.push(arr)
-        arrwsarea.push(new Date(e.recorddate ).formatDate("MM-dd"))
+        arrwsdata.push(arr);
+        arrwsarea.push(new Date(e.recorddate).formatDate("MM-dd"));
       });
-      this.bar2data.area = arrwsarea
-      this.bar2data.legend = arrwslegend
-      this.bar2data.data = arrwsdata
+      this.bar2data.area = arrwsarea;
+      this.bar2data.legend = arrwslegend;
+      this.bar2data.data = arrwsdata;
       console.warn(this.bar2data);
     },
-  }
+  },
 };
 </script>