fd_dwgz_zhyw_nx/src/views/rateAnalysis/index.vue

<template>
  <div class="rateAnalysis" :class="!theme ? 'themeDark' : 'themeLight'">
    <div class="rateAnalysisMain">
      <div class="main_top">
        <p class="topPsty">对风偏差分析</p>
        <div class="search-item" style="margin-left: 16px">
          <span class="label">场站：</span>
          <div class="search-content">
            <el-select
              v-model="stationId"
              style="width: 120px"
              clearable
              size="mini"
              placeholder="全部"
              popper-class="select"
              @change="getWindturbineList"
            >
              <el-option
                v-for="item in stationList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="search-item">
          <span class="label">机组：</span>
          <div class="search-content">
            <el-select
              v-model="deviceId"
              style="width: 120px"
              clearable
              size="mini"
              placeholder="全部"
              popper-class="select"
            >
              <el-option
                v-for="item in windturbineList"
                :key="item.id"
                :value="item.id"
                :label="item.aname"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search-item">
          <span class="label">日期：</span>
          <div class="search-content">
            <el-date-picker
              v-model="dateTime"
              size="mini"
              type="datetimerange"
              range-separator="-"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              start-placeholder="开始"
              end-placeholder="结束"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="main">
        <!-- <div class="treeDataMain">
          <tree-cop
            :data="treeData"
            @checkChange="funTreeCheckChange"
            :show-checkbox="false"
            :height="treeHeight"
            :currentNodeKey="currentNodeKey"
            @currentChange="funCurrentChange"
            @refresh="funGetTree"
          >
          </tree-cop>
        </div>
        <div class="excelDataMain">
          <excel-cop
            :checkIds="excelCheckIds"
            :showCheckbox="false"
            :data="excelList"
            :height="excelHeight"
            @excelChange="funExcelChange"
            @checkChange="funExcelCheckChange"
            :theme="theme"
          ></excel-cop>
        </div> -->
        <div class="tableDataMain">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="图表展示" name="1"> </el-tab-pane>
            <!-- <el-tab-pane label="风时" name="3"> </el-tab-pane> -->
            <el-tab-pane
              :label="`表格数据${
                tableData?.length ? ' (' + tableData.length + '个)' : ''
              }`"
              name="2"
              v-if="false"
            >
            </el-tab-pane>
            <el-row v-if="activeTab === '1'" :style="{ height: tableHeight }">
              <el-col
                :span="12"
                v-for="(item, index) in chartData"
                :key="item.id"
                style="height: 45%"
              >
                <el-icon
                  :style="`cursor: pointer; ${!theme ? 'color: #fff' : ''}`"
                  size="18"
                  @click="funActCop(item, 'chartCop' + (index + 1))"
                  v-if="false"
                >
                  <ZoomIn />
                </el-icon>
                <chart-cop
                  height="100%"
                  width="100%"
                  :xAxis="item.xAxis"
                  :isRadar="item.isRadar"
                  :theme="theme"
                  :echartsTheme="echartsTheme"
                  :subtext="item.subtext"
                  :title="item.title"
                  :series="item.series"
                  :count="item.count || []"
                >
                </chart-cop>
              </el-col>
              <el-col :span="12" v-if="!!lineSeries.length" style="height: 45%">
                <el-icon
                  :style="`cursor: pointer; ${!theme ? 'color: #fff' : ''}`"
                  size="18"
                  @click="
                    funActCop(
                      {
                        xAxis: linexAxis,
                        yAxis: lineyAxis,
                        series: lineSeries,
                        dataset: lineDataSet,
                      },
                      'lineChartCop'
                    )
                  "
                  v-if="false"
                >
                  <ZoomIn />
                </el-icon>
                <line-chart-cop
                  class=""
                  height="100%"
                  width="100%"
                  :xAxis="linexAxis"
                  :yAxis="lineyAxis"
                  :theme="theme"
                  :echartsTheme="echartsTheme"
                  :series="lineSeries"
                  subtext="对风偏差分析图"
                  :dataset="lineDataSet"
                ></line-chart-cop>
              </el-col>
              <el-col :span="12" v-if="!!lineSeries.length" style="height: 45%">
                <el-icon
                  :style="`cursor: pointer; ${!theme ? 'color: #fff' : ''}`"
                  size="18"
                  @click="
                    funActCop(
                      {
                        xAxis: scatterxData,
                        yAxis: scatteryData,
                        series: scatterSeries,
                      },
                      'scatterSingleChartCop'
                    )
                  "
                >
                  <ZoomIn />
                </el-icon>
                <scatter-single-chart-cop
                  class=""
                  height="95%"
                  width="100%"
                  :xAxis="scatterxData"
                  :theme="theme"
                  :echartsTheme="echartsTheme"
                  :yAxis="scatteryData"
                  :series="scatterSeries"
                  subtext="静态偏航对风分析图"
                >
                </scatter-single-chart-cop>
              </el-col>
            </el-row>
            <div v-if="activeTab === '2'" :style="{ height: tableHeight }">
              <table-cop
                class=""
                :data="tableData"
                :column="tableColumn"
                :theme="theme"
                fromTableId="4"
                :height="tableHeight"
                :tableId="tableShowId"
                :tableName="tableName"
                :tableFilePath="tableFilePath"
                style="position: relative; top: -15px"
              ></table-cop>
            </div>
            <div
              v-if="activeTab === '3'"
              :style="{ height: tableHeight, width: '100%' }"
            >
              <fsChart
                height="600px"
                width="100%"
                :xAxis="fsBarxAxis"
                :yAxis="fsBaryAxis"
                :series="fsBarSeries"
                :colors="[
                  '#22a6b3',
                  '#05bc4c',
                  '#C531C7',
                  '#4b55ae',
                  '#fa8c16',
                  '#1DA0D7',
                  '#DD5044',
                  '#1467e3',
                ]"
              >
              </fsChart>
            </div>
          </el-tabs>
        </div>
      </div>
    </div>
    <el-dialog
      custom-class="windLifeDialog"
      v-model="wtDialog"
      draggable
      title="风机功率点位"
    >
      <el-tabs v-model="wtTab">
        <el-tab-pane label="数据" name="table">
          <el-table :data="wtData" row-key="id" :max-height="550">
            <el-table-column property="wtId" align="center" label="风机" />
            <el-table-column
              property="time"
              sortable
              :width="160"
              align="center"
              label="时间"
            />
            <el-table-column
              property="speed"
              sortable
              align="center"
              label="风速(m/s)"
            />
            <el-table-column
              property="power"
              sortable
              align="center"
              label="功率(kW)"
            />
            <el-table-column
              property="rr"
              sortable
              align="center"
              label="转速"
            />
            <el-table-column
              property="filter"
              sortable
              align="center"
              label="是否有用点"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="故障" name="problem" disabled> </el-tab-pane>
        <el-tab-pane label="预警" name="warning" disabled> </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog
      custom-class="windLifeDialog"
      draggable
      width="80%"
      v-model="dialog"
      :title="actDiaTitle"
    >
      <el-form class="whitespace-nowrap" :inline="true" :model="queryForm">
        <el-form-item label="" class="!mb-0">
          <el-select
            style="width: 150px"
            v-model="queryForm.checkIds"
            clearable
            @clear="checkAll = false"
            collapse-tags
            multiple
          >
            <el-option
              label="全选"
              :class="{ selected: checkAll }"
              @click="funCheckAll"
            ></el-option>
            <el-option
              v-for="item in chartExcelList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="!mb-0">
          <submit-btn desc="查询" @click="funDiaSubmit"></submit-btn>
          <submit-btn desc="导出" @click="funDiaExport"></submit-btn>
        </el-form-item>
      </el-form>
      <div v-loading="exportLoading">
        <el-row
          ref="diaPanelRef"
          style="height: 650px; overflow-y: auto; over-x: hidden"
        >
          <el-col
            :span="actCopList.length > 1 ? 12 : 24"
            v-for="item in actCopList"
            :key="item.id"
            style="height: 650px"
          >
            <component
              :is="item.actCop"
              width="100%"
              height="100%"
              :xAxis="item.xAxis"
              :subtext="item.subtext"
              :isRadar="item.isRadar"
              :title="item.title"
              :series="item.series"
              :theme="theme"
              :echartsTheme="echartsTheme"
              :isDiaAlone="actCopList.length === 1"
              @dblclick="funDbClick(item)"
              :yAxis="item.yAxis"
              :dataset="item.dataset"
              :brush="item.isBrush"
              @getSelected="funChartSelect"
            ></component>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script setup name="rateAnalysis">
import excelCop from "@/components/generatingCapacityComponent/excel.vue";
import treeCop from "@/components/generatingCapacityComponent/tree.vue";
import tableCop from "@/components/generatingCapacityComponent/table.vue";
import chartCop from "./components/chart.vue";
import lineChartCop from "./components/lineChart.vue";
// import SubmitBtn from '../../../components/SubmitBtn.vue'
import scatterSingleChartCop from "./components/scatterSingleChart.vue";
import fsChart from "./components/barChart.vue";
// import { ElMessage } from 'element-plus';
import {
  onMounted,
  ref,
  onActivated,
  shallowRef,
  reactive,
  nextTick,
  watch,
} from "vue";
import dayjs from "dayjs";
import {
  fetchWindturbineList,
  getWpList,
} from "@/api/zhbj/index.js";

import { useStore } from "vuex";
import httpRequest from "@/utils/request.js";
import tools from "@tools/htmlToPdf.js";
import jsonData from "./components/data.json";
// import flowerRes from '@/data/flower.json'
// import lineChartRes from '@/data/lineNew.json'
/**配置参数 */
const treeHeight = ref(window.innerHeight - 116 + "px"); //tree高度
const excelHeight = ref(window.innerHeight - 116 + "px"); //excel高度
const tableHeight = ref(window.innerHeight - 170 + "px");
/**excel 开始 */
const activeTab = ref("1");
const excelCheckIds = ref([]);
const excelList = ref([]);
const tableShowId = ref("");
const tableName = ref("");
const tableFilePath = ref("");
const currentNodeKey = ref("");
//点击excel项时
const funExcelChange = async (obj) => {
  excelCheckIds.value = [obj.id]; //当为单选展示风机图表时
  tableShowId.value = obj.id;
  tableName.value = obj.code
    ? obj.code
    : obj.name.substring(0, obj.name.indexOf("_"));
  tableFilePath.value = obj.path;
  chartExcelList.value = excelList.value.map((o) => {
    return {
      ...o,
      name: o.name.split("_")[0],
    };
  }); // 选中excel当前项时, excel列表赋值给dialog 下拉框
  queryForm.checkIds = excelList.value.map((o) => o.id);
  checkAll.value = true;
  funSubmit();
  tableDataGet();
};
const funExcelCheckChange = ({ checkArr, data }) => {
  excelCheckIds.value = checkArr;
};
/**表格数据 */
const tableData = ref([]);
const tableColumn = ref([]);
const tableDataGet = async () => {
  const res = await httpRequest.get(`${process.env.VUE_APP_API}/wind/show`, {
    params: {
      id: excelCheckIds.value.join(),
    },
  });
  tableColumn.value = res.data.title.map((o) => {
    return {
      prop: o.key,
      label: o.des,
      width: o.des === "时间" ? 100 : 80,
    };
  });
  tableData.value = res.data.data;
};
/**tree 开始 */
const treeData = ref([]);
const actTreeNode = ref(null);
const funRepeatMap = (arr) => {
  return arr.map((o) => {
    if (o.children) {
      const findIndex = o.children.findIndex((p) => !!p.type);
      if (findIndex !== -1) {
        o.childs = o.children;
        o.children = [];
        if (!actTreeNode.value) {
          actTreeNode.value = o;
        }
      }
    }
    return {
      ...o,
      children: o.children.length ? funRepeatMap(o.children) : [],
    };
  });
};
const funGetTree = async () => {
  const res = await httpRequest.get(
    `${process.env.VUE_APP_ALARM}/power/process/tree`
  );
  actTreeNode.value = null;
  excelList.value = [];
  treeData.value = funRepeatMap(res.data);
  if (actTreeNode.value) {
    funCurrentChange({
      current: actTreeNode.value,
      currentNode: null,
    });
    funExcelChange({
      id: actTreeNode.value.childs[0].id,
      code: actTreeNode.value.childs[0].code,
      path: actTreeNode.value.childs[0].path,
    });
    currentNodeKey.value = actTreeNode.value?.id || "";
  }
};
const funTreeCheckChange = ({
  current,
  checkedNodes,
  checkedKeys,
  halfCheckedNodes,
  halfCheckedKeys,
}) => {
  //tree change  -> excel change
  funCurrentChange({
    current,
    currentNode: "",
  });
  const checkIds = [];
  if (checkedNodes.length) {
    for (const node of checkedNodes) {
      if (node.childs && node.childs.length) {
        for (const child of node.childs) {
          checkIds.push(child.id);
        }
      }
    }
  }
  excelCheckIds.value = checkIds;
};
const funCurrentChange = ({ current, currentNode }) => {
  if (current.childs) {
    excelList.value = current.childs.map((o) => {
      return {
        id: o.id,
        interval: o.interval,
        path: o.path,
        prepareid: o.prepareid,
        station: o.station,
        time: o.time,
        type: o.type,
        windturbine: o.windturbine,
        name: o.path.substring(
          o.path.indexOf(o.station + "_") + (o.station + "_").length
        ),
      };
    });
    if (excelList.value.length > 0) {
      funExcelChange(excelList.value[0]);
    }
  } else {
    excelList.value = [];
  }
};
/**chart */
const funText = (index) => {
  let str = "";
  switch (index) {
    case 0:
      str = "0-3";
      break;
    case 1:
      str = "3-5";
      break;
    case 2:
      str = "5-7";
      break;
    case 3:
      str = "7-9";
      break;
    case 4:
      str = "9-11";
      break;
    case 5:
      str = "11-20";
      break;
    case 6:
      str = "20-25";
      break;
    case 7:
      str = "25-∞";
      break;
  }
  return str;
};
const chartData = ref([]); //roses的chartList
let chartId = 1;

const fsBarxAxis = reactive({
  type: "category",
  data: [],
  splitLine: {
    show: false,
  },
  axisTick: {
    show: true,
  },
});

const fsBaryAxis = ref({
  type: "value",
  name: "小时",
  splitLine: {
    show: false,
  },
  axisTick: {
    show: true,
  },
});

const fsBarSeries = ref([
  {
    name: "0~3m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
  {
    name: "3~5m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
  {
    name: "5~10m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
  {
    name: "10~12m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
  {
    name: "12~25m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
]);

/**submit */
const funSubmit = async () => {
  const rosesRes = await httpRequest.get(
    `${process.env.VUE_APP_API}/winddirecton/roses?wtid=${deviceId.value}&kssj=${dateTime.value[0]}&jssj=${dateTime.value[1]}`
  );
  const lineRes = await httpRequest.get(
    `${process.env.VUE_APP_API}/winddirecton/deviation/ratio?wtid=${deviceId.value}&kssj=${dateTime.value[0]}&jssj=${dateTime.value[1]}`
  );
  // const rosesRes = flowerRes
  // const lineRes = lineChartRes
  if (rosesRes.code === 200) {
    if (rosesRes.data.length) {
      chartData.value = [];
      for (const chart of rosesRes.data) {
        chartData.value.push({
          id: chartId,
          title: "",
          subtext: "风速风向玫瑰图",
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "北",
              "",
              "东北",
              "",
              "东",
              "",
              "东南",
              "",
              "南",
              "",
              "西南",
              "",
              "西",
              "",
              "西北",
              "",
            ],
            splitLine: {
              show: true,
            },
          },
          isRadar: false,
          series: chart.roses.length
            ? chart.roses.map((o, index) => {
                return {
                  type: "bar",
                  data: o,
                  coordinateSystem: "polar",
                  name: funText(index),
                  stack: "a",
                  emphasis: {
                    focus: "series",
                  },
                };
              })
            : {
                type: "bar",
                data: chart.roses,
                coordinateSystem: "polar",
                name: "方位风速",
              },
        });
        chartId++;
        chartData.value.push({
          id: chartId,
          title: "",
          subtext: "风速风向频次玫瑰图",
          isRadar: true,
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "北",
              "",
              "东北",
              "",
              "东",
              "",
              "东南",
              "",
              "南",
              "",
              "西南",
              "",
              "西",
              "",
              "西北",
              "",
            ],
            splitLine: {
              show: true,
            },
          },
          series: chart.roses.length
            ? [
                ...chart.roses.map((o, index) => {
                  return {
                    type: "bar",
                    data: o,
                    coordinateSystem: "polar",
                    name: funText(index),
                    stack: "a",
                    emphasis: {
                      focus: "series",
                    },
                  };
                }),
                {
                  type: "radar",
                  tooltip: {
                    trigger: "item",
                  },
                  name: "对风",
                  data: [
                    {
                      value: chart.radar,
                    },
                  ],
                },
              ]
            : [],
          count: chart.count || [],
        });
        chartId++;
        scatterSeries.value[0].data = chart.frequency.data.length
          ? chart.frequency.data.map((item) => {
              return [item[1] + "", item[0] + "", (item[2] * 15).toFixed(1)];
            })
          : [];
        scatterSeries.value[0].markLine.data = [
          {
            xAxis: `${chart.frequency.avg}`,
            name: `平均偏航：${chart.frequency.avg}度`,
          },
        ];
      }

      fsBarxAxis.data = [];
      let fbs = [
        {
          name: "0~3m风速",
          type: "bar",
          stack: "a",
          data: [],
        },
        {
          name: "3~5m风速",
          type: "bar",
          stack: "a",
          data: [],
        },
        {
          name: "5~7m风速",
          type: "bar",
          stack: "a",
          data: [],
        },
        {
          name: "7~9m风速",
          type: "bar",
          stack: "a",
          data: [],
        },
        {
          name: "9~11m风速",
          type: "bar",
          stack: "a",
          data: [],
        },
        {
          name: "11~20m风速",
          type: "bar",
          stack: "a",
          data: [],
        },
        {
          name: "20~25m风速",
          type: "bar",
          stack: "a",
          data: [],
        },
      ];
      fsBarxAxis.data.push(rosesRes.data[0].wt);
      rosesRes.data[0].speeedtime.forEach((ele, index) => {
        fbs[index].data.push(ele);
      });
      fsBarSeries.value = fbs;
    }
  }
  if (lineRes.code === 200) {
    if (lineRes.data.length) {
      lineDataSet.value[0].source = lineRes.data[0].scatter.map((o) => {
        return [o.x + "", o.y];
      });
      const lineSeriseMax = Math.max(...lineRes.data[0].count);
      const lineSeriseMaxIndex = lineRes.data[0].count.indexOf(lineSeriseMax);
      lineSeries.value = [
        {
          name: "对风频次",
          type: "line",
          symbol: "line", //设定为实心点
          symbolSize: 0, //设定实心点的大小
          smooth: true, //这个是把线变成曲线
          data: lineRes.data[0].count,
          yAxisIndex: 1,
          markLine: {
            symbol: "none",
            label: {
              show: false,
            },
            lineStyle: {
              color: "#F72C5B",
              width: "3",
            },
            large: true,
            data: [
              {
                // name: `平均偏航：${chart.frequency.avg}度`,
                xAxis: lineSeriseMaxIndex,
              },
            ],
          },
        },
        {
          type: "effectScatter",
          showEffectOn: "emphasis",

          rippleEffect: {
            scale: 1,
          },
          legendHoverLink: false,
          name: "数据散点",
          symbolSize: 5,
          datasetIndex: 0,
          encode: {
            x: "x",
            y: "y",
          },
          yAxisIndex: 0,
        },
      ];
    }
  }
};
/**lineChart */
const linexAxis = ref({
  type: "category",
  data: new Array(101)
    .fill(-50)
    .map((o, index) => Number((o + index).toFixed(1))),
  splitLine: {
    show: false,
  },
  axisTick: {
    show: true,
  },
});
const lineyAxis = ref([
  {
    type: "value",
    name: "m/s",
    splitLine: {
      show: false,
    },
    axisTick: {
      show: true,
    },
  },
  {
    type: "value",
    name: "频次",
    splitLine: {
      show: false,
    },
    axisTick: {
      show: true,
    },
  },
]);
const lineSeries = ref([]);
const lineDataSet = ref([
  {
    source: [],
  },
]);
// 圈选散点触发函数
const funChartSelect = async (batch) => {
  const wDataArr = [];
  const yDataArr = [];
  let scatterls = [];
  let dataSetObj = [];
  wtData.value = [];
  if (batch.length && actCopList.value[0].dataset) {
    scatterls = batch[0].selected[1].dataIndex;
    if (scatterls.length) {
      dataSetObj = JSON.parse(actCopList.value[0].dataset);
      if (scatterls.length) {
        for (const scatterIndex of scatterls) {
          wDataArr.push(dataSetObj[0].source[scatterIndex].k);
        }
      }
      const wtRes = await httpRequest.get(
        `${process.env.VUE_APP_ALARM}/power/fitting/filter`,
        {
          params: {
            yk: yDataArr.join(","),
            wk: wDataArr.join(","),
          },
        }
      );
      if (wtRes.code === 200) {
        let id = 1;
        const tempArr = []; //用于以风机id 聚合dataArr
        if (wtRes.data.length) {
          for (const data of wtRes.data) {
            if (tempArr.length) {
              const findIndex = tempArr.findIndex((o) => o.wtId === data.wtId);
              if (findIndex !== -1) {
                if (!tempArr[findIndex].children) {
                  tempArr[findIndex].children = [];
                }
                tempArr[findIndex].children.push({
                  ...data,
                  id: id,
                  filter: data.filter === 0 ? "是" : "否",
                });
                id++;
              } else {
                tempArr.push({
                  ...data,
                  id: id,
                  filter: data.filter === 0 ? "是" : "否",
                });
                id++;
              }
            } else {
              tempArr.push({
                ...data,
                id: id,
                filter: data.filter === 0 ? "是" : "否",
              });
              id++;
            }
          }
          wtDialog.value = true;
          nextTick(() => {
            wtTab.value = "table";
            wtData.value = tempArr;
          });
        }
      }
    }
  }
};
/**scatter chart */
const scatterxData = ref([
  {
    type: "category",
    name: "度",
    data: new Array(61).fill(-30).map((o, index) => Number(o + index)),
    boundaryGap: false,
    splitLine: {
      show: true,
    },
    axisLine: {
      show: true,
    },
  },
]);
const scatteryData = ref([
  {
    type: "category",
    data: [5, 6, 7, 8, 9, 10],
    axisLine: {
      show: false,
    },
    name: "m/s",
    splitLine: {
      show: false,
    },
  },
]);
const scatterSeries = ref([
  {
    name: "对风偏航",
    type: "scatter",
    symbolSize: function (val) {
      return val[2];
    },
    data: [],
    markLine: {
      symbol: "none",
      label: {
        show: false,
      },
      lineStyle: {
        color: "#F72C5B",
        width: "3",
      },
      data: [
        {
          // yAxis: powerproductionNum.value,
        },
      ],
    },
    animationDelay: function (idx) {
      return idx * 5;
    },
  },
]);
/**dialog 数据 */
const wtDialog = ref(false);
const wtData = ref([]);
const wtTab = ref("table");
/**dialog */
const dialog = ref(false);
const actChartName = ref("");
const actDiaTitle = ref("");
const diaPanelRef = ref();
const exportLoading = ref(false);
const actCopList = ref([
  // {
  // 	xAxis: [],
  // 	subtext: '',
  // 	title: '',
  // 	isRadar: false,
  // 	series: [],
  // 	yAxis: [],
  // 	dataset: []
  // }
]);
// 作为actCopList的备份 在actCopList赋值多个时 同时赋值, 在dialog弹出时清空. 作用: 在actCopList变化时, 重新赋值原始数据
const actCopListBak = ref([]);
const checkAll = ref(true);
const queryForm = reactive({
  checkIds: [],
});
const funCheckAll = () => {
  checkAll.value = !checkAll.value;
  if (checkAll.value) {
    queryForm.checkIds = chartExcelList.value.map((o) => o.id);
  } else {
    queryForm.checkIds = [];
  }
};
const chartExcelList = ref([]); //dialog 下拉项
const funActCop = (obj, type) => {
  switch (type) {
    case "chartCop1":
      actChartName.value = "chartCop1";
      obj.actCop = shallowRef(chartCop);
      actDiaTitle.value = "风速风向玫瑰图";
      break;
    case "chartCop2":
      actChartName.value = "chartCop2";
      obj.actCop = shallowRef(chartCop);
      actDiaTitle.value = "风速风向频次玫瑰图";
      break;
    case "lineChartCop":
      actChartName.value = "lineChartCop";
      obj.actCop = shallowRef(lineChartCop);
      actDiaTitle.value = "对风偏差分析图";
      break;
    case "scatterSingleChartCop":
      actChartName.value = "scatterSingleChartCop";
      obj.actCop = shallowRef(scatterSingleChartCop);
      actDiaTitle.value = "静态偏航对风分析图";
      break;
  }
  obj.isBrush = type === "lineChartCop" ? false : false;
  obj.id = chartId;
  chartId++;
  dialog.value = true;
  actCopListBak.value = [];
  nextTick(() => {
    actCopList.value = [obj];
  });
};
const funDiaSubmit = async () => {
  let url = "";
  switch (actChartName.value) {
    case "chartCop1":
      url = "/wind/roses";
      break;
    case "chartCop2":
      url = "/wind/roses";
      break;
    case "lineChartCop":
      url = "/wind/deviation/ratio";
      break;
    case "scatterSingleChartCop":
      url = "/wind/roses";
      break;
  }
  if (url) {
    const res = await httpRequest.get(`${process.env.VUE_APP_ALARM}${url}`, {
      params: {
        ids: queryForm.checkIds.join(","),
        mode: 0,
      },
    });
    if (res.code === 200) {
      actCopList.value = [];
      actCopListBak.value = []; //清空备份
      if (res.data.length) {
        for (const chart of res.data) {
          if (actChartName.value === "chartCop1") {
            actCopList.value.push({
              id: chartId,
              isBrush: false,
              actCop: shallowRef(chartCop),
              title: chart.wt,
              subtext: "风速风向玫瑰图",
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                  "北",
                  "",
                  "东北",
                  "",
                  "东",
                  "",
                  "东南",
                  "",
                  "南",
                  "",
                  "西南",
                  "",
                  "西",
                  "",
                  "西北",
                  "",
                ],
                splitLine: {
                  show: true,
                },
              },
              isRadar: false,
              series:
                // chart.roses.length ? chart.roses.map((o, index) => {
                //     return {
                //         type: 'bar',
                //         data: o,
                //         coordinateSystem: 'polar',
                //         name: funText(index),
                //         stack: 'a',
                //         emphasis: {
                //             focus: 'series'
                //         }
                //     }
                // }) : []
                {
                  type: "bar",
                  data: chart.roses,
                  coordinateSystem: "polar",
                  name: "方位风速",
                },
            });
            chartId++;
          }
          if (actChartName.value === "chartCop2") {
            actCopList.value.push({
              id: chartId,
              isBrush: false,
              actCop: shallowRef(chartCop),
              title: chart.wt,
              subtext: "风速风向频次玫瑰图",
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                  "北",
                  "",
                  "东北",
                  "",
                  "东",
                  "",
                  "东南",
                  "",
                  "南",
                  "",
                  "西南",
                  "",
                  "西",
                  "",
                  "西北",
                  "",
                ],
                splitLine: {
                  show: true,
                },
              },
              isRadar: true,
              series: chart.roses.length
                ? [
                    ...chart.roses.map((o, index) => {
                      return {
                        type: "bar",
                        data: o,
                        coordinateSystem: "polar",
                        name: funText(index),
                        stack: "a",
                        emphasis: {
                          focus: "series",
                        },
                      };
                    }),
                    {
                      type: "radar",
                      // coordinateSystem: 'polar',
                      tooltip: {
                        trigger: "item",
                      },
                      // smooth: true,
                      // areaStyle: {},
                      name: "对风",
                      data: [
                        {
                          value: chart.radar,
                        },
                      ],
                    },
                  ]
                : [],
              count: chart.count || [],
            });
            chartId++;
          }
          if (actChartName.value === "lineChartCop") {
            actCopList.value.push({
              id: chartId,
              isBrush: false,
              actCop: shallowRef(lineChartCop),
              title: chart.wtId,
              subtext: "对风偏差分析图",
              xAxis: linexAxis.value,
              yAxis: lineyAxis.value,
              dataset: [
                {
                  source: chart.scatter.map((o) => {
                    return [o.x + "", o.y];
                  }),
                },
              ],
              isRadar: false,
              series: [
                {
                  name: "对风频次",
                  type: "line",
                  symbol: "line", //设定为实心点
                  symbolSize: 0, //设定实心点的大小
                  smooth: true, //这个是把线变成曲线
                  data: chart.count,
                  yAxisIndex: 1,
                  large: true,
                },
                {
                  type: "effectScatter",
                  showEffectOn: "emphasis",
                  large: true,
                  rippleEffect: {
                    scale: 1,
                  },
                  legendHoverLink: false,
                  name: "数据散点",
                  symbolSize: 5,
                  datasetIndex: 0,
                  encode: {
                    x: "x",
                    y: "y",
                  },
                  yAxisIndex: 0,
                },
              ],
            });
            chartId++;
          }
          if (actChartName.value === "scatterSingleChartCop") {
            actCopList.value.push({
              id: chartId,
              isBrush: false,
              actCop: shallowRef(scatterSingleChartCop),
              title: chart.wt,
              subtext: "静态偏航对风分析图",
              xAxis: scatterxData.value,
              yAxis: scatteryData.value,
              isRadar: false,
              series: [
                {
                  name: "对风偏航",
                  type: "scatter",
                  symbolSize: function (val) {
                    return val[2];
                  },
                  markLine: {
                    symbol: "none",
                    label: {
                      show: false,
                    },
                    lineStyle: {
                      color: "#F72C5B",
                      width: "3",
                    },
                    large: true,
                    data: [
                      {
                        name: `平均偏航：${chart.frequency.avg}度`,
                        xAxis: `${chart.frequency.avg}`,
                      },
                    ],
                  },
                  data: chart.frequency.data.length
                    ? chart.frequency.data.map((item) => {
                        return [
                          item[1] + "",
                          item[0] + "",
                          (item[2] * 15).toFixed(1),
                        ];
                      })
                    : [],
                  animationDelay: function (idx) {
                    return idx * 5;
                  },
                },
              ],
            });
            chartId++;
          }
        }
        actCopListBak.value = actCopList.value;
      }
    }
  }
};
const funDiaExport = () => {
  exportLoading.value = true;
  tools.scrollToPDF(diaPanelRef.value, actDiaTitle.value, () => {
    exportLoading.value = false;
  });
};
const funDbClick = (obj) => {
  if (actCopListBak.value.length > 1) {
    //判断大于1时, 才有双击放大功能
    if (actCopList.value.length === 1) {
      actCopList.value = actCopListBak.value;
    } else {
      actCopList.value = [obj];
    }
  }
};
/**created */
// funGetTree()
const theme = ref(null);
const echartsTheme = ref("");
const store = useStore();
watch(
  () => store.state.theme,
  (newVal, oldVal) => {
    theme.value = newVal;
    echartsTheme.value = !newVal ? "dark" : "";
    funGetTree();
  },
  {
    deep: true,
  }
);

const initPageData = () => {
  actTreeNode.value = null;
  excelList.value = [];
  treeData.value = funRepeatMap(JSON.parse(JSON.stringify(jsonData.treeData)));
  if (actTreeNode.value) {
    if (actTreeNode.value.childs) {
      excelList.value = actTreeNode.value.childs.map((o) => {
        return {
          id: o.id,
          interval: o.interval,
          path: o.path,
          prepareid: o.prepareid,
          station: o.station,
          time: o.time,
          type: o.type,
          windturbine: o.windturbine,
          isCheck: false,
          name: o.path.substring(
            o.path.indexOf(o.station + "_") + (o.station + "_").length
          ),
        };
      });
    } else {
      excelList.value = [];
    }

    const obj = {
      id: actTreeNode.value.childs[0].id,
      code: actTreeNode.value.childs[0].code,
      path: actTreeNode.value.childs[0].path,
    };

    excelCheckIds.value = [obj.id]; //当为单选展示风机图表时
    tableShowId.value = obj.id;
    tableName.value = obj.code;
    tableFilePath.value = obj.path;
    chartExcelList.value = excelList.value.map((o) => {
      return {
        ...o,
        name: o.name.split("_")[0],
      };
    }); // 选中excel当前项时, excel列表赋值给dialog 下拉框
    queryForm.checkIds = excelList.value.map((o) => o.id);
    checkAll.value = true;

    chartData.value = [];
    for (const chart of jsonData.rosesData) {
      let windMap = {};
      chartData.value.push({
        id: chartId,
        title: "",
        subtext: "风速风向玫瑰图",
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "北",
            "",
            "东北",
            "",
            "东",
            "",
            "东南",
            "",
            "南",
            "",
            "西南",
            "",
            "西",
            "",
            "西北",
          ],
          splitLine: {
            show: true,
          },
        },
        isRadar: false,
        series: chart.roses.length
          ? chart.roses.map((o, index) => {
              return {
                type: "bar",
                data: o,
                coordinateSystem: "polar",
                name: funText(index),
                stack: "a",
                emphasis: {
                  focus: "series",
                },
              };
            })
          : {
              type: "bar",
              data: chart.roses,
              coordinateSystem: "polar",
              name: "方位风速",
            },
      });
      chartId++;
      chartData.value.push({
        id: chartId,
        title: "",
        subtext: "风速风向频次玫瑰图",
        isRadar: true,
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "北",
            "",
            "东北",
            "",
            "东",
            "",
            "东南",
            "",
            "南",
            "",
            "西南",
            "",
            "西",
            "",
            "西北",
            "",
          ],
          splitLine: {
            show: true,
          },
        },
        series: chart.roses.length
          ? [
              ...chart.roses.map((o, index) => {
                return {
                  type: "bar",
                  data: o,
                  coordinateSystem: "polar",
                  name: funText(index),
                  stack: "a",
                  emphasis: {
                    focus: "series",
                  },
                  coordinateSystem: "polar",
                };
              }),
              {
                type: "radar",
                tooltip: {
                  trigger: "item",
                },
                name: "对风",
                data: [
                  {
                    value: chart.radar,
                  },
                ],
              },
            ]
          : [],
        count: chart.count || [],
      });
      chartId++;
      scatterSeries.value[0].data = chart.frequency.data.length
        ? chart.frequency.data.map((item) => {
            return [item[1] + "", item[0] + "", (item[2] * 15).toFixed(1)];
          })
        : [];
      scatterSeries.value[0].markLine.data = [
        {
          xAxis: `${chart.frequency.avg}`,
          name: `平均偏航：${chart.frequency.avg}度`,
        },
      ];
    }
    lineDataSet.value[0].source = jsonData.ratioData[0].scatter.map((o) => {
      return [o.x + "", o.y];
    });

    const lineSeriseMax = Math.max(...jsonData.ratioData[0].count);
    const lineSeriseMaxIndex =
      jsonData.ratioData[0].count.indexOf(lineSeriseMax);

    lineSeries.value = [
      {
        name: "对风频次",
        type: "line",
        symbol: "line", //设定为实心点
        symbolSize: 0, //设定实心点的大小
        smooth: true, //这个是把线变成曲线
        data: jsonData.ratioData[0].count,
        yAxisIndex: 1,
        markLine: {
          symbol: "none",
          label: {
            show: false,
          },
          lineStyle: {
            color: "#F72C5B",
            width: "3",
          },
          large: true,
          data: [
            {
              // name: `平均偏航：${chart.frequency.avg}度`,
              xAxis: lineSeriseMaxIndex,
            },
          ],
        },
      },
      {
        type: "effectScatter",
        showEffectOn: "emphasis",

        rippleEffect: {
          scale: 1,
        },
        legendHoverLink: false,
        name: "数据散点",
        symbolSize: 5,
        datasetIndex: 0,
        encode: {
          x: "x",
          y: "y",
        },
        yAxisIndex: 0,
      },
    ];

    tableColumn.value = jsonData.tableData.title.map((o) => {
      return {
        prop: o.key,
        label: o.des,
        width: o.des === "时间" ? 100 : 80,
      };
    });
    tableData.value = jsonData.tableData.data;

    currentNodeKey.value = actTreeNode.value?.id || "";
  }
};

// 场站列表/升压站列表
const stationId = ref("");
const stationList = ref([]);
const getStationList = async () => {
  const { data } = await getWpList("windturbine");
  stationList.value = data;
  stationId.value = data?.[0]?.id || "";
  if (stationList.value.length) {
    await getWindturbineList();
  }
};

//get 风机
const deviceId = ref("");
const windturbineList = ref([]);
const getWindturbineList = async () => {
  const { data } = await fetchWindturbineList(stationId.value);
  windturbineList.value = data;
  deviceId.value = data?.[0]?.id || "";
  funSubmit();
  // tableDataGet();
};

const dateTime = ref([]);
/**activated */
onMounted(() => {
  dateTime.value = [
    dayjs().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
    dayjs().format("YYYY-MM-DD HH:mm:ss"),
  ];
  // initPageData();
  getStationList();
  // funGetTree();
  //test
  // funSubmit()
  //
  theme.value = store.state.theme;
  echartsTheme.value = !theme.value ? "dark" : "";
  tableHeight.value = window.innerHeight - 170 + "px";
  excelHeight.value = window.innerHeight - 116 + "px";
  treeHeight.value = window.innerHeight - 116 + "px";
  window.addEventListener("resize", () => {
    tableHeight.value = window.innerHeight - 170 + "px";
    excelHeight.value = window.innerHeight - 116 + "px";
    treeHeight.value = window.innerHeight - 116 + "px";
  });
});
</script>

<style lang="less">
.rateAnalysis {
  height: 100%;

  .rateAnalysisMain {
    height: 100%;

    .main_top {
      height: 40px;
      display: flex;
      align-items: center;

      .topPsty {
        position: relative;
        top: 5px;
        padding: 7px 20px;
        font-size: 12px;
        font-weight: 600;
        margin-left: 10px;
        border-radius: 3px;
      }
    }

    .main {
      display: flex;
      width: 100%;

      .treeDataMain,
      .excelDataMain,
      .tableDataMain {
        border-radius: 10px;
      }

      .treeDataMain {
        margin-right: 10px;
        padding: 10px 0 10px 10px;
        width: calc(19% - 20px);
      }

      .excelDataMain {
        margin-right: 10px;
        padding: 10px 0 10px 10px;
        width: calc(15% - 20px);

        .excelDataMain_top {
          padding: 5px 0;
        }

        .excelDataMain_bot {
          padding: 5px 0;
        }
      }

      .tableDataMain {
        padding: 10px;
        width: calc(100% - 20px);

        .chartRowTop {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}

.themeDark {
  .rateAnalysisMain {
    .main_top {
      .topPsty {
        color: #1c99ff;
        background: #1e2126;
      }
    }

    .main {
      background: #13171e;

      .treeDataMain {
        background: transparent;
      }

      .excelDataMain {
        background: #313233;
      }

      .tableDataMain {
        margin-top: 5px;
        background: #212223;
      }
    }
  }
}

.themeLight {
  padding: 0;

  .rateAnalysisMain {
    .main_top {
      .topPsty {
        color: #2778ff;
        background: #ffffff;
      }
    }

    .main {
      background: #e6e8f2;

      .treeDataMain {
        background: transparent;
      }

      .excelDataMain {
        background: #f4f6fb;
      }

      .tableDataMain {
        background: #fff;
        margin-top: 5px;
      }
    }
  }
}
.search-item {
  display: flex;
  margin-right: 10px;
  max-width: 450px;
  align-items: center;
  .label {
    margin-right: 10px;
    text-align: right;
    white-space: nowrap;
    // width: 60px;
  }
  .search-content {
    flex: 1;
  }
}
</style>