windLifecontrolPro/src/views/generatingCapacity/dataAnalysis/agcAnalysis/index.vue

<template>
  <div class="dataAnalysisAgcAna" :class="!theme ? 'themeDark' : 'themeLight'">
    <div class="dataAnalysisAgcAnaMain">
      <div class="main_top">
        <p class="topPsty">AGC曲线偏差分析</p>
        <search-cop @submit="funSubmit"> </search-cop>
      </div>
      <div class="main">
        <div class="tableDataMain">
          <el-tabs v-model="activeTab" style="width: 100%">
            <el-tab-pane label="图表展示" name="2">
              <div
                :style="{
                  height:
                    typeof tableHeight === 'string'
                      ? 'calc(' + tableHeight + ' + ' + paginationHeight + 'px)'
                      : tableHeight + paginationHeight + 'px',
                  width: '100%',
                }"
                class="p-[10px]"
              >
                <CurrentScatterChart
                  ref="chartRef"
                  :width="tableWidth"
                  :height="`calc( ${tableHeight} + ${paginationHeight}px - 20px)`"
                  :chartTitle="''"
                  :xAxisData="xAxisData"
                  :yAxisData="{ splitLine: { show: false } }"
                  :seriesData="seriesData"
                  :showLegend="true"
                  :brushSelected="false"
                  :dataSet="dataSet"
                  @getSelected="funChartSelect"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="表格数据" name="1">
              <table-cop
                :data="tableData"
                :loading="tableLoading"
                :column="tableColumn"
                :height="tableHeight"
                :tableId="tableShowId"
                :tableName="tableName"
              >
              </table-cop>
              <el-pagination layout="prev, pager, next" :total="50" />
            </el-tab-pane>
            <el-tab-pane
              :label="`超限测点 (${abnormalPoint.length}个)`"
              name="3"
            >
              <el-table
                :data="abnormalPoint"
                style="width: 100%"
                :max-height="tableHeight"
              >
                <el-table-column
                  prop="date"
                  label="时间"
                  width="180"
                  align="center"
                />
                <el-table-column
                  filter-class-name="currentFilter"
                  prop="name"
                  label="超限原因 (点击定位至图表位置)"
                  width="400"
                  align="center"
                  :filters="[
                    { text: '低于下限', value: '低于下限' },
                    { text: '高于上限', value: '高于上限' },
                  ]"
                  :filter-method="tableFilterMethod"
                >
                  <template #default="scoped">
                    <p style="cursor: pointer" @click="createMark(scoped.row)">
                      <span
                        :style="`color:${scoped.row.color}; margin-right: 8px;`"
                      >
                        {{ scoped.row.res }}
                      </span>
                      <el-icon
                        ><component
                          :is="scoped.row.icon"
                          :color="scoped.row.color"
                      /></el-icon>
                    </p>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="value"
                  label="测点值"
                  width="180"
                  align="center"
                />
                <el-table-column
                  prop="jud"
                  label="限值"
                  width="180"
                  align="center"
                />
              </el-table>
              <!-- <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                v-model:current-page="paginationCurrentPage"
                v-model:page-size="paginationPageSize"
                :total="paginationTotal"
                :page-sizes="[50, 100, 200, 500, 1000]"
                @size-change="paginationSizeChange"
                @current-change="paginationCurrentChange"
              /> -->
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="prepare">
import searchCop from "./components/search.vue";
import tableCop from "@/components/generatingCapacityComponent/table.vue";
import { ElMessage } from "element-plus";
import { onMounted, ref, onActivated, watch } from "vue";
import { useStore } from "vuex";
import CurrentScatterChart from "./components/current-scatter-chart.vue";
import httpRequest from "@/utils/request.js";
import dayjs from "dayjs";
import agcJson from "./agcJson.json";
import * as echarts from "echarts";
import jsonData from "./components/data.json";

const tableDataSource = ref([]);
const paginationCurrentPage = ref(1);
const paginationPageSize = ref(100);
const paginationTotal = ref(0);

const paginationSizeChange = (size) => {};

const paginationCurrentChange = (page) => {};

const tableFilterMethod = (value, row) => {
  return row.res === value;
};

