hb_sis_zhfx/src/views/singleAnalysis/znzhfx.vue

<template>
  <div class="znzhfx">
    <!-- <el-col :span="24">
          <div class="back">
            <button class="btn" type="button" @click="back">
              <span>返回</span>
            </button>
             <button class="btn green" @click="exportPDF">导出</button>
          </div>
          <div class="table-title">
            {{ wtId }}号风机{{ year }}年{{ month }}月运行指标性能分析
          </div>
        </el-col> -->
    <el-row :gutter="20" class="table-panel">
      <el-col :span="24">
        <div class="back">
          <button class="btn" type="button" @click="back">
            <span>返回</span>
          </button>
          <button class="btn" type="button" @click="exportPDF">导出</button>
        </div>
        <div class="table-title">
          {{ wtId }}号风机{{ year }}年{{ month }}月运行指标性能分析
        </div>
        <!-- <Table :data="tableData2" :canScroll="false" /> -->
      </el-col>
      <Table class="pdfDom" :data="tableData2" :canScroll="false" />
    </el-row>
    <div class="mg-b-16 anliz-des">
      <div>
        本月{{ wtId }}号风机风机设备利用小时数{{ tableVal.byzb && tableVal.byzb.lyxs }}小时、
		同比{{ tableVal.tqzb && tableVal.tqzb.lyxs }}小时，
		设备可利用率{{ tableVal.byzb && tableVal.byzb.sbklyl }}%、
		同比{{ tableVal.tqzb && tableVal.tqzb.sbklyl }}%；
		等效可用系数{{ tableVal.byzb && tableVal.byzb.dxklyxs }}%、
		同比{{ tableVal.tqzb && tableVal.tqzb.dxklyxs }}%；
		静风频率达到{{ tableVal.byzb && tableVal.byzb.jfpl }}%、
		同比{{ tableVal.tqzb && tableVal.tqzb.jfpl }}%；
		机组功率特性一致性系数达到{{ tableVal.byzb && tableVal.byzb.glyzxxs }}%、
		同比{{ tableVal.tqzb && tableVal.tqzb.glyzxxs }}%。 <br />
        {{ wtId }}风机{{ year }}年{{ month }}
		月平均风速{{ tableVal.byzb && tableVal.byzb.fs }}m/s、
		同比{{ tableVal.tqzb && tableVal.tqzb.fs }}m/s；
        小风平均切入风速{{ tableVal.byzb && tableVal.byzb.xfqr }}m/s、
		同比{{ tableVal.tqzb && tableVal.tqzb.xfqr }}m/s；
		有效风时数{{ tableVal.byzb && tableVal.byzb.yxfss }}小时、
		同比{{ tableVal.tqzb && tableVal.tqzb.yxfss }}小时；
		实际发电电量{{ tableVal.byzb && tableVal.byzb.fdl }}万kwh、
		同比{{ tableVal.tqzb && tableVal.tqzb.fdl }}万kwh，
		同比增长率{{ tableVal.tbzb && (tableVal.tbzb.fdl).toFixed(2) }}%；
		各项损失电量累计{{ tableVal.byzb && (tableVal.byzb.llfdl - tableVal.byzb.fdl).toFixed(2) }}万kwh、
		同比{{ tableVal.tqzb && tableVal.tqzb.llfdl - tableVal.tqzb.fdl }}万kwh，
		同比增长率{{ tableVal.tbzb && (tableVal.byzb.llfdl - tableVal.tbzb.fdl).toFixed(2) }}%；
		理论发电量{{ tableVal.byzb && tableVal.byzb.llfdl }}万kwh，
		实际发电量与理论发电量相差{{ tableVal.tbzb && tableVal.tbzb.llfdl }}万kwh。 <br />
        <!-- 月累计静风时长0.00小时， -->
        月累计待机小时{{ tableVal.byzb && tableVal.byzb.tjxs }}小时，待机占比{{ tableVal.byzb && tableVal.tqzb.tjxs }}%。
      </div>
    </div>
    <div class="mg-b-16">
      <panel :title="'损失电量分析'" :showLine="true">
        <multiple-bar-line-chart
          :height="'21.296vh'"
          :barData="bar1Data"
          :lineData="lineData"
        />
      </panel>
    </div>
    <div class="mg-b-16">
      <panel :title="'损失电量分析'" :showLine="true">
        <vertival-bar-line-chart :height="'21.296vh'" :bardata="bar2data" />
      </panel>
    </div>
    <div class="mg-b-16">
      <panel :title="'损失电量分析'" :showLine="true">
        <double-line-chart :height="'21.296vh'" :list="list" />
      </panel>
    </div>
  </div>
</template>

