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

<template>
  <div class="dataAnalysisLineAna" :class="!theme ? 'themeDark' : 'themeLight'">
    <div class="dataAnalysisLineAnaMain">
      <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">
            <SubmitBtn
              class="absolute right-[196px] top-[6px] z-10"
              desc="区域划分"
              @click="funChartArea"
            >
            </SubmitBtn>
            <SubmitBtn
              class="absolute right-[106px] top-[6px] z-10"
              desc="时间占比"
              @click="funTimeArea"
            >
            </SubmitBtn>
            <SubmitBtn
              class="absolute right-[16px] top-[6px] z-10"
              desc="额定功率"
              @click="funPower"
            >
            </SubmitBtn>
            <div
              :style="{
                height:
                  typeof tableHeight === 'string'
                    ? tableHeight
                    : tableHeight + 'px',
                overflow: 'hidden',
              }"
              class="p-[10px]"
            >
              <CurrentScatterChart
                ref="chartRef"
                width="100%"
                :height="`calc( ${tableHeight} - 40px )`"
                chartTitle=""
                :xAxisData="xAxisData"
                :yAxisData="{ splitLine: { show: false } }"
                :seriesData="seriesData"
                :showLegend="true"
                :brushSelected="!isChartArea"
                :dataSet="dataSet"
                @getSelected="funChartSelect"
                :theme="theme"
                :echartsTheme="echartsTheme"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      custom-class="windLifeDialog"
      draggable
      width="1000px"
      v-model="tmDialog"
      title="时间占比"
    >
      <el-tabs v-model="activeTab">
        <el-tab-pane label="运行时间" name="1"> </el-tab-pane>
        <el-tab-pane label="不运行时间" name="2"></el-tab-pane>
        <div v-if="activeTab === '1'">
          <bar-chart-cop
            height="600px"
            width="100%"
            :xAxis="barxAxis"
            :yAxis="baryAxis"
            :series="barSeries"
          >
          </bar-chart-cop>
        </div>
        <div v-if="activeTab === '2'">
            <!-- :colors="[color: ["#05bb4c", "#C531C7", "#4b55ae", "#fa8c16", "#1DA0D7", "#DD5044"],
              'rgb(222,132,82)',
              'rgb(105,188,80)',
              'rgb(197,78,82)',
              'rgb(129,114,181)',
            ]" -->
          <bar-chart-cop
            height="600px"
            :colors="['#05bb4c', '#C531C7', '#4b55ae', '#fa8c16', '#1DA0D7', '#DD5044', '#323E6F']"
            width="100%"
            :xAxis="barxAxis"
            :yAxis="baryAxis"
            :series="barUnWorkSeries"
          ></bar-chart-cop>
        </div>
      </el-tabs>
    </el-dialog>
    <el-dialog
      custom-class="windLifeDialog"
      draggable
      width="1000px"
      v-model="powerDialog"
      title="额定功率"
    >
      <bar-chart-cop
        height="350px"
        :colors="[]"
        width="100%"
        :xAxis="powerxAxis"
        :yAxis="countyAxis"
        :theme="theme"
        :echartsTheme="echartsTheme"
        :series="countSeries"
      ></bar-chart-cop>
      <bar-chart-cop
        height="350px"
        :colors="[]"
        width="100%"
        :xAxis="powerxAxis"
        :yAxis="poweryAxis"
        :theme="theme"
        :echartsTheme="echartsTheme"
        :series="powerSeries"
      ></bar-chart-cop>
    </el-dialog>
    <el-dialog
      custom-class="windLifeDialog warn-table"
      draggable
      v-model="wtDialog"
      title="曲线偏差率"
    >
      <el-table :data="wtData" row-key="id" :max-height="600">
        <el-table-column property="code" align="center" label="风机" />
        <el-table-column
          property="pc5ratio"
          sortable
          align="center"
          label="3~5m"
        />
        <el-table-column
          property="pc7ratio"
          sortable
          align="center"
          label="5~7m"
        />
        <el-table-column
          property="pc9ratio"
          sortable
          align="center"
          label="7~9m"
        />
        <el-table-column
          property="pc11ratio"
          sortable
          align="center"
          label="9~11m"
        />
        <el-table-column
          property="pc20ratio"
          sortable
          align="center"
          label="11~20m"
        />
        <el-table-column
          property="pc25ratio"
          sortable
          align="center"
          label="20~25m"
        />
        <el-table-column
          property="pcratio"
          sortable
          align="center"
          label="3~25m"
        />
      </el-table>
    </el-dialog>
  </div>
