jn_sis_zhfx/src/views/powerGenerating/windAnalyse/angleAnalysis/index.vue

<script setup name="angleAnalysis">
import searchCop from "./components/search.vue";
import excelCop from "@/components/excel.vue";
import treeCop from "@/components/tree.vue";
import { ElMessage } from "element-plus";
import {
  getWindBladeAngle,
  getPrepareTree,
} from "@/api/powerGenerating/index.js";
import { onMounted, ref, onActivated } from "vue";
import CurrentScatterChart from "./components/current-scatter-chart.vue";
import dayjs from "dayjs";

/**excel 开始 */
const excelList = ref([]);
const funExcelChange = async (obj) => {
  //点击excel项时
  funSubmit({ ids: obj.id });
};
/**tree 开始 */
const treeData = ref([]);
const actTreeNode = ref(null); //当前激活的treeNode
const funRepeatMap = (arr, type) => {
  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 && type === "prepare") {
          //判断当且仅有process获取tree时 赋值
          actTreeNode.value = o;
        }
      }
    }
    return {
      ...o,
      children: o.children?.length ? funRepeatMap(o.children, type) : [],
    };
  });
};
const funGetTree = async () => {
  const res = await getPrepareTree();
  treeData.value = funRepeatMap(res.data, "prepare");
  excelList.value = [];
  if (actTreeNode.value) {
    funCurrentChange({ current: actTreeNode.value, currentNode: null });
    const child = actTreeNode.value.childs[0];
    const obj = {
      id: child.id,
      interval: child.interval,
      path: child.path,
      prepareid: child.prepareid,
      station: child.station,
      time: child.time,
      type: child.type,
      windturbine: child.windturbine,
      name: child.path.substring(
        child.path.indexOf(child.station + "_") + (child.station + "_").length
      ),
    };
    funExcelChange(obj);
  }
};
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
        ),
      };
    });
  } else {
    excelList.value = [];
  }
};
/**table 开始 */
const tableShowId = ref("");
const tableName = ref("");
const tableColumn = ref([]);
const tableLoading = ref(false);
const tableData = ref([]);
/**tab  */
const activeTab = ref("1");
/**chart Data */
const xAxisData = ref([]);
const chartRef = ref(); //chart 的ref
const seriesData = ref([]);
const dataSet = ref("");
const funChartSelect = async (batch) => {
  return false;
};
/**submit */
const funSubmit = async (params) => {
  const res = await getWindBladeAngle(params);
  if (res.code !== 200) {
    return false;
  }

  let exTime = [];
  let yp1 = [],
    yp2 = [];
  res.data.bw.forEach((it) => {
    exTime.push(it.time);
    yp1.push(it.value);
  });
  res.data.tj.forEach((it) => {
    yp2.push(it.value);
  });
  xAxisData.value = exTime;

  //const tsArr = res.data.time
  //let yp1 = [], yp2 = [], yp3 = []
  //res.data.angle.forEach(val => {
  //	yp1 = val.yp1
  //	yp2 = val.yp2
  //	yp3 = val.yp3
  //});
  //xAxisData.value = tsArr
  //            seriesData.value = [
  //            {
  //                name: "叶片一",
  //                        type: "line",
  //                    symbol: "line", //设定为实心点
  //                    symbolSize: 0, //设定实心点的大小
  //                    smooth: false, //这个是把线变成曲线
  //                    data: yp1,
  //                    xAxisIndex: 0,
  //            },
  //            {
  //                name: "叶片二",
  //                        type: "line",
  //                    symbol: "line", //设定为实心点
  //                    symbolSize: 0, //设定实心点的大小
  //                    smooth: false, //这个是把线变成曲线
  //                    data: yp2,
  //                    xAxisIndex: 0,
  //            },
  //            {
  //                name: "叶片三",
  //                        type: "line",
  //                    symbol: "line", //设定为实心点
  //                    symbolSize: 0, //设定实心点的大小
  //                    smooth: false, //这个是把线变成曲线
  //                    data: yp3,
  //                    xAxisIndex: 0,
  //            },
  //	]
  seriesData.value = [
    {
      name: "并网",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: yp1,
      xAxisIndex: 0,
    },
    {
      name: "停机",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: yp2,
      xAxisIndex: 0,
    },
  ];
};
/**created */
funGetTree()
/**mounted */

/**activated */
onActivated(() => {
  funGetTree();
  // funSubmit()
});
</script>
<template>
  <div class="container-wrapper">
    <div class="power-data-wrapper card-shadow wrapper">
      <div class="card-title">数据展示</div>
      <div class="data-wrapper">
        <tree-cop
          :data="treeData"
          @currentChange="funCurrentChange"
          @refresh="funGetTree"
        />
        <excel-cop :data="excelList" @excelChange="funExcelChange" />
        <div class="data-table-wrapper card-shadow">
          <div class="data-table-chart">
            <CurrentScatterChart
              ref="chartRef"
              width="100%"
              :height="`calc( ${tableHeight})`"
              :chartTitle="''"
              :xAxisData="xAxisData"
              :yAxisData="{ splitLine: { show: false } }"
              :seriesData="seriesData"
              :showLegend="true"
              :brushSelected="false"
              :dataSet="dataSet"
              @getSelected="funChartSelect"
            />
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<style lang="less" scoped>
.power-data-wrapper {
  height: 100%;
  margin-top: 0;
}
.data-table-wrapper {
  width: calc(62% - 40px) !important;
}
</style>