performance-test/src/views/laserRangeFinder/index.vue

<template>
  <!-- 激光测距仪页面 -->
  <div class="global-variable">
    <div class="searchbox">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="数据筛选" name="1">
          <template slot="title">
            <div class="titleLeft">数据筛选</div>
            <div class="titleRight">
              <el-button type="primary" @click.stop="getTableData" size="small">
                查询
              </el-button>
              <el-button
                v-if="tabActiveName === 'list'"
                type="primary"
                @click.stop="onSubmit"
                size="small"
              >
                导出
              </el-button>
            </div>
          </template>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-row :gutter="10">
              <el-col :xs="16" :sm="8" :md="7" :lg="6" :xl="4">
                <el-form-item label="单位">
                  <selecttree
                    style="width: 220px"
                    placeholder="请选择所属公司"
                    :list="parentOpt"
                    type="1"
                    v-model="formInline.companyCode"
                    @change="parentChange"
                    :defaultParentProps="{
                      children: 'children',
                      label: 'companyName',
                      value: 'codeNumber',
                    }"
                  >
                  </selecttree>
                </el-form-item>
              </el-col>
              <el-col :xs="16" :sm="8" :md="7" :lg="6" :xl="4">
                <el-form-item label="风机">
                  <el-select
                    v-model="formInline.unitvalue"
                    size="small"
                    placeholder="请选择"
                    @change="handleWindTuebineData"
                  >
                    <el-option
                      v-for="item in unitoptions"
                      :key="item.engineCode"
                      :label="item.engineName"
                      :value="item.engineCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="14" :md="12" :lg="10" :xl="6">
                <el-form-item label="时间">
                  <el-date-picker
                    size="small"
                    v-model="formInline.timevalue"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="main-body">
      <div class="data-map">
        <el-tabs type="border-card" v-model="tabActiveName">
          <el-tab-pane label="原始图" name="init">
            <span slot="label">
              <img
                style="width: 30px; height: 20px; display: inline-block"
                src="@/assets/analyse/04.png"
                alt=""
              />
              原始图
            </span>
            <div class="boxContent">
              <div class="left" v-if="tabActiveName === 'init'">
                <el-empty
                  description="暂无数据，请先进行数据筛选"
                  :image-size="200"
                  v-if="currentInitRow === null"
                ></el-empty>
                <div v-else>
                  <InitCharts></InitCharts>
                  <CylinderOfTower type="Waveformdiagram"></CylinderOfTower>
                  <CylinderOfTower type="spectrogram"></CylinderOfTower>
                </div>
              </div>
              <div class="right">
                <DescrBox
                  type="init"
                  :tableData="tableData"
                  ref="initTable"
                  :windName="windName"
                  :windTurbineName="windTurbineName"
                  :currentIndex="currentInitIndex"
                  :currentRow="currentInitRow"
                  @handleInitCurrentChange="handleInitCurrentChange"
                ></DescrBox>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="拟合图" name="copy">
            <span slot="label">
              <img
                style="width: 25px; height: 20px; display: inline-block"
                src="@/assets/analyse/01.png"
                alt=""
              />
              拟合图
            </span>
            <div class="boxContent" v-if="tabActiveName === 'copy'">
              <div class="left">
                <el-empty
                  description="暂无数据，请先进行数据筛选"
                  :image-size="200"
                  v-if="currentCopyRow === null"
                ></el-empty>
                <div v-else>
                  <PlotOfFit type="LeafRootOutline"></PlotOfFit>
                  <PlotOfFit type="LeafRootRelativeOutline"></PlotOfFit>
                  <PlotOfFit type="LeafTipProfile"></PlotOfFit>
                  <PlotOfFit type="LeafTipRelativeProfile"></PlotOfFit>
                </div>
              </div>
              <div class="right">
                <DescrBox
                  type="copy"
                  ref="copyTable"
                  :windName="windName"
                  :windTurbineName="windTurbineName"
                  :tableData="tableData"
                  :currentRow="currentCopyRow"
                  :currentIndex="currentCopyIndex"
                  @handleCopyCurrentChange="handleCopyCurrentChange"
                ></DescrBox>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="数据列表" name="list">
            <span slot="label">
              <img
                style="width: 20px; height: 20px; display: inline-block"
                src="@/assets/analyse/dataList1.png"
                alt=""
              />
              数据列表
            </span>
            <div>
              <MultilevelTable
                ref="multilevelTable"
                :windName="windName"
                :windTurbineName="windTurbineName"
                :tableData="tableData"
              ></MultilevelTable>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getSysOrganizationAuthTreeByRoleId,
  windEngineGrouPage,
} from "@/api/ledger.js";
import DescrBox from "./components/descrBox.vue";
import selecttree from "../../components/selecttree.vue";
import MultilevelTable from "./components/MultilevelTable.vue";
import InitCharts from "./components/initCharts.vue";
import CylinderOfTower from "./components/CylinderOfTower.vue";
import PlotOfFit from "./components/PlotOfFit.vue";
import axios from "axios";

