bigscreenWeb/src/views/SagTraceResult_WX/components/eventStatistics/system.vue

<template>
  <!-- 配网计算 -->
  <splitpanes
    style="height: 100%"
    class="default-theme"
    id="navigation-splitpanes"
  >
    <pane :size="20">
      <PointTree
        :showSelect="false"
        @node-click="handleNodeClick"
        @init="handleNodeClick"
      ></PointTree>
    </pane>

    <pane style="background-color: rgba(44, 46, 60, 0.1)" :size="100 - size">
      <el-form :model="form" inline label-width="auto">
        <el-form-item label="用采用户">
          <el-tree-select
            v-model="form.userList"
            :data="dataTree"
            multiple
            filterable
            show-checkbox
            ref="treeRef"
            :props="defaultProps"
            node-key="id"
            size="small"
            popper-class="tree-select-popper"
            :popper-append-to-body="false"
            :default-expanded-keys="expandedKeys"
            collapse-tags
            collapse-tags-tooltip
            clearable
            class="wide-tree-select"
          />
        </el-form-item>
        <el-form-item label="谐波类型">
          <el-radio-group v-model="form.type">
            <el-radio-button label="谐波电压" size="small" value="1" />
            <el-radio-button label="谐波电流" size="small" value="0" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="谐波次数">
          <el-select
            v-model="form.index"
            filterable
            multiple
            :multiple-limit="5"
            collapse-tags
            collapse-tags-tooltip
            clearable
            placeholder="请选择次数"
            style="width: 200px"
            size="small"
          >
            <el-option
              v-for="item in 49"
              :key="item"
              :label="item + 1 + '次'"
              :value="item + 1"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="负荷数据">
          <el-select v-model="form.loadDataId" clearable filterable placeholder="请选择负荷数据" style="width: 200px"
            size="small">
            <el-option v-for="item in loadDataOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <!-- <el-button type="primary" icon="el-icon-Plus" @click="push('/admin/division/aListOfLoadData')">
                            新增
                        </el-button> -->
          <el-button type="primary" :icon="Select" @click="submit" size="small"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
      <el-tabs v-model="activeName" v-if="showTabs" style="height: 740px">
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="item"
          :label="item.label"
          :name="index"
          style="height: 100%"
        >
          <div>
            <div>
              <span style="color: #fff">时间范围</span>
              <el-date-picker
                v-model="item.time"
                class="mr10 ml10"
                type="daterange"
                start-placeholder="起始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD"
                date-format="YYYY-MM-DD"
                time-format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :disabled-date="handleDisabledDate"
                size="small"
              />
              <el-button
                type="primary"
                :icon="CaretRight"
                @click="execute(item, index)"
                size="small"
              >
                执行
              </el-button>
            </div>
            <div v-if="item.showEcahr == 1" class="harmonicButton">
              <el-form :inline="true" v-model="item.form">
                <el-form-item label="限值" v-if="item.showDynamic">
                  <el-input
                    v-model="item.form.limit"
                    placeholder="请选择限值"
                    disabled
                    style="width: 200px"
                    size="small"
                  >
                    <template #append>
                      <el-button
                        :icon="Edit"
                        :class="[code == 0 ? 'frontBox' : '']"
                        @click="setCode(0)"
                        size="small"
                      />
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="时间点一" v-if="item.showDynamic">
                  <el-input
                    v-model="item.form.time1"
                    placeholder="请选择时间点一"
                    disabled
                    style="width: 200px"
                    size="small"
                  >
                    <template #append>
                      <el-button
                        :icon="Edit"
                        :class="[code == 1 ? 'frontBox' : '']"
                        @click="setCode(1)"
                        size="small"
                      />
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="时间点二" v-if="item.showDynamic">
                  <el-input
                    v-model="item.form.time2"
                    placeholder="请选择时间点二"
                    disabled
                    style="width: 200px"
                    size="small"
                  >
                    <template #append>
                      <el-button
                        :icon="Edit"
                        :class="[code == 2 ? 'frontBox' : '']"
                        @click="setCode(2)"
                        size="small"
                      />
                    </template>
                  </el-input>
                </el-form-item>

                <el-button
                  type="primary"
                  :icon="Document"
                  @click="generateFn"
                  v-if="!item.showDynamic"
                  size="small"
                >
                  生成动态谐波责任数据
                </el-button>
                <el-button
                  type="primary"
                  :icon="Document"
                  v-else
                  @click="generateMetrics"
                  size="small"
                >
                  生成谐波责任指标
                </el-button>
              </el-form>
            </div>

            <div
              class="box"
              v-loading="loading"
              element-loading-background="#343849c7"
            >
              <MyEChart
                :options="item.options"
                v-if="item.showEcahr == 1"
                @group="group"
              />
              <el-empty
                description="时间范围内无谐波数据"
                v-if="item.showEcahr == 2"
              />
            </div>
            <!-- 生成动态谐波责任数据 -->
            <div
              class="box boxTab"
              v-loading="loading1"
              element-loading-background="#343849c7"
            >
              <MyEChart
                :options="item.dynamicOptions"
                style="flex: 1"
                v-if="item.showDynamic"
              />
              <div
                style="width: 500px"
                v-if="item.showDynamic"
                class="tableBox"
              >
                <el-table
                  :scrollbar-always-on="true"
                  ref="tableRef"
                  :data="item.dynamicData"
                  height="280px"
                  size="small"
                  :header-cell-style="{ textAlign: 'center' }"
                  border
                >
                  <el-table-column
                    prop="customerName"
                    align="center"
                    label="用户名(用户号)"
                  />
                  <el-table-column
                    prop="responsibilityData"
                    align="center"
                    label="责任数据(%)"
                    width="120"
                  >
                    <template #default="scope">
                      {{
                        Math.floor(scope.row.responsibilityData * 10000) / 10000
                      }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </pane>
  </splitpanes>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, watch } from "vue";
