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"
                    @change="getchedian"
                    size="small"
                    placeholder="请选择"
                  >
                    <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
                  :image-size="200"
                  v-if="currentRow === null"
                ></el-empty>
                <div v-else>
                  <InitCharts></InitCharts>
                  <CylinderOfTower type="Waveformdiagram"></CylinderOfTower>
                  <CylinderOfTower type="spectrogram"></CylinderOfTower>
                </div>
              </div>
              <div class="right">
                <DescrBox
                  type="init"
                  ref="initTable"
                  @handleCurrentChange="handleCurrentChange"
                ></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
                  :image-size="200"
                  v-if="currentRow === 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"
                  @handleCurrentChange="handleCurrentChange"
                ></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></MultilevelTable>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  getSysOrganizationAuthTreeByRoleId,
  windEngineGrouPage,
  queryDetectionDic,
} 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: [],
      chartData: [],
      chartLabels: [],
      tableData: [],
      data: [10, 20, 30, 40], // 假设是图表的数据
      labels: ["2024/1/1", "2024/1/2", "2024/1/3", "2024/1/4"], // 假设是时间轴数据
      currentIndex: 0,
      tableData: [], // 假设是来自父组件的数据
      company: "",
      companyoptions: [],
      unitvalue: "",
      unitoptions: [],
      monitoringvalue: "",
      monitoringoptions: [],
      timevalue: "",
      tableData: [],
      fourList: [],
      currentRow: null, // 用于存储当前选中的行
      currentIndex: 0,
      isChartVisible: false,
    };
  },
  components: {
    DescrBox,
    PlotOfFit,
    MultilevelTable,
    selecttree,
    InitCharts,
    CylinderOfTower,
  },
  created() {
    this.GETtree();
  },
  methods: {
    //获取表格数据接口
    async getTableData() {
      try {
        console.log(this.formInline, "formInline");
        const res = await axios.post("/WZLapi/laserData/getLaserData");
      } 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;
    },
    parentChange(data) {
      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 [];
    },
    // 获取测点
    getchedian(value) {
      queryDetectionDic({ engineCodes: value }).then((res) => {
        this.monitoringoptions = res.data;
      });
    },
    handleCurrentIndexUpdate(newIndex) {
      this.currentIndex = newIndex;
    },
    setCurrent(row) {
      this.$nextTick(() => {
        if (this.$refs.singleTable) {
          this.$refs.singleTable.setCurrentRow(row); // 设置当前行
        } else {
          console.warn("Cannot access $refs.singleTable: it's undefined.");
        }
      });
    },
    handleCurrentChange(val) {
      this.currentRow = val; // 处理当前选中行
      const index = this.tableData.indexOf(val); // 获取当前选中行的索引
      this.currentIndex = index; // 更新当前索引
    },

    generate(type) {
      if (!this.currentRow) {
        this.$message.warning("请先选择数据");
        return;
      }
    },

    // 缩小
    lessen(index) {
      if (!this.fourList[index].isMinimized) {
        this.fourList[index].isMinimized = true;
      }
      console.log("1");
    },
    // 放大
    amplifier(index) {
      const item = this.fourList[index];
      if (item.isMinimized) {
        item.isMinimized = false;
      }
      console.log("2");
    },
    // 关闭
    close(index) {
      this.fourList.splice(index, 1);
      console.log("3");
    },
    zhankai() {
      this.fourList.forEach((item) => {
        item.isMinimized = false;
      });
    },
    suoxiao() {
      this.fourList.forEach((item) => {
        item.isMinimized = true;
      });
    },
    guanbi() {
      this.fourList = [];
    },
    onSubmit() {
      console.log("事件触发了");
    },
  },
};
</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>