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

<template>
  <div class="dataAnalysisWindAna" :class="!theme ? 'themeDark' : 'themeLight'">
    <div class="dataAnalysisWindAnaMain">
      <div class="main_top">
        <p class="topPsty">损失电量分析</p>
      </div>
      <div class="main">
        <div class="treeDataMain">
          <tree-cop
            ref="treeCopRef"
            :data="treeData"
            @checkChange="funTreeCheckChange"
            :show-checkbox="true"
            :height="treeHeight"
            @currentChange="funCurrentChange"
            @refresh="funGetTree"
          ></tree-cop>
        </div>
        <div class="excelDataMain">
          <excel-cop
            :checkIds="excelCheckIds"
            :showCheckbox="excelCheckboxShow"
            :data="excelList"
            :theme="theme"
            :height="excelHeight"
            @excelChange="funExcelChange"
            @checkChange="funExcelCheckChange"
          >
          </excel-cop>
        </div>
        <div class="tableDataMain">
          <div class="px-[10px] shadow rounded-[6px] shadow-blue-500">
            <el-tabs v-model="activeTab">
              <el-tab-pane label="图表展示" name="1"> </el-tab-pane>
              <el-tab-pane label="表格数据" name="2"> </el-tab-pane>
              <table-cop
                class=""
                v-show="activeTab === '2'"
                :data="tableData"
                :showSummary="true"
                :summaryMethod="funSummary"
                :column="tableColumn"
                :loading="tableLoading"
                :theme="theme"
                :height="tableHeight"
                :tableId="tableShowId"
                :tableName="tableName"
              ></table-cop>
              <div
                v-show="activeTab === '1'"
                :style="{
                  height:
                    typeof tableHeight === 'string'
                      ? tableHeight
                      : tableHeight + 'px',
                }"
                class="p-[10px]"
              >
                <bar-line-chart-cop
                  v-show="lineData.length"
                  :height="tableHeight"
                  :bardata="barData"
                  :lineData="lineData"
                  :color="barColor"
                  lineName="理论发电量"
                ></bar-line-chart-cop>
                <el-empty
                  v-show="!lineData.length"
                  description="请选择条件"
                ></el-empty>
              </div>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="prepare">