import "splitpanes/dist/splitpanes.css";
import { Splitpanes, Pane } from "splitpanes";
import PointTree from "@/components/tree/pointTree.vue";
import { Edit, Right } from "@element-plus/icons-vue";
import MyEChart from "@/components/echarts/MyEchart.vue";
import { timeFormat } from "@/utils/common";
import { yMethod } from "@/utils/echartMethod";
import { Select, CaretRight, Document } from "@element-plus/icons-vue";
import {
  userDataList,
  getHistoryHarmData,
  getDynamicData,
  getResponsibilityData,
  getTerminalTreeForFive,
} from "@/api/manage_wx";
import { useStore } from "vuex";

const store = useStore();
const emit = defineEmits(["setTitle", "init"]); // 打开弹窗
const visible = ref(false);
const size = ref(0);
const dotList: any = ref({});
const form: any = reactive({
  type: "1",
  index: [],
  userList: [],
});

const loadDataOptions: any = ref([]);
const code = ref(3);
const xAxisData = ref([]);
const loading = ref(false);
const loading1 = ref(false);
const tabList: any = ref([]);
const activeName = ref(0);
const xValue = ref("");
const showTabs = ref(false);

// 设置时间
const timeFrame = ref(["", ""]);

const openDialog = () => {
  visible.value = true;
};

// 添加已选择的节点ID列表
const selectedNodeIds = ref<string[]>([]);

const handleNodeClick = (data: any) => {
  if (data.level == 6) {
    dotList.value = data;
    setTimeout(() => {
      emit("setTitle", data.alias);
    }, 0);
    // 保存选择的节点ID
    if (data.id) {
      selectedNodeIds.value = [data.id];
    }
    // 如果右侧已经选择了这个节点，则从右侧选择中移除
    const selectedUserIdIndex = form.userList.indexOf(data.id);
    if (selectedUserIdIndex > -1) {
      // 创建新数组以触发视图更新
      form.userList = form.userList.filter((id: string) => id !== data.id);
    }
  }
};