<script>
import Panel from "../../components/coms/panel/panel.vue";
import Table from "../../components/coms/table/table.vue";
import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
import MultipleBarLineChart from "../../components/chart/combination/multiple-bar-line-chart.vue";
import DoubleLineChart from "../../components/chart/line/double-line-chart.vue";
// import DoubleLineChart from "./double-line-chart.vue";
import Get_PDF from "@tools/htmlToPdf";
export default {
  setup() {},
  components: {
    Panel,
    Table,
    VertivalBarLineChart,
    MultipleBarLineChart,
    DoubleLineChart,
  },
  props: {
    wtId: "",
    year: "",
    month: "",
    // dialogVisible: false,
  },
  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: "静风频率（%）",
      },
      tableData2: {
        column: [
          {
            name: "指标名称",
            field: "name",
          },
          {
            name: "本月值",
            field: "byzb",
          },
          {
            name: "去年同期",
            field: "hqzb",
          },
          {
            name: "同比增长率（%）",
            field: "hbzb",
          },
          {
            name: "环比",
            field: "tqzb",
          },
          {
            name: "环比端值（%）",
            field: "tbzb",
          },
        ],
        data: [
          {
            name: "实际发电量（万kWh）",
            v1: "174785",
            v2: "317885",
            v3: "-45",
            v4: "22322",
            v5: "-36",
          },
        ],
      },
      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",
              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,
            },
          ],
        },
      ],
      lineData: {
        name: "风速",
        unit: "km",
        data: [200, 800, 400, 500, 800, 700, 800, 900, 200],
      },
      bar2data: {
        area: [
          "05-01",
          "05-01",
          "05-01",
          "05-01",
          "05-01",
          "05-01",
          "05-01",
          "05-01",
          "05-01",
        ],
        legend: [
          "限电损失电量",
          "性能未达标损失电量",
          "检修损失电量",
          "故障损失电量",
          "受累损失电量",
          "性能损失",
        ],
        data: [
          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
          [320, 302, 301, 334, 390, 330, 320, 100, 50],
          [320, 302, 301, 334, 390, 330, 320, 100, 50],
          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
          [320, 302, 301, 334, 390, 330, 320, 100, 50],
          [320, 302, 301, 334, 390, 330, 320, 100, 50],
          [1320, 1302, 901, 634, 1390, 1330, 1320, 1000, 500],
          [320, 302, 301, 334, 390, 330, 320, 100, 50],
        ],
      },
      list: [
        {
          title: "绿123线",
          smooth: false,
          value: [
            {
              text: "",
              value: 0,
            },
            {
              text: "0:00",
              value: 20,
            },
            {
              text: "10:00",
              value: 1,
            },
            {
              text: "11:00",
              value: 40,
            },
            {
              text: "12:00",
              value: 10,
            },
            {
              text: "13:00",
              value: 15,
            },
            {
              text: "14:00",
              value: 30,
            },
            {
              text: "15:00",
              value: 40,
            },
            {
              text: "",
              value: 10,
            },
          ],
        },
        {
          title: "黄线",
          smooth: false,
          value: [
            {
              text: "",
              value: 0,
            },
            {
              text: "0:00",
              value: 40,
            },
            {
              text: "10:00",
              value: 20,
            },
            {
              text: "11:00",
              value: 20,
            },
            {
              text: "12:00",
              value: 10,
            },
            {
              text: "13:00",
              value: 40,
            },
            {
              text: "14:00",
              value: 50,
            },
            {
              text: "15:00",
              value: 40,
            },
            {
              text: "",
              value: 10,
            },
          ],
        },
      ],
    };
  },
  created() {
    this.wtId = this.$route.params.wtId;
    this.year = this.$route.params.year;
    this.month = this.$route.params.month;
    this.search();
    this.searchChart();
  },
  filters: {
    tabrowfil(val) {
      return this.tabrow[val];
    },
  },
  methods: {
    //导出pdf
    exportPDF(name) {
      this.BASE.showMsg({
        type: "success",
        msg: "正在导出...请稍后...",
      });
      Get_PDF.downloadPDF(
        document.querySelector(".pdfDom"),
        this.wtId +
          "号风机" +
          this.year +
          "年" +
          this.month +
          "月运行指标性能分析"
      );
    },
    async search() {
      console.log(this.wtId, "--", this.year, "---", this.month);
      const { data } = await this.API.requestData({
        subUrl: "/singleanalysis/singleanalysisSub",
        method: "POST",
        data: {
          wtId: this.wtId,
          year: this.year,
          month: this.month,
        },
      });
      console.warn(data.data);
      const res = data.data;
      this.tableVal = data.data;
	  console.log(data.data)
      console.warn(this.tableVal);
      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];
            }
          }
        }
        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;
      console.warn(arr);
    },
    async searchChart() {
      console.log(this.wtId, "--", this.year, "---", this.month);
      const { data } = await this.API.requestData({
        subUrl: "/singleanalysis/singleanalysisChart",
        method: "POST",
        data: {
          wtId: this.wtId,
          year: this.year,
          month: this.month,
        },
      });
      console.warn(data.data);
      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 = 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 obj = {
        title: "静风时长(小时)",
        smooth: false,
        value: arrjdjf,
      };
      let obj1 = {
        title: "待机时长(小时)",
        smooth: false,
        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]);
        }
        arrwsdata.push(arr);
        arrwsarea.push(new Date(e.recorddate).formatDate("MM-dd"));
      });
      this.bar2data.area = arrwsarea;
      this.bar2data.legend = arrwslegend;
      this.bar2data.data = arrwsdata;
      console.warn(this.bar2data);
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less">
.znzhfx {
  font-size: 12px;
  height: 100%;
  overflow-y: scroll;
  .anliz-des {
    font-size: 16px;
    color: #b3bdc0;
    margin-top: 1.4993vh;
    margin-bottom: 44px;
  }
  .table-panel {
    .table-title {
      font-size: 16px;
      text-align: center;
      color: #fefefe;
      height: 4.6972vh;
      line-height: 4.6972vh;
    }
    .back {
      margin: 2.3988vh 0px 0px 0px;
    }
  }
  .com-table {
    border: 1px solid #6067697d;
  }
}
</style>