PowerAnalysis/src/pages/report/index.vue

<template>
  <div class="bg-white py-[10px] px-[10px] relative">
    <div class="mb-[20px]">
      <el-form class="" :inline="true">
        <el-form-item label="场站" class="!mb-0">
          <el-select v-model="station" clearable class="w-[150px]">
            <el-option
              v-for="item in stationList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始" class="!mb-0 ml-2">
          <el-date-picker
            v-model="val1"
            @change="BeginChange(val1)"
            type="month"
            value-format="YYYY-MM"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束" class="!mb-0">
          <el-date-picker
            v-model="value2"
            @change="EndChange(value2)"
            type="month"
            value-format="YYYY-MM"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item class="!mb-0">
          <el-button type="primary" @click="addform">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div class="mb-[20px] mt-[20px]">
    <el-table
      :data="tableData"
      stripe
      size="large"
      :border="true"
      :style="{ width: '100%' }"
    >
      <el-table-column
       
        resizable
        align="center"
        type="index"
        label="序号"
      />
      <el-table-column
       
        resizable
        align="center"
        prop="station"
        label="场站名称"
      />
      <el-table-column
        
        resizable
        align="center"
        prop="time"
        label="时间"
      />
      <el-table-column
        
        resizable
        align="center"
        prop="wtidcount"
        label="风机数量"
      />
      <el-table-column  resizable align="center" label="操作">
        <template #default="scope">
          <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >下载</el-button
          > -->
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >查看报告</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div >
  <el-dialog
    v-model="centerDialogVisible"
    title="风电场性能分析报告"
    width="50%"
    center
  >
  <div id="pdfDom">
    <!-- <h3 style="font-weight: bolder; font-size: 18px; color: black;text-aling:center">风电场性能分析报告</h3> -->
    <p>
      <span class="ml-10">场站：  {{ nbdata.name }}</span>
      <span class="ml-77">风机型号：  {{ nbdata.model }}</span>
    </p>
    <p>
      <span class="ml-10">风机数量：  {{ nbdata.quantity }}</span>
      <span class="ml-85">装机容量(MW)：  {{ nbdata.capacity }}</span>
    </p>
    <p>
      <span class="ml-10">报告生成日期：  {{ time }}</span>
      <span class="ml-72">数据分析周期：  {{ eltime }}</span>
    </p>
    <h3 style="font-weight: bolder; font-size: 18px; color: black">概述：</h3>
    <p class="ml-7">
      报告基于曲线偏差率、静态偏差对风、容量系数、停机时长、分别对场站{{ nbdata.quantity }}台风机进行了性能分析，其中有{{wtcount}}台风机指标严重异常，信息如下：
    </p>
    <h3 style="font-weight: bolder; font-size: 18px; color: black">
      1、曲线偏差率
    </h3>
    <p class="ml-7">
      曲线偏差率对不同风速区间的实际功率和保证功率做偏差率分析，高偏差率表明存在需要进一步调查潜在问题，偏差率负值表明实际功率低于保证功率
    </p>

    <el-table
      :data="curve"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        prop="section"
        align="center"
        label="风速区间"
        width="180"
      />
      <el-table-column prop="module" align="center" label="偏差率" />
      <el-table-column prop="wtidcount" align="center" label="风机数量" />
      <el-table-column prop="windturbine" align="center" label="风机编号" />
    </el-table>
    <h3 style="font-weight: bolder; font-size: 18px; color: black">
      2、静态偏航对风
    </h3>
    <p class="ml-7">
      静态偏航对风指风机的叶片与风向之间的偏差，偏差角度过大表明对风存在问题，以下为5-10m风速区间的对风误差
    </p>
    <el-table
      :data="staticwind"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        prop="section"
        align="center"
        label="严重程度"
        width="180"
      />
      <el-table-column prop="wtidcount" align="center" label="风机数量" />
      <!-- <el-table-column prop="amount1" label="风机数量" /> -->
      <el-table-column prop="windturbine" align="center" label="风机编号" />
    </el-table>
    <h3 style="font-weight: bolder; font-size: 18px; color: black">
      3、容量系数
    </h3>
    <p class="ml-7">
      容量系数是风机发电量能力的指标，数值越低，说明发电效率越低
    </p>
    <el-table
      :data="mrlxs"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        prop="section"
        align="center"
        label="容量系数"
        width="180"
      />
      <!-- <el-table-column prop="name" label="偏差率" /> -->
      <el-table-column prop="wtidcount" align="center" label="风机数量" />
      <el-table-column prop="windturbine" align="center" label="风机编号" />
    </el-table>
    <h3 style="font-weight: bolder; font-size: 18px; color: black">
      4、停机时间
    </h3>
    <p class="ml-7">
      小风速下停机时间越长反应出低风速风机切入不及时，暴风天气不停机反应出风机切出不及时
    </p>
    <el-table
      :data="stoptime"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        prop="section"
        align="center"
        label="风速区间"
        width="180"
      />

      <el-table-column prop="wtidcount" align="center" label="风机数量" />
      <el-table-column prop="remark" align="center" label="累计时间(h)" />
      <el-table-column prop="windturbine" align="center" label="风机编号" />
    </el-table>
    <!-- <h3 style="font-weight: bolder; font-size: 18px; color: black">
      5、损失电量
    </h3>
    <p class="ml-7">
      损失电量指因故障或维护等原因导致风机未能正常发电，损失电量占比越高，存在的问题越明显
    </p>
    <el-table
      :data="tableData1"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" align="center" label="损失占比" width="180" />

      <el-table-column prop="amount1" align="center" label="风机数量" />
      <el-table-column prop="amount2" align="center" label="风机编号" />
    </el-table> -->
    <h3 style="font-weight: bolder; font-size: 18px; color: black">
      结论及建议
    </h3>
    <p class="ml-7">
      综上统计周期内数据分析，{{ nbdata.name }}的{{hjwtid}}台风机出现频率最高为{{hjcount}}次。
    </p>