// 添加一个方法来更新树节点的禁用状态
const updateTreeDataDisabledState = () => {
  if (!dataTree.value || dataTree.value.length === 0) return;

  const disableNodes = (nodes: any[]) => {
    if (!nodes || nodes.length === 0) return;

    nodes.forEach((node) => {
      // 如果节点ID在已选择列表中，则禁用
      if (selectedNodeIds.value.includes(node.id)) {
        node.disabled = true;
      } else {
        // 如果之前被禁用但现在不在选择列表中，则启用
        if (node.hasOwnProperty("disabled")) {
          node.disabled = false;
        }
      }

      // 递归处理子节点
      if (node.children && node.children.length > 0) {
        disableNodes(node.children);
      }
    });
  };

  disableNodes(dataTree.value);
};

// 监听 selectedNodeIds 的变化，更新树节点状态
watch(
  selectedNodeIds,
  () => {
    updateTreeDataDisabledState();
  },
  { deep: true }
);

// 处理日期禁用逻辑
const handleDisabledDate = (date) => {
  // 定义时间边界
  const startLimit = new Date(timeFrame.value[0]).getTime() - 86400000; //向前推1天
  const endLimit = new Date(timeFrame.value[1]).setHours(23, 59, 59, 999);

  // 如果日期不存在（选择今天时可能出现），不禁用
  if (!date) return false;

  // 禁用 2025-08-01 之前和 2025-08-31 之后的日期
  return date.getTime() < startLimit || date.getTime() > endLimit;
};
// 这是按钮变色
const setCode = (num: number) => {
  if (code.value == num) {
    return (code.value = 3);
  }
  code.value = num;
};

// 确定
const submit = () => {
  if (form.index.length == 0) {
    return ElMessage.warning("请选择谐波次数");
  }

  if (form.index.length == 0) {
    showTabs.value = false;
  } else {
    showTabs.value = true;
    let list = JSON.parse(JSON.stringify(form.index)).sort((a, b) => a - b);
    tabList.value = [];
    list.forEach((item: any) => {
      tabList.value.push({
        label: item + "次谐波",
        key: item,
        showExecute: false,
        form: {
          limit: "",
          time1: "",
          time2: "",
        },
        showEcahr: 3, //1显示echart 2显示无数据  3什么都没有
        options: {},
        dynamicOptions: {}, //动态echarts
        dynamicList: {}, //动态echarts
        showDynamic: false, //动态执行展示
      });
    });
    code.value = 3;
    activeName.value = 0;
  }
};