import tableCop from "@/components/generatingCapacityComponent/table.vue";
import excelCop from "@/components/generatingCapacityComponent/excel.vue";
import treeCop from "@/components/generatingCapacityComponent/tree.vue";
import barLineChartCop from "./components/barLineChart.vue";
import { ElMessage } from "element-plus";
import { onMounted, ref, onActivated, watch } from "vue";
import { useStore } from "vuex";
import httpRequest from "@/utils/request.js";
import jsonData from "./components/data.json";
/**配置参数 */
const treeHeight = ref(window.innerHeight - 111 + "px"); //tree高度
const excelHeight = ref(window.innerHeight - 111 + "px"); //excel高度
const tableHeight = ref(window.innerHeight - 175 + "px");
/**table 开始 */
const tableShowId = ref("");
const tableName = ref("损失电量分析");
const tableColumn = ref([]);
const tableLoading = ref(false);
const tableData = ref([]);
const funSummary = ({ columns, data }) => {
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "合计";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!Number.isNaN(value)) {
          return Number((prev + curr).toFixed(2));
        } else {
          return Number(prev.toFixed(2));
        }
      }, 0);
    } else {
      sums[index] = "--";
    }
    if (["speed", "fnlly"].includes(column.property)) {
      if (!Number.isNaN(sums[index])) {
        sums[index] = Number((sums[index] / data.length).toFixed(2));
      }
    }
  });

  return sums;
};
const funSubmit = async () => {
  if (!excelCheckIds.value.length) {
    ElMessage.error("请勾选要展现的项");
    return false;
  }
  tableLoading.value = true;
  tableData.value = [];
  tableShowId.value = "";
  barData.value = {
    area: [],
    legend: [],
    data: [],
  };
  lineData.value = [];
  const res = await httpRequest.get("/fjjxb/five/loss/cal", {
    params: {
      ids: excelCheckIds.value.join(),
    },
  });
  if (res.code !== 200 || !res.data.title) {
    tableLoading.value = false;
    return false;
  }
  ElMessage.success(res.msg);
  tableColumn.value = res.data.title.map((o) => {
    return {
      prop: o.key,
      label: o.des,
      width: o.des === "时间" ? 100 : 80,
    };
  });
  tableData.value = res.data.data;

  const name = [],
    data = [],
    llfdl = [],
    legend = [
      {
        name: "实际电量",
        icon: "rect",
      },
      {
        name: "计划检修损失",
        icon: "rect",
      },
      {
        name: "非计划检修损失",
        icon: "rect",
      },
      {
        name: "限电损失",
        icon: "rect",
      },
      {
        name: "受累损失",
        icon: "rect",
      },
      {
        name: "性能损失",
        icon: "rect",
      },
      {
        name: "理论发电量",
        icon: "circle",
      },
    ],
    // legend = [
    //     "实际电量",
    //     "计划检修损失",
    //     "非计划检修损失",
    //     "限电损失",
    //     "受累损失",
    //     "性能损失",
    //     "理论发电量"
    // ],
    data2 = []; //项目列表

  // if (params.station) {
  // 	let arr = [];
  // 	let hj = res.data.data.pop();
  // 	res.data.data.forEach((ele, index) => {
  // 		arr[ele.id.split('_')[1] - 1] = ele
  // 	})
  // 	arr.push(hj);
  // 	res.data.data = arr;
  // }

  res.data.data.forEach((item, index) => {
    name.push(item.name);
    data.push([item.sjfdl, item.jhjx, item.fjhjx, item.xd, item.sl, item.xn]);
    llfdl.push(item.llfdl);
    data2.push({
      index: index + 1,
      name: item.name,
      llfdl: item.llfdl,
      sjfdl: item.sjfdl,
      speed: item.speed,
      fjhjx: item.fjhjx,
      jhjx: item.jhjx,
      sl: item.sl,
      xd: item.xd,
      xn: item.xn,
      fnlly: item.fnlly,
      is_light: false,
    });
  });
  if (data.length > 0) {
    let arr1 = [];
    const length = data[0].length;
    for (var i = 0; i < length; i++) {
      let arr2 = [];
      data.forEach((ele) => {
        arr2.push(ele[i]);
      });
      arr1.push(arr2);
    }
    lineData.value = llfdl;
    barData.value = {
      area: name,
      legend: legend,
      data: arr1,
    };
  }

  tableLoading.value = false;
  tableShowId.value = "1";
  activeTab.value = "1";
};
/**barlineChart 开始 */
const barData = ref({
  area: [],
  legend: [],
  data: [],
});
const lineData = ref([]);
const barColor = [
  "#4b55ae",
  "#e17e23",
  "#ba3237",
  "#c531c7",
  "rgb(63,177,227)",
  "#05bb4c",
];

/**tabs */
const activeTab = ref("1");
/**excel 开始 */
const excelCheckboxShow = ref(false);
const excelType = ref("");
const treeCopRef = ref(); //treeCop ref
const excelCheckIds = ref([]);
const excelList = ref([]);
const funExcelChange = async (obj) => {
  //点击excel项时
  return false;
};
const funExcelCheckChange = ({ checkArr, data }) => {
  //bug
  excelCheckIds.value = checkArr;
  funSubmit();
};