export default {
  data() {
    return {
      activeNames: ["1"],
      tabActiveName: "init",
      formInline: {
        companyCode: "", //单位
        unitvalue: "", //风机
        timevalue: "", //时间
      },
      companyCode: "", //单位表格中展示
      parentOpt: [], //风场
      tableData: [], // 假设是来自父组件的数据
      company: "",
      unitoptions: [], //风机list
      fourList: [],
      currentInitRow: null, // 原始图用于存储当前选中的行
      currentInitIndex: 0,
      currentCopyRow: null, //拟合图用于存储当前选中的行
      currentCopyIndex: 0,
      windName: "",
      windTurbineName: "",
    };
  },
  components: {
    DescrBox,
    PlotOfFit,
    MultilevelTable,
    selecttree,
    InitCharts,
    CylinderOfTower,
  },
  created() {
    this.GETtree();
  },
  methods: {
    //获取表格数据接口
    async getTableData() {
      try {
        // companyCode: "", //单位
        // unitvalue: "", //风机
        const params = {
          startTime: this.$formatDateTWO(this.formInline.timevalue[0]),
          endTime: this.$formatDateTWO(this.formInline.timevalue[1]),
          windCode: this.formInline.companyCode,
          windTurbineNumber: this.formInline.unitvalue,
        };
        const res = await axios.post("/WZLapi/laserData/getLaserData", params);
        if (res.data.code === 200) {
          this.tableData = res.data.datas;
        } else {
          this.$message.warning(res.data.message);
        }
      } catch (err) {
        this.$message.error(err);
      }
    },
    // 获取风场
    async GETtree() {
      try {
        const res = await getSysOrganizationAuthTreeByRoleId();
        const treedata = res.data;
        const processedData = this.processTreeData(treedata);
        this.parentOpt = processedData;
        this.defaultdata = res.data[0];
      } catch (err) {
        this.$message.error(err);
      }
    },
    processTreeData(treeData) {
      const processedData = [];
      function processNode(node) {
        if (node.codeType === "field") {
          node.companyName = node.fieldName;
        }
        if (node.children && node.children.length > 0) {
          node.children.forEach((child) => {
            processNode(child);
          });
        }
      }
      treeData.forEach((root) => {
        processNode(root);
        processedData.push(root);
      });
      return processedData;
    },
    handleWindTuebineData(data) {
      this.windTurbineName = this.getWindTurbineLabel(data);
    },
    parentChange(data) {
      console.log(data, "data");
      this.windName = data && data.companyName;
      this.maplist = data;
      this.maplistArr = data;
      let paramsData = {
        fieldCode: this.maplist.codeNumber,
        pageNum: 1,
        pageSize: 99,
      };
      // this.unitvalue = "";
      // 获取风机
      windEngineGrouPage(paramsData).then((res) => {
        this.unitoptions = res.data.list;
      });
      if (data.codeType === "field") {
        if (this.parseCoordinates(data.longitudeAndLatitudeString).length > 0) {
          return;
        }
      } else {
        const dataMapList = data.children;
        dataMapList.forEach((element) => {
          console.log(element);
          if (
            this.parseCoordinates(element.longitudeAndLatitudeString).length >
              0 &&
            element.codeType === "field"
          ) {
            return;
          }
        });
      }
    },
    parseCoordinates(input) {
      if (input && typeof input === "string") {
        return input.split(",").map(Number);
      }
      // debugger;
      return [];
    },
    handleInitCurrentChange(val, ind) {
      this.currentInitRow = val; // 处理当前选中行
      this.currentInitIndex = ind; // 更新当前索引
    },
    handleCopyCurrentChange(val, ind) {
      this.currentCopyRow = val; // 处理当前选中行
      this.currentCopyIndex = ind; // 更新当前索引
    },

    getWindTurbineLabel(companyCode) {
      const selectedOption = this.unitoptions?.find(
        (option) => option.engineCode === companyCode
      );
      return selectedOption ? selectedOption.engineName : "";
    },
    onSubmit() {
      if (this.tableData.length > 0) {
        this.$refs.multilevelTable.outputFile();
      } else {
        this.$message.warning("请先查询到想要的数据范围后再进行导出");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  // border-top: 5px solid #088080;
  // border-bottom: 5px solid #088080;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  .headleft {
    display: flex;
  }
  .headright {
    img {
      width: 20px;
      height: 20px;
      margin: 0 10px;
      cursor: pointer;
    }
  }
}
.searchbox {
  // display: flex;
  margin: 20px 0 0 0;
  p {
    margin-right: 20px;
  }
  .el-select {
    width: 180px;
  }

  .titleLeft {
  }
  .titleRight {
    display: flex;
    position: absolute;
    right: 100px;
  }
}
.dialog-actions {
  text-align: right;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.subject {
  height: 280px;
  transition: all 0.3s ease;
  padding: 0 10px;
  p {
    font-size: 10px;
  }
}

.main-body {
  display: flex;
  justify-content: space-between;
  .data-map {
    width: 100%;
    // height: 620px;
    overflow-y: auto;
    .chart-area {
      margin-bottom: 10px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    }
    .boxContent {
      display: flex;
      justify-content: space-between;
      .left {
        width: 60%;
      }
      .right {
        width: 39%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      }
    }
    .el-tabs--border-card {
      height: 100%;
    }
    ::v-deep .el-tabs--border-card > .el-tabs__content {
      padding: 0 !important;
    }
  }
  .data-map::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
}

.subject.minimized {
  height: 0px; /* Adjust height when minimized */
  overflow: hidden;
}

#main {
  width: 100%;
  height: 280px;
}

// .line-chart {
//   position: relative;
// }
</style>