// 执行
const execute = async (item: any, index: number) => {
  if (item.time == undefined) {
    return ElMessage.warning("请选择时间范围");
  }
  tabList.value[activeName.value].showDynamic = false;
  loading.value = true;
  await getHistoryHarmData({
    searchBeginTime: item.time[0],
    searchEndTime: item.time[1],
    type: form.type,
    time: item.key,
    lineId: dotList.value.id,
  })
    .then((res: any) => {
      if (res.code == "A0000") {
        let [min, max] = yMethod(
          res.data.historyData.map((item: any) => item.value + 0.1)
        );
        xAxisData.value = res.data.historyData.map((item: any) => item.time);
        tabList.value[index].options = {
          title: {
            text: "",
          },
          xAxis: {
            type: "time",
            name: "时间",
            axisLabel: {
              formatter: {
                day: "{MM}-{dd}",
                month: "{MM}",
                year: "{yyyy}",
              },
            },
            // 刻度线样式
            axisTick: {
              lineStyle: {
                color: "#fff", // 刻度线白色
              },
            },

            // 轴线样式
            axisLine: {
              lineStyle: {
                color: "#fff", // 轴线白色
              },
            },
          },
          tooltip: {
            formatter(params: any) {
              xValue.value = params[0].value[0];
              let str = params[0].value[0] + "<br/>";
              for (let i = 0; i < params.length; i++) {
                str =
                  str +
                  params[i].marker +
                  params[i].seriesName +
                  "：" +
                  params[i].value[1] +
                  "<br/>";
              }

              return str;
            },
          },
          grid: {
            top: 30,
            right: 50,
          },
          legend: {
            show: false,
          },
          yAxis: {
            name: form.type == 1 ? "%" : "A",
            min: min,
            max: max,
          },
          toolbox: {
            show: false,
          },

          series: [
            {
              name: item.key + (form.type == 1 ? "次谐波电压" : "次谐波电流"),
              data: res.data.historyData.map((item: any) => [
                item.time,
                Math.floor(item.value * 10000) / 10000,
              ]),
              type: "line",
              symbol: "none",

              markLine: {
                symbol: "none", // 去除箭头
                label: {
                  show: false, // 隐藏标签
                },
                data: [
                  {
                    yAxis: "",
                  },
                  {
                    xAxis: "",
                  },
                  {
                    xAxis: "",
                  },
                ],
                // 样式配置
                lineStyle: {
                  color: "red",
                  type: "dashed", // 虚线
                },
              },
            },
          ],
        };
        tabList.value[index].showEcahr = 1; //显示echart
      } else {
        ElMessage.warning(res.message);
        tabList.value[index].showEcahr = 2;
      }
      loading.value = false;
    })
    .catch(() => {
      tabList.value[index].showEcahr = 2;
      loading.value = false;
    });
};
const resDataId = ref("");
// 生成动态谐波责任数据
const generateFn = async () => {
  if (form.userList.length == 0) {
    return ElMessage.warning("请选择用采用户");
  }
  loading1.value = true;
  await getDynamicData({
    userDataId: "123",
    lineId: dotList.value.id,
    searchBeginTime: tabList.value[activeName.value].time[0],
    searchEndTime: tabList.value[activeName.value].time[1],
    time: tabList.value[activeName.value].key,
    type: form.type,
    userList: form.userList,
    systemType: 1,
  })
    .then((res: any) => {
      if (res.code == "A0000") {
        resDataId.value = res.data.responsibilityDataIndex;
        tabList.value[activeName.value].dynamicData = res.data.responsibilities;
        let [min, max] = yMethod(
          res.data.datas.map((item: any) => item.valueDatas).flat()
        );
        let series: any[] = [];
        let time: any[] = res.data.timeDatas.map((item: any) =>
          timeFormat(item)
        );
        res.data.datas.forEach((item: any) => {
          series.push({
            name: item.customerName,
            data: item.valueDatas.map((k: any, i: number) => [
              time[i],
              Math.floor(k * 10000) / 10000,
            ]),
            type: "line",
            symbol: "none",
          });
        });

        tabList.value[activeName.value].dynamicOptions = {
          title: {
            text: "",
          },
          xAxis: {
            type: "time",
            name: "时间",
            axisLabel: {
              formatter: {
                day: "{MM}-{dd}",
                month: "{MM}",
                year: "{yyyy}",
              },
            },
            // 刻度线样式
            axisTick: {
              lineStyle: {
                color: "#fff", // 刻度线白色
              },
            },

            // 轴线样式
            axisLine: {
              lineStyle: {
                color: "#fff", // 轴线白色
              },
            },
          },
          tooltip: {
            formatter(params: any) {
              let str = params[0].value[0] + "<br/>";
              for (let i = 0; i < params.length; i++) {
                str =
                  str +
                  params[i].marker +
                  params[i].seriesName +
                  "：" +
                  params[i].value[1] +
                  "<br/>";
              }

              return str;
            },
          },
          grid: {
            top: 30,
          },
          legend: {
            show: false,
          },
          yAxis: {
            name: form.type == 1 ? "%" : "A",
            min: min,
            max: max,
          },
          toolbox: {
            show: false,
          },

          options: {
            series: series,
          },
        };

        tabList.value[activeName.value].showDynamic = true;
      } else {
        ElMessage.warning(res.message);
      }
      loading1.value = false;
    })
    .catch(() => {
      loading1.value = false;
    });
  loading1.value = false;
};