/**配置参数 */
const paginationHeight = ref(10);
const tableWidth = ref(window.innerWidth - 200 + "px");
const tableHeight = ref(
  window.innerHeight - 170 - paginationHeight.value + "px"
);
const treeHeight = ref(window.innerHeight - 170 + "px"); //tree高度
const excelHeight = ref(window.innerHeight - 170 + "px"); //excel高度
/**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 httpRequest.get("/power/prepare/show", {
    params: {
      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 httpRequest.get("/power/prepare/tree");
  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;
};

const createMark = (markInfo) => {
  activeTab.value = "2";
  chartRef.value.initChart(markInfo);
};
/**submit */
const funSubmit = async (params) => {
  activeTab.value = "2";
  tableShowId.value = "";
  tableName.value = "AGC曲线分析";
  tableLoading.value = true;
  const res = await httpRequest.get("/agc/deviate", {
    params: params,
  });
  // const res = agcJson
  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));
    if (res["实发有功"].values.length > 0) {
      sfyg.push(Number(res["实发有功"].values[index].value).toFixed(2));
    }
    if (res["理论功率"].values.length > 0) {
      llgl.push(Number(res["理论功率"].values[index].value).toFixed(2));
    }
    if (res["偏差上限"].values.length > 0) {
      pcsx.push(Number(res["偏差上限"].values[index].value).toFixed(2));
    }
    if (res["偏差下限"].values.length > 0) {
      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:
        res["实发有功"].values.length > 0
          ? Number(res["实发有功"].values[index].value).toFixed(2)
          : "-",
      llgl:
        res["理论功率"].values.length > 0
          ? Number(res["理论功率"].values[index].value).toFixed(2)
          : "-",
      pcsx:
        res["偏差上限"].values.length > 0
          ? Number(res["偏差上限"].values[index].value).toFixed(2)
          : "-",
      pcxx:
        res["偏差下限"].values.length > 0
          ? 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,
      lineStyle: { color: "#67c23a" },
      large: true,
    },
    {
      name: "实发有功",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: sfyg,
      xAxisIndex: 0,
      lineStyle: { color: "rgb(242.5, 208.5, 157.5)" },
      large: true,
      markPoint: {
        symbolSize: 36,
        itemStyle: {
          color: "#f60", // 特殊颜色
        },
        emphasis: {
          itemStyle: {
            color: "#fff",
          },
        },
        blur: {
          itemStyle: {
            opacity: 1,
          },
        },
        data: [],
      },
    },
    {
      name: "理论功率",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: llgl,
      xAxisIndex: 0,
      lineStyle: { color: "#f56c6c" },
      large: true,
    },
    {
      name: "偏差上限",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: pcsx,
      xAxisIndex: 0,
      lineStyle: { color: "#64b5f6", opacity: 0 },
      symbol: "none",
      large: true,
    },
    {
      name: "偏差下限",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: pcxx,
      xAxisIndex: 0,
      lineStyle: { color: "#ffb74d", opacity: 0 },
      symbol: "none",
      large: true,
    },
  ];
  tableData.value = tableArr;
  tableLoading.value = false;
  tableShowId.value = "1";

  let abnormalPointTemp = [];
  seriesData.value[1].data.forEach((ele, index) => {
    if (parseFloat(ele) > parseFloat(seriesData.value[3].data[index])) {
      abnormalPointTemp.push({
        date: tsArr[index],
        value: parseFloat(ele),
        jud: seriesData.value[3].data[index],
        res: "高于上限",
        color: "#f25656",
        icon: "Top",
        dataIndex: index,
      });
    } else if (parseFloat(ele) < parseFloat(seriesData.value[4].data[index])) {
      abnormalPointTemp.push({
        date: tsArr[index],
        value: parseFloat(ele),
        jud: seriesData.value[4].data[index],
        res: "低于下限",
        color: "#1890ff",
        icon: "Bottom",
        dataIndex: index,
      });
    }
  });
  abnormalPoint.value = abnormalPointTemp;

  // 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()