</template>
<script setup name="prepare">
import excelCop from "@/components/generatingCapacityComponent/excel.vue";
import treeCop from "@/components/generatingCapacityComponent/tree.vue";
import barChartCop from "./components/barChart.vue";
import SubmitBtn from "@/components/generatingCapacityComponent/SubmitBtn.vue";
import { ref, nextTick, onActivated, onMounted, reactive, watch } from "vue";
import { useStore } from "vuex";
import httpRequest from "@/utils/request.js";
import { ElMessage } from "element-plus";
import util from "@tools/util";
import CurrentScatterChart from "./components/current-scatter-chart.vue";
import jsonData from "./components/data.json";
// import dotRes from '@/data/dot.json'
// import tableRes from '@/data/table.json'
// import areaDataRes from '@/data/areaData.json'
/**配置参数 */
const treeHeight = ref(window.innerHeight - 140 + "px"); //tree高度
const excelHeight = ref(window.innerHeight - 140 + "px"); //excel高度
const tableHeight = ref(window.innerHeight - 140 + "px");
/**excel 开始 */
const excelCheckboxShow = ref(false);
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 treeCopRef = ref(); //treeCop ref
const actTreeNode = ref(null); //当前激活的treeNode
const funRepeatMap = (arr, type = "fitting") => {
  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 === "fitting") {
          //判断当且仅有process获取tree时 赋值
          actTreeNode.value = o;
        }
      }
    }
    return {
      ...o,
      children: o.children ? funRepeatMap(o.children, type) : [],
    };
  });
};
const funGetTree = async () => {
  actTreeNode.value = null;
  const res = await httpRequest.get("/power/fitting/tree");
  treeData.value = funRepeatMap(res.data);
  excelList.value = [];
  nextTick(() => {
    if (actTreeNode.value) {
      funCurrentChange({
        current: actTreeNode.value,
        currentNode: null,
      });
      if (treeCopRef.value && treeCopRef.value.data) {
        treeCopRef.value.$refs.tree.setCheckedKeys(
          [actTreeNode.value.id],
          true
        );
        // excelCheckIds.value = actTreeNode.value.childs.map(o => o.id)
        excelCheckIds.value = [actTreeNode.value.childs[0].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) {
    for (const node of checkedNodes.checkedNodes) {
      if (node.childs && node.childs.length) {
        for (const child of node.childs) {
          checkIds.push(child.id);
        }
      }
    }
  }
  // if (checkedNodes) {
  //     let checkArr = [checkedNodes]
  //     checkArr.forEach(it => {
  //         if (it.childs && it.childs.length) {
  //             it.childs.forEach(iv => {
  //                 checkIds.push(iv.id)
  //             })
  //         }
  //     })
  // }
  excelCheckIds.value = checkIds;
  funSubmit();
};

/**search 开始 */
const funSubmit = async () => {
  if (!excelCheckIds.value.length) {
    ElMessage.error("请勾选要执行的项");
    return false;
  }
  wtData.value = [];
  const params = {
    ids: excelCheckIds.value.join(","),
  };
  const res = await httpRequest.get("/power/fitting/line", {
    params: params,
  });
  if (res.code === 200) {
    seriesData.value = [];
    if (res.data.bzgl) {
      seriesData.value.push({
        name: "保证功率",
        type: "line",
        symbol: "line", //设定为实心点
        symbolSize: 0, //设定实心点的大小
        smooth: true, //这个是把线变成曲线
        data: res.data.bzgl || [],
        xAxisIndex: 0,
      });
    }
    if (res.data.sjgl.length) {
      for (const wtObj of res.data.sjgl) {
        seriesData.value.push({
          // name: wtObj.obj.windturbineId + "\n实际功率",
          name: wtObj.obj.code + "\n实际功率",
          type: "line",
          symbol: "line", //设定为实心点
          symbolSize: 0, //设定实心点的大小
          smooth: true, //这个是把线变成曲线
          data: wtObj.sjgl || [],
          xAxisIndex: 0,
        });
        wtData.value.push(wtObj.obj);
      }
    }
  }
};
/**chart Data */
const avgObj = reactive({
  //平均cpz等
  cpavg: "",
  frequency: "",
  pcratio: "",
});
const xAxisData = ref([]);
const chartRef = ref(); //chart 的ref
const seriesData = ref([]);
const isChartArea = ref(false); // 用来控制图表是否区域划分
const dataSet = ref("");
const funChartSelect = async (batch) => {
  return false;
};
const funChartArea = () => {
  if (seriesData.value.length) {
    // 获取数据后 展示dialog table 数据
    wtDialog.value = true;
    if (!isChartArea.value) {
      // 请求一下
      seriesData.value[0] = {
        ...seriesData.value[0],
        markLine: {
          symbol: "none",
          label: {
            show: false,
          },
          lineStyle: {
            color: "rgba(96,174,255, 1)",
          },
          data: [
            {
              xAxis: 3,
              valueIndex: 0,
            },
            {
              xAxis: 5,
              valueIndex: 0,
            },
            {
              xAxis: 7,
              valueIndex: 0,
            },
            {
              xAxis: 9,
              valueIndex: 0,
            },
            {
              xAxis: 11,
              valueIndex: 0,
            },
            {
              xAxis: 20,
              valueIndex: 0,
            },
            {
              xAxis: 25,
              valueIndex: 0,
            },
          ],
        },
        markArea: {
          label: {
            fontSize: util.vh(12),
          },
          itemStyle: {
            color: "rgba(236,245,255, 0)",
          },
          emphasis: {
            itemStyle: {
              color: "rgba(96,174,255, 0.5)",
            },
          },
          data: [
            [
              {
                name: `3~5m`,
                xAxis: 3,
              },
              {
                xAxis: 5,
              },
            ],
            [
              {
                name: `5~7m`,
                xAxis: 5,
              },
              {
                xAxis: 7,
              },
            ],
            [
              {
                name: `7~9m`,
                xAxis: 7,
              },
              {
                xAxis: 9,
              },
            ],
            [
              {
                name: `9~11m`,
                xAxis: 9,
              },
              {
                xAxis: 11,
              },
            ],
            [
              {
                name: `11~20m`,
                xAxis: 11,
              },
              {
                xAxis: 20,
              },
            ],
            [
              {
                name: `20~25m`,
                xAxis: 20,
              },
              {
                xAxis: 25,
              },
            ],
          ],
        },
      };
      isChartArea.value = true;
    } else {
      seriesData.value[0] = {
        ...seriesData.value[0],
        markLine: null,
        markArea: null,
      };
      isChartArea.value = false;
    }
  }
};
/**tmdialog 数据 */
const tmDialog = ref(false);
const barxAxis = reactive({
  type: "category",
  data: [],
  splitLine: {
    show: false,
  },
  axisTick: {
    show: true,
  },
});
const baryAxis = ref({
  type: "value",
  name: "小时",
  splitLine: {
    show: false,
  },
  axisTick: {
    show: true,
  },
});
const barSeries = ref([
  {
    name: "不运行",
    type: "bar",
    stack: "a",
    data: [],
  },
  {
    name: "3~5m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
  {
    name: "5~10m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
  {
    name: "10~12m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
  {
    name: "12~25m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
]);
const barUnWorkSeries = ref([
  {
    name: "3~5m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
  {
    name: "5~10m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
  {
    name: "10~12m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
  {
    name: "12~25m风速",
    type: "bar",
    stack: "a",
    data: [],
  },
]);
const funTimeArea = () => {
  if (seriesData.value.length) {
    activeTab.value = "1";
    //获取数据
    const res = httpRequest
      .get("/power/fitting/time", {
        params: {
          ids: excelCheckIds.value.join(","),
        },
      })
      .then((res) => {
        if (res.code === 200) {
          barxAxis.data = [];
          barSeries.value = [
            {
              name: "不运行",
              type: "bar",
              stack: "a",
              data: [],
            },
            {
              name: "3~5m风速",
              type: "bar",
              stack: "a",
              data: [],
            },
            {
              name: "5~7m风速",
              type: "bar",
              stack: "a",
              data: [],
            },
            {
              name: "7~9m风速",
              type: "bar",
              stack: "a",
              data: [],
            },
            {
              name: "9~11m风速",
              type: "bar",
              stack: "a",
              data: [],
            },
            {
              name: "11~20m风速",
              type: "bar",
              stack: "a",
              data: [],
            },
            {
              name: "20~25m风速",
              type: "bar",
              stack: "a",
              data: [],
            },
          ];
          barUnWorkSeries.value = [
            {
              name: "3~5m风速",
              type: "bar",
              stack: "a",
              data: [],
            },
            {
              name: "5~7m风速",
              type: "bar",
              stack: "a",
              data: [],
            },
            {
              name: "7~9m风速",
              type: "bar",
              stack: "a",
              data: [],
            },
            {
              name: "9~11m风速",
              type: "bar",
              stack: "a",
              data: [],
            },
            {
              name: "11~20m风速",
              type: "bar",
              stack: "a",
              data: [],
            },
            {
              name: "20~25m风速",
              type: "bar",
              stack: "a",
              data: [],
            },
          ];
          for (const wtObj of res.data) {
            barxAxis.data.push(wtObj.wtId);
            for (const timeKey in wtObj.time1) {
              barSeries.value[timeKey].data.push(
                (wtObj.time1[timeKey] / 60).toFixed(0)
              );
            }
            for (const time2Key in wtObj.time2) {
              barUnWorkSeries.value[time2Key].data.push(
                (wtObj.time2[time2Key] / 60).toFixed(0)
              );
            }
          }
          tmDialog.value = true;
        }
      })
      .catch(() => {
        barxAxis.data = [];
        barSeries.value = [
          {
            name: "不运行",
            type: "bar",
            stack: "a",
            data: [],
          },
          {
            name: "3~5m风速",
            type: "bar",
            stack: "a",
            data: [],
          },
          {
            name: "5~7m风速",
            type: "bar",
            stack: "a",
            data: [],
          },
          {
            name: "7~9m风速",
            type: "bar",
            stack: "a",
            data: [],
          },
          {
            name: "9~11m风速",
            type: "bar",
            stack: "a",
            data: [],
          },
          {
            name: "11~20m风速",
            type: "bar",
            stack: "a",
            data: [],
          },
          {
            name: "20~25m风速",
            type: "bar",
            stack: "a",
            data: [],
          },
        ];
        barUnWorkSeries.value = [
          {
            name: "3~5m风速",
            type: "bar",
            stack: "a",
            data: [],
          },
          {
            name: "5~7m风速",
            type: "bar",
            stack: "a",
            data: [],
          },
          {
            name: "7~9m风速",
            type: "bar",
            stack: "a",
            data: [],
          },
          {
            name: "9~11m风速",
            type: "bar",
            stack: "a",
            data: [],
          },
          {
            name: "11~20m风速",
            type: "bar",
            stack: "a",
            data: [],
          },
          {
            name: "20~25m风速",
            type: "bar",
            stack: "a",
            data: [],
          },
        ];
        for (const wtObj of jsonData.timeData) {
          barxAxis.data.push(wtObj.wtId);
          for (const timeKey in wtObj.time1) {
            barSeries.value[timeKey].data.push(
              (wtObj.time1[timeKey] / 60).toFixed(0)
            );
          }
          for (const time2Key in wtObj.time2) {
            barUnWorkSeries.value[time2Key].data.push(
              (wtObj.time2[time2Key] / 60).toFixed(0)
            );
          }
        }
        tmDialog.value = true;
      });
  }
};

/**额定功率 */
const powerDialog = ref(false);
const powerxAxis = reactive({
  type: "category",
  data: [],
  splitLine: {
    show: false,
  },
  axisTick: {
    show: true,
  },
});
const poweryAxis = ref({
  type: "value",
  name: "kW",
  max: null,
  splitLine: {
    show: false,
  },
  axisTick: {
    show: true,
  },
});
const countyAxis = ref({
  type: "value",
  name: "次数",
  splitLine: {
    show: false,
  },
  axisTick: {
    show: true,
  },
});
const powerSeries = ref([
  {
    name: "平均全功率",
    type: "bar",
    data: [],
    markLine: {},
  },
]);
const countSeries = ref([
  {
    name: "次数",
    type: "bar",
    data: [],
    markLine: {},
  },
]);
const funPower = () => {
  if (seriesData.value.length) {
    //获取数据
    const res = httpRequest
      .get("/rated/power", {
        params: {
          ids: excelCheckIds.value.join(","),
        },
      })
      .then((res) => {
        if (res.code === 200) {
          powerxAxis.data = [];
          powerSeries.value = [
            {
              name: "平均全功率",
              type: "bar",
              data: [],
              markLine: {
                symbol: "none",
                label: {
                  show: true,
                },
                lineStyle: {
                  color: "rgba(96,174,255, 1)",
                },
                data: [],
              },
            },
          ];
          countSeries.value = [
            {
              name: "次数",
              type: "bar",
              data: [],
              markLine: {},
            },
          ];
          if (res.data.data) {
            const xAxis = [],
              seriesArr = [],
              countArr = [];
            for (const val of res.data.data) {
              xAxis.push(val.wt);
              seriesArr.push(val.avg);
              countArr.push(val.count);
            }
            powerxAxis.data = xAxis;
            countSeries.value[0].data = countArr.map((o) => {
              return {
                value: o,
                // itemStyle: {
                // 	color: o < res.data.avg ? 'rgb(197,78,82)' : 'rgb(50,93,171)'
                // }
              };
            });
            powerSeries.value[0].data = seriesArr.map((o) => {
              return {
                value: o,
                itemStyle: {
                  color: o < res.data.avg ? "rgb(197,78,82)" : "rgb(50,93,171)",
                },
              };
            });
            let maxValue = Math.max(...seriesArr);
            if (res.data.power > maxValue) {
              maxValue = res.data.power;
            } else {
              maxValue = null;
            }
            poweryAxis.value.max = maxValue;
            powerSeries.value[0].markLine.data = [
              {
                yAxis: res.data.avg,
                name: `平均额定功率${res.data.avg}`,
                lineStyle: {
                  color: "green",
                },
              },
              {
                yAxis: res.data.power,
                name: `额定功率${res.data.power}`,
                lineStyle: {
                  color: "red",
                },
              },
            ];
          }
          powerDialog.value = true;
        }
      })
      .catch(() => {
        powerxAxis.data = [];
        powerSeries.value = [
          {
            name: "平均全功率",
            type: "bar",
            data: [],
            markLine: {
              symbol: "none",
              label: {
                show: true,
              },
              lineStyle: {
                color: "rgba(96,174,255, 1)",
              },
              data: [],
            },
          },
        ];
        countSeries.value = [
          {
            name: "次数",
            type: "bar",
            data: [],
            markLine: {},
          },
        ];
        const xAxis = [],
          seriesArr = [],
          countArr = [];
        for (const val of jsonData.powerData.data) {
          xAxis.push(val.wt);
          seriesArr.push(val.avg);
          countArr.push(val.count);
        }
        powerxAxis.data = xAxis;
        countSeries.value[0].data = countArr.map((o) => {
          return {
            value: o,
            // itemStyle: {
            // 	color: o < res.data.avg ? 'rgb(197,78,82)' : 'rgb(50,93,171)'
            // }
          };
        });
        powerSeries.value[0].data = seriesArr.map((o) => {
          return {
            value: o,
            itemStyle: {
              color: o < res.data.avg ? "rgb(197,78,82)" : "rgb(50,93,171)",
            },
          };
        });
        let maxValue = Math.max(...seriesArr);
        if (jsonData.powerData.power > maxValue) {
          maxValue = res.data.power;
        } else {
          maxValue = null;
        }
        poweryAxis.value.max = maxValue;
        powerSeries.value[0].markLine.data = [
          {
            yAxis: res.data.avg,
            name: `平均额定功率${res.data.avg}`,
            lineStyle: {
              color: "green",
            },
          },
          {
            yAxis: res.data.power,
            name: `额定功率${res.data.power}`,
            lineStyle: {
              color: "red",
            },
          },
        ];
        powerDialog.value = true;
      });
  }
};
/**dialog 数据 */
const wtDialog = ref(false);
const wtData = ref([]);
const activeTab = ref("1");
/**created */
// funGetTree()
// funGetProcessTree()
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 = [];
  nextTick(() => {
    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.data) {
        treeCopRef.value.$refs.tree.setCheckedKeys(
          [actTreeNode.value.id],
          true
        );
        excelCheckIds.value = [actTreeNode.value.childs[0].id];

        wtData.value = [];
        seriesData.value = [];
        seriesData.value.push({
          name: "保证功率",
          type: "line",
          symbol: "line", //设定为实心点
          symbolSize: 0, //设定实心点的大小
          smooth: true, //这个是把线变成曲线
          data: jsonData.lineData.bzgl || [],
          xAxisIndex: 0,
        });
        for (const wtObj of jsonData.lineData.sjgl) {
          seriesData.value.push({
            // name: wtObj.obj.windturbineId + "\n实际功率",
            name: wtObj.obj.code + "\n实际功率",
            type: "line",
            symbol: "line", //设定为实心点
            symbolSize: 0, //设定实心点的大小
            smooth: true, //这个是把线变成曲线
            data: wtObj.sjgl || [],
            xAxisIndex: 0,
          });
          wtData.value.push(wtObj.obj);
        }
      }
    }
  });
};
/**mounted */
onMounted(() => {
  initPageData();
  funGetTree();
  theme.value = store.state.theme;
  echartsTheme.value = !theme.value ? "dark" : "";
  tableHeight.value = window.innerHeight - 140 + "px";
  excelHeight.value = window.innerHeight - 140 + "px";
  treeHeight.value = window.innerHeight - 140 + "px";
  window.addEventListener("resize", () => {
    tableHeight.value = window.innerHeight - 140 + "px";
    excelHeight.value = window.innerHeight - 140 + "px";
    treeHeight.value = window.innerHeight - 140 + "px";
  });
  /**test */
  // funExcelChange({
  // 	id: 1,
  // 	name: 'excel',
  // 	type: 'fitting',
  // })
});
/**activated */
// onActivated(() => {
//     funGetTree()
// })
</script>

<style lang="less" scoped>
.dataAnalysisLineAna {
  height: 100%;

  .dataAnalysisLineAnaMain {
    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 {
  .dataAnalysisLineAnaMain {
    .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;

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

    .main {
      background: #e6e8f2;

      .treeDataMain {
        background: transparent;
      }

      .excelDataMain {
        background: #f4f6fb;
      }

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