</div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <!-- <el-button type="primary" @click="centerDialogVisible = false">
          确定
        </el-button> -->
        <el-button @click="exportPDF" type="primary" :loading="loading">导出 PDF</el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script setup name="report">
import request from "@/api/axios.js";
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import htmlToPdf from "./fixGetPDF";
import { ref, onMounted, reactive } from "vue";

const curve = ref([]);
const mrlxs = ref([]);
const staticwind = ref([]);
const stoptime = ref([]);
const nbdata = ref({});
const loading=ref(false)

const exportPDF = () => {   
	 loading.value = true;
	 // 调用htmlToPdf工具函数
     htmlToPdf.getPdf(
          document.querySelector("#pdfDom"),
          "风电场性能分析报告"
        );
     // 定时器模拟按钮loading动画的时间
      setTimeout(() => {
        loading.value = false;
        ElMessage.success('打印成功!');
      }, 1000);
      centerDialogVisible.value=false
}

      
const centerDialogVisible = ref(false);
/**场站 */
const stationList = ref([]);
const funGetStation = async () => {
  const res = await request.get("/base/station");
  stationList.value = res.data;
};
/**查询表格数据 */
const tableData = ref();
const station = ref("");
const addform = async () => {
  const res = await request.get(
    `/report/list?station=${station.value}&st=${val1.value}&et=${value2.value}`
  );

  //    res.data.forEach((ele)=>{
  //        ele.time=ele.time.slice(0, 7);
  //    })
  tableData.value = res.data;
};

let val1 = ref();
let value2 = ref();
const BeginChange = (val) => {
  console.log(val);
  val1.value = val;
  // console.log(val);
};
const EndChange = (val) => {
  // console.log(val);
  value2.value = val;
};
let time = ref();
let eltime = ref();
let wtcount=ref()
let hjwtid=ref()
let hjcount=ref()
const handleDelete = async (index, row) => {
  time.value = row.time;
  //   console.log(index, row)
  centerDialogVisible.value = true;
  const res = await request.get(
    `/report/info?station=${row.station}&date=${row.time}`
  );
  nbdata.value = res.data.station;
  //    console.log('nb',nbdata.value);
  res.data.info.curve.forEach((ele) => {
    ele.module = "偏差率负值";
  });
//   res.data.info.stoptime.forEach((ele)=>{
//       ele.remark=ele.remark/60
//   })
  
  curve.value = res.data.info.curve;
  mrlxs.value = res.data.info.mrlxs;
  staticwind.value = res.data.info.staticwind;
  stoptime.value = res.data.info.stoptime;
  eltime.value = res.data.time;
  wtcount.value = res.data.wtcount;
  hjwtid.value = res.data.hjwtid;
  hjcount.value = res.data.hjcount;
};

const getTime1 = (val) => {
  //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
  var date = new Date();
  var year = date.getFullYear(),
    month = date.getMonth() + 1,
    day = date.getDate();
  month >= 1 && month <= 9 ? (month = "0" + month) : "";
  day >= 0 && day <= 9 ? (day = "0" + day) : "";
  var begin = year + "-" + '05';
  var end = year + "-" + month;
  if (val == 1) {
    return begin;
  } else if (val == 2) {
    return end;
  }
};
onMounted(() => {
  funGetStation();
 
  val1.value = getTime1(1);
  value2.value = getTime1(2);
   addform()
});
/**created */
funGetStation();
// onActivated(() => {
//     funQuery();
// })
</script>