// 生成指标
const generateMetrics = async () => {
  if (tabList.value[activeName.value].form.limit == "")
    return ElMessage.warning("请选择限值!");
  if (tabList.value[activeName.value].form.time1 == "")
    return ElMessage.warning("请选择时间一!");
  if (tabList.value[activeName.value].form.time2 == "")
    return ElMessage.warning("请选择时间二!");
  loading1.value = true;
  await getResponsibilityData({
    limitEndTime: tabList.value[activeName.value].form.time2,
    limitStartTime: tabList.value[activeName.value].form.time1,
    limitValue: tabList.value[activeName.value].form.limit,
    resDataId: resDataId.value,
    time: tabList.value[activeName.value].key,
    type: form.type,
  })
    .then((res: any) => {
      if (res.code == "A0000") {
        tabList.value[activeName.value].dynamicData = res.data.responsibilities;
        let [min, max] = yMethod(
          res.data.datas.map((item: any) => item.valueDatas).flat()
        );
        let series: any[] = [];
        let time: any[] = res.data.timeDatas.map((item: any) =>
          timeFormat(item)
        );
        res.data.datas.forEach((item: any) => {
          series.push({
            name: item.customerName,
            data: item.valueDatas.map((k: any, i: number) => [
              time[i],
              Math.floor(k * 10000) / 10000,
            ]),
            type: "line",
            smooth: true,
            symbol: "none",
          });
        });

        tabList.value[activeName.value].dynamicOptions = {
          title: {
            text: "",
          },
          xAxis: {
            type: "time",
            name: "时间",
            axisLabel: {
              formatter: {
                day: "{MM}-{dd}",
                month: "{MM}",
                year: "{yyyy}",
              },
            },
          },
          tooltip: {
            formatter(params: any) {
              let str = params[0].value[0] + "<br/>";
              for (let i = 0; i < params.length; i++) {
                str =
                  str +
                  params[i].marker +
                  params[i].seriesName +
                  "：" +
                  params[i].value[1] +
                  "<br/>";
              }

              return str;
            },
          },
          grid: {
            top: 30,
          },
          legend: {
            show: false,
          },
          yAxis: {
            name: form.type == 1 ? "%" : "A",
            min: min,
            max: max,
          },
          toolbox: {
            show: false,
          },

          options: {
            series: series,
          },
        };

        tabList.value[activeName.value].showDynamic = true;
      } else {
        ElMessage.warning(res.message);
        loading1.value = false;
      }
    })
    .catch((error) => {
      loading1.value = false;
    });
  loading1.value = false;
};
// 监听echart点击
const group = (chart: any, myChartDom: any) => {
  myChartDom.addEventListener("click", function (event: any) {
    // 获取点击位置相对于图表容器的坐标
    const rect = myChartDom.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    const pointInPixel = [x, y];
    // 转换为逻辑坐标（相对于图表坐标系）
    const pointInGrid = chart.convertFromPixel({ gridIndex: 0 }, pointInPixel);
    // 计算X轴和Y轴的对应数据

    // 处理X轴数据（分类轴）

    // 处理Y轴数据（数值轴）
    let yValue = pointInGrid[1].toFixed(4);
    // xValue = timeFormat(pointInGrid[0].toFixed(0) - 0)
    if (code.value == 0) {
      tabList.value[activeName.value].form.limit = yValue;
      tabList.value[activeName.value].options.series[0].markLine.data[0].yAxis =
        yValue;
      chart.setOption(tabList.value[activeName.value].options);
    } else if (code.value == 1) {
      tabList.value[activeName.value].form.time1 = xValue.value;
      tabList.value[activeName.value].options.series[0].markLine.data[1].xAxis =
        xValue.value;
      chart.setOption(tabList.value[activeName.value].options);
    } else if (code.value == 2) {
      tabList.value[activeName.value].form.time2 = xValue.value;
      tabList.value[activeName.value].options.series[0].markLine.data[2].xAxis =
        xValue.value;
      chart.setOption(tabList.value[activeName.value].options);
    }
    // 控制台输出详细信息
    // console.log('点击事件详情:', {
    //     X轴数据: xValue,
    //     Y轴数据: yValue
    // })
  });
};