/**prepare tree 开始 */
const treeData = ref([]);
const actTreeNode = ref(null); //当前激活的treeNode
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) {
          //判断当且仅有process获取tree时 赋值
          actTreeNode.value = o;
        }
      }
    }
    return {
      ...o,
      children: o.children ? funRepeatMap(o.children) : [],
    };
  });
};
const funGetTree = async () => {
  actTreeNode.value = null;
  const res = await httpRequest.get("/power/prepare/tree");
  treeData.value = funRepeatMap(res.data);
  excelList.value = [];
  if (actTreeNode.value) {
    funCurrentChange({
      current: actTreeNode.value,
      currentNode: null,
    });
    if (treeCopRef.value) {
      treeCopRef.value.$refs.tree.setCheckedKeys([actTreeNode.value.id]);
      excelCheckIds.value = actTreeNode.value.childs.map((o) => o.id);
      funSubmit();
    }
  }
};
const funCurrentChange = ({ current, currentNode }) => {
  excelCheckboxShow.value = true;
  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 = [];
  }
};
const funTreeCheckChange = ({
  current,
  checkedNodes,
  checkedKeys,
  halfCheckedNodes,
  halfCheckedKeys,
}) => {
  //tree change  -> excel change
  funCurrentChange({
    current,
    currentNode: "",
  });
  const checkIds = [];
  if (checkedNodes.checkedNodes.length) {
    let checkArr = checkedNodes.checkedNodes;
    checkArr.forEach((it) => {
      if (it.childs && it.childs.length) {
        it.childs.forEach((iv) => {
          checkIds.push(iv.id);
        });
      }
    });
  }
  excelCheckIds.value = checkIds;
  funSubmit();
};
/**created */
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;
  treeData.value = funRepeatMap(JSON.parse(JSON.stringify(jsonData.treeData)));
  excelList.value = [];
  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 = [];
    }

    if (treeCopRef.value) {
      treeCopRef.value.$refs.tree.setCheckedKeys([actTreeNode.value.id]);
      excelCheckIds.value = actTreeNode.value.childs.map((o) => o.id);

      tableLoading.value = true;
      tableData.value = [];
      tableShowId.value = "";
      barData.value = {
        area: [],
        legend: [],
        data: [],
      };
      lineData.value = [];
      tableColumn.value = jsonData.tableData.title.map((o) => {
        return {
          prop: o.key,
          label: o.des,
          width: o.des === "时间" ? 100 : 80,
        };
      });
      tableData.value = jsonData.tableData.data;

      const name = [],
        data = [],
        llfdl = [],
        legend = [
          {
            name: "实际电量",
            icon: "rect",
          },
          {
            name: "计划检修损失",
            icon: "rect",
          },
          {
            name: "非计划检修损失",
            icon: "rect",
          },
          {
            name: "限电损失",
            icon: "rect",
          },
          {
            name: "受累损失",
            icon: "rect",
          },
          {
            name: "性能损失",
            icon: "rect",
          },
          {
            name: "理论发电量",
            icon: "circle",
          },
        ],
        data2 = []; //项目列表

      jsonData.tableData.data.forEach((item, index) => {
        name.push(item.name);
        data.push([
          item.sjfdl,
          item.jhjx,
          item.fjhjx,
          item.xd,
          item.sl,
          item.xn,
        ]);
        llfdl.push(item.llfdl);
        data2.push({
          index: index + 1,
          name: item.name,
          llfdl: item.llfdl,
          sjfdl: item.sjfdl,
          speed: item.speed,
          fjhjx: item.fjhjx,
          jhjx: item.jhjx,
          sl: item.sl,
          xd: item.xd,
          xn: item.xn,
          fnlly: item.fnlly,
          is_light: false,
        });
      });
      if (data.length > 0) {
        let arr1 = [];
        const length = data[0].length;
        for (var i = 0; i < length; i++) {
          let arr2 = [];
          data.forEach((ele) => {
            arr2.push(ele[i]);
          });
          arr1.push(arr2);
        }
        lineData.value = llfdl;
        barData.value = {
          area: name,
          legend: legend,
          data: arr1,
        };
      }

      tableLoading.value = false;
      tableShowId.value = "1";
      activeTab.value = "1";
    }
  }
};
/**mounted */
onMounted(() => {
  initPageData();
  funGetTree();
  theme.value = store.state.theme;
  echartsTheme.value = !theme.value ? "dark" : "";
  tableHeight.value = window.innerHeight - 175 + "px";
  excelHeight.value = window.innerHeight - 111 + "px";
  treeHeight.value = window.innerHeight - 111 + "px";
  window.addEventListener("resize", () => {
    tableHeight.value = window.innerHeight - 175 + "px";
    excelHeight.value = window.innerHeight - 111 + "px";
    treeHeight.value = window.innerHeight - 111 + "px";
  });
});
/**activated */
onActivated(() => {
  // funGetTree()
});
</script>
<style lang="less" scoped>
.dataAnalysisWindAna {
  height: 100%;

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

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

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

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

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

    .main {
      background: #e6e8f2;

      .treeDataMain {
        background: transparent;
      }

      .excelDataMain {
        background: #f4f6fb;
      }

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