const theme = ref(null);
const echartsTheme = ref("");
const store = useStore();
watch(
  () => store.state.theme,
  (newVal, oldVal) => {
    theme.value = newVal;
    echartsTheme.value = !newVal ? "dark" : "";
    // funSubmit();
  },
  {
    deep: true,
  }
);
const abnormalPoint = ref([]);
const initPageData = () => {
  activeTab.value = "2";
  tableShowId.value = "";
  tableName.value = "AGC曲线分析";
  tableLoading.value = true;
  const res = JSON.parse(JSON.stringify(jsonData.deviateData));
  // const res = agcJson
  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));
    if (res["实发有功"].values.length > 0) {
      sfyg.push(Number(res["实发有功"].values[index].value).toFixed(2));
    }
    if (res["理论功率"].values.length > 0) {
      llgl.push(Number(res["理论功率"].values[index].value).toFixed(2));
    }
    if (res["偏差上限"].values.length > 0) {
      pcsx.push(Number(res["偏差上限"].values[index].value).toFixed(2));
    }
    if (res["偏差下限"].values.length > 0) {
      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:
        res["实发有功"].values.length > 0
          ? Number(res["实发有功"].values[index].value).toFixed(2)
          : "-",
      llgl:
        res["理论功率"].values.length > 0
          ? Number(res["理论功率"].values[index].value).toFixed(2)
          : "-",
      pcsx:
        res["偏差上限"].values.length > 0
          ? Number(res["偏差上限"].values[index].value).toFixed(2)
          : "-",
      pcxx:
        res["偏差下限"].values.length > 0
          ? 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,
      lineStyle: { color: "#67c23a" },
      large: true,
    },
    {
      name: "实发有功",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: sfyg,
      xAxisIndex: 0,
      lineStyle: { color: "rgb(242.5, 208.5, 157.5)" },
      large: true,
      markPoint: {
        symbolSize: 36,
        itemStyle: {
          color: "#f60", // 特殊颜色
        },
        emphasis: {
          itemStyle: {
            color: "#fff",
          },
        },
        blur: {
          itemStyle: {
            opacity: 1,
          },
        },
        data: [],
      },
    },
    {
      name: "理论功率",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: llgl,
      xAxisIndex: 0,
      lineStyle: { color: "#f56c6c" },
      large: true,
    },
    {
      name: "偏差上限",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: pcsx,
      xAxisIndex: 0,
      lineStyle: { color: "#64b5f6", opacity: 0 },
      symbol: "none",
      large: true,
    },
    {
      name: "偏差下限",
      type: "line",
      symbol: "line", //设定为实心点
      symbolSize: 0, //设定实心点的大小
      smooth: false, //这个是把线变成曲线
      data: pcxx,
      xAxisIndex: 0,
      lineStyle: { color: "#ffb74d", opacity: 0 },
      symbol: "none",
      large: true,
    },
  ];
  tableData.value = tableArr;
  tableLoading.value = false;
  tableShowId.value = "1";

  let abnormalPointTemp = [];
  seriesData.value[1].data.forEach((ele, index) => {
    if (parseFloat(ele) > parseFloat(seriesData.value[3].data[index])) {
      abnormalPointTemp.push({
        date: tsArr[index],
        value: parseFloat(ele),
        jud: seriesData.value[3].data[index],
        res: "高于上限",
        color: "#f25656",
        icon: "Top",
        dataIndex: index,
      });
    } else if (parseFloat(ele) < parseFloat(seriesData.value[4].data[index])) {
      abnormalPointTemp.push({
        date: tsArr[index],
        value: parseFloat(ele),
        jud: seriesData.value[4].data[index],
        res: "低于下限",
        color: "#1890ff",
        icon: "Bottom",
        dataIndex: index,
      });
    }
  });
  abnormalPoint.value = abnormalPointTemp;
};

/**mounted */
onMounted(() => {
  initPageData();
  // funSubmit();
  theme.value = store.state.theme;
  echartsTheme.value = !theme.value ? "dark" : "";
  tableWidth.value = window.innerWidth - 200 + "px";
  tableHeight.value = window.innerHeight - 170 - paginationHeight.value + "px";
  excelHeight.value = window.innerHeight - 170 + "px";
  treeHeight.value = window.innerHeight - 170 + "px";
  window.addEventListener("resize", () => {
    tableWidth.value = window.innerWidth - 200 + "px";
    tableHeight.value =
      window.innerHeight - 170 - paginationHeight.value + "px";
    excelHeight.value = window.innerHeight - 170 + "px";
    treeHeight.value = window.innerHeight - 170 + "px";
  });
});
/**activated */
onActivated(() => {
  // funGetTree()
  // funSubmit()
});
</script>
<style lang="less" scoped>
.dataAnalysisAgcAna {
  height: 100%;

  .dataAnalysisAgcAnaMain {
    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;
      }

      .seach {
        padding: 20px 0 0 20px;
      }
    }

    .main {
      display: flex;
      justify-content: space-between;
      // width: calc(100% - 40px);
      width: 100%;

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

        .el-tabs__content,
        .el-tab-pane {
          width: 100%;
        }

        .butten_com {
          position: absolute;
          right: 20px;
          z-index: 111111;
        }
      }
    }
  }
}

.themeDark {
  .dataAnalysisAgcAnaMain {
    .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;

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

    .main {
      background: #e6e8f2;

      .treeDataMain {
        background: transparent;
      }

      .excelDataMain {
        background: #f4f6fb;
      }

      .tableDataMain {
        background: #fff;
        margin-top: 5px;
      }
    }
  }
}
</style>