onMounted(() => {
  const dom = document.getElementById("navigation-splitpanes");
  if (dom) {
    size.value = Math.round((180 / dom.offsetHeight) * 100);
  }
  userDataList({
    pageNum: 1,
    pageSize: 10000,
    searchValue: "",
  }).then((res: any) => {
    console.log(res.data);
    loadDataOptions.value = res.data.records;
  });

  if (!dotList.value || !dotList.value.alias) {
    dotList.value = { alias: "请选择监测点位" };
  }
});

const formData = ref({
  deptIndex: store.state.deptId,
});

const dataTree = ref([]);
const expandedKeys = ref([]);

const defaultProps = {
  label: "name",
  value: "id",
  disabled: "disabled",
};

const treeRef = ref();

const loadData = () => {
  let form = JSON.parse(JSON.stringify(formData.value));
  getTerminalTreeForFive(form).then((res) => {
    console.log(res);

    res.data = [
      {
        name: "电网拓扑",
        level: -1,
        id: 0,
        children: res.data,
      },
    ];

    // 查找第一层级的最后一个子节点
    const firstLevelChildren = res.data[0].children;
    if (firstLevelChildren && firstLevelChildren.length > 0) {
      let flag = true;

      // 设置节点别名
      res.data.forEach((item: any) => {
        item.children.forEach((item2: any) => {
          item2.children.forEach((item3: any) => {
            item3.children.forEach((item4: any) => {
              item4.children.forEach((item5: any) => {
                if (item5.level == 7) {
                  item5.children.forEach((item6: any) => {
                    item6.disabled = false;
                    item6.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}>${item6.name}`;
                  });
                } else {
                  if (flag) {
                    expandedKeys.value = [item5.id];
                    treeRef.value.setCurrentKey(item5.id);
                    emit("init", item5);
                    flag = false;
                  }
                  item5.disabled = false;
                  item5.alias = `${item.name}>${item2.name}>${item3.name}>${item4.name}>${item5.name}`;
                }
              });
            });
          });
        });
      });
    }

    dataTree.value = res.data;

    // 更新禁用状态
    updateTreeDataDisabledState();
  });
};

loadData();

defineExpose({
  openDialog,
});
</script>

<style scoped lang="scss">
@use "@/assets/scss/index.scss";

.box {
  // height: calc((100vh - 190px) / 2);
  height: 300px;
}

.boxTab {
  display: flex;
}

.harmonicButton {
  height: 42px;
  margin-top: 10px;
  display: flex;
  justify-content: end;
  align-items: center;
}

:deep(.el-tabs__content) {
  height: calc(100vh - 265px);
}

:deep(.el-input-group__append, .el-input-group__prepend) {
  background-color: #ffffff00;
  padding: 0 17px;
}

:deep(.frontBox) {
  background-color: var(--el-color-primary) !important;
  color: #fff !important;
}

::v-deep(.el-tabs__item) {
  color: #fff;
}

::v-deep(.el-tabs__item.is-active) {
  color: var(--el-color-primary);
}

::v-deep(.el-tabs__nav-wrap::after) {
  color: var(--el-color-primary);
}

::v-deep(.el-tabs__active-bar) {
  color: var(--el-color-primary);
}

::v-deep(.splitpanes__splitter) {
  background-color: rgba(44, 46, 60, 0.1) !important;

  &:before {
    background-color: #fff !important;
  }

  &:after {
    background-color: #ffffff80 !important;
  }
}

::v-deep(.el-form-item) {
  margin-bottom: 0px;
}

.currentPosition {
  position: absolute;
  top: -10px;
  right: 10px;
  font-size: 14px;
  font-weight: 600;
}

// 树选择器下拉面板样式
::v-deep(.tree-select-popper) {
  .el-select-dropdown__wrap {
    width: 400px; /* 设置你想要的宽度 */
  }
}

::v-deep(.el-tag__content) {
  max-width: 90px;
}

/* 树选择器本身的宽度控制 */
::v-deep(.wide-tree-select) {
  width: 200px;
}
</style>