fd_dwgz_zhyw/src/views/powerGenerating/windAnalyse/agcAnalysis/index.vue

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

/**excel 开始 */
const excelList = ref([]);
const funExcelChange = async (obj) => {
  //点击excel项时
  activeTab.value = "1";
  tableShowId.value = obj.id;
  tableName.value = obj.name;
  tableLoading.value = true;
  const res = await getPrepareExcelShow({ id: obj.id });
  if (res.code === 200) {
    tableColumn.value = res.data.title.map((o) => {
      return {
        prop: o.key,
        label: o.des,
        width: o.des === "时间" ? 100 : 80,
      };
    });
    tableData.value = res.data.data;
    tableLoading.value = false;
  } else {
    tableLoading.value = false;
  }
};
/**tree 开始 */
const treeData = ref([]);
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 = [];
      }
    }
    return {
      ...o,
      children: o.children?.length ? funRepeatMap(o.children) : [],
    };
  });
};
const funGetTree = async () => {
  const res = await getPrepareTree();
  treeData.value = funRepeatMap(res.data);
  excelList.value = [];
};
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) => {
  activeTab.value = "2";
  tableShowId.value = "";
  tableName.value = "AGC曲线分析";
  tableLoading.value = true;
  const res = await getWindAgcDeviate(params);
  tableColumn.value = [
    {
      prop: "ts",
      label: "时间",
      width: 100,
    },
    {
      prop: "ygsdxz",
      label: "有功设定限值",
      width: 80,
    },
    {
      prop: "sfyg",
      label: "实发有功",
      width: 80,
    },
    {
      prop: "llgl",
      label: "理论功率",
      width: 80,
    },
    {
      prop: "pcsx",
      label: "偏差上限",
      width: 80,
    },
    {
      prop: "pcxx",
      label: "偏差下限",
      width: 100,
    },
  ];
  const tableArr = [];
  const tsArr = [];
  const ygsdxz = [];
  const sfyg = [];
  const llgl = [];
  const pcsx = [];
  const pcxx = [];
  res["有功设定限值"].values.map((o, index) => {
    tsArr.push(dayjs(o.ts).format("YYYY-MM-DD HH:mm:ss"));
    ygsdxz.push(Number(o.value).toFixed(2));
    sfyg.push(Number(res["实发有功"].values[index].value).toFixed(2));
    llgl.push(Number(res["理论功率"].values[index].value).toFixed(2));
    pcsx.push(Number(res["偏差上限"].values[index].value).toFixed(2));
    pcxx.push(Number(res["偏差下限"].values[index].value).toFixed(2));
    tableArr.push({
      ts: dayjs(o.ts).format("YYYY-MM-DD HH:mm:ss"),
      ygsdxz: Number(o.value).toFixed(2),
      sfyg: Number(res["实发有功"].values[index].value).toFixed(2),
      llgl: Number(res["理论功率"].values[index].value).toFixed(2),
      pcsx: Number(res["偏差上限"].values[index].value).toFixed(2),
      pcxx: Number(res["偏差下限"].values[index].value).toFixed(2),
    });
  });
  xAxisData.value = tableArr.map((o) => o.ts);
  seriesData.value = [
    {
      name: "有功设定限值",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: ygsdxz,
      xAxisIndex: 0,
    },
    {
      name: "实发有功",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: sfyg,
      xAxisIndex: 0,
    },
    {
      name: "理论功率",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: llgl,
      xAxisIndex: 0,
    },
    {
      name: "偏差上限",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: pcsx,
      xAxisIndex: 0,
      lineStyle: {
        opacity: 0,
      },
      areaStyle: {
        color: "#ccc",
      },
      symbol: "none",
    },
    {
      name: "偏差下限",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: pcxx,
      xAxisIndex: 0,
      lineStyle: {
        opacity: 0,
      },
      areaStyle: {
        color: "#fff",
        opacity: 1,
      },
      symbol: "none",
    },
  ];
  tableData.value = tableArr;
  tableLoading.value = false;
  tableShowId.value = "1";

  // if (res.code === 200) {
  // if(res.data.sjgl?.length){
  // 	for(const wtObj of res.data.sjgl){
  // 		seriesData.value.push(
  // 			{
  // 				name: wtObj.obj.windturbine + "\n实际功率",
  // 				type: "line",
  // 				symbol: "line", //设定为实心点
  // 				symbolSize: 0, //设定实心点的大小
  // 				smooth: true, //这个是把线变成曲线
  // 				data: wtObj.sjgl || [],
  // 				xAxisIndex: 0,
  // 			},
  // 		)
  // 		wtData.value.push(wtObj.obj)
  // 	}
  // }
  // }
};
/**created */
funGetTree();
/**mounted */

/**activated */
onActivated(() => {
  // funGetTree()
  // funSubmit()
});
</script>
<template>
  <div class="container-wrapper">
    <search-cop @submit="funSubmit"> </search-cop>
    <div class="power-data-wrapper card-shadow wrapper">
      <div class="card-title">数据展示</div>
      <div class="data-wrapper">
        <div class="data-table-wrapper card-shadow">
          <el-tabs v-model="activeTab" class="data-table-tabs">
            <el-tab-pane label="表格数据" name="1"> </el-tab-pane>
            <el-tab-pane label="图表展示" name="2"> </el-tab-pane>
            <table-cop
              v-show="activeTab === '1'"
              :data="tableData"
              :loading="tableLoading"
              :column="tableColumn"
              :showShadow="false"
              :tableId="tableShowId"
              :tableName="tableName"
            ></table-cop>
            <div v-show="activeTab === '2'" class="data-chart-wrapper">
              <CurrentScatterChart
                ref="chartRef"
                width="100%"
                height="100%"
                :chartTitle="''"
                :xAxisData="xAxisData"
                :yAxisData="{ splitLine: { show: false } }"
                :seriesData="seriesData"
                :showLegend="true"
                :brushSelected="false"
                :dataSet="dataSet"
                @getSelected="funChartSelect"
              />
            </div>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.container-wrapper .power-data-wrapper .data-wrapper .data-table-wrapper {
  width: 100%;
}
.el-tabs ::v-deep {
  height: 100%;
  .el-tabs__item {
    color: #b3b3b3;
    padding: 0 12px;
  }
  .el-tabs__nav-wrap::after {
    background-color: #14221f;
  }
  .el-tabs__active-bar {
    background-color: #05bb4c;
  }
  .el-tabs__item.is-active,
  .el-tabs__item:hover {
    color: #05bb4c;
  }
  .el-tabs__content {
    height: calc(100% - 45px);
    .table-wrapper {
      width: 100%;
    }
    .data-chart-wrapper {
      width: 100%;
      height: 100%;
    }
  }
}
</style>