performance-test/src/views/admin/cockpitManage/HD.vue

<template>
  <div class="map-ditu">
    <Tmap ref="map" :maplist="maplist" @feature-click="featureClick"></Tmap>
    <bottom-data :maplistArr="maplistArr" :defaultdata="defaultdata" />
    <div class="zuobian">
      <selecttree
      placeholder="请选择所属公司"
      :list="parentOpt"
      type="1"
      v-model="companyCode"
      @change="parentChange"
      :defaultParentProps="{
        children: 'children',
        label: 'companyName',
        value: 'codeNumber',
      }"
    >
    </selecttree>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
import selecttree from "../../../components/selecttree.vue";
import {
  getCompanyFieldNumberVo,
  getSysOrganizationAuthTreeByRoleId,
} from "@/api/ledger.js";
import Tmap from "@/components/map";
import BottomData from "./component/bottomData.vue";

export default {
  name: "Index",
  components: {
    Tmap,
    BottomData,
    selecttree,
  },
  props: {
    fieldCode: "",
    batchCode: "",
  },
  data() {
    return {
      ShowRi: true,
      treeval: "",
      value1: true,
      treeval: "", // 绑定的输入框值
      showTree: false, // 控制树列表显示
      treeData: [],
      maplist: [],
      maplistArr: {},
      totalList: [],
      parentOpt: [],
      companyCode: "",
      defaultdata: {},
    };
  },
  created() {
    this.GETtree();
    this.GETtotal();
  },
  mounted() {
    //模拟地图上的点位
    const data = this.maplist;
    // data.forEach((element) => {
    //   console.log(element);
    //   // this.$refs.map.addMarker({ point: [116.40740,39.90420], val: "1" });
    // });
  },
  methods: {
    // 获取总数
    GETtotal() {
      getCompanyFieldNumberVo().then((res) => {
        this.totalList = res.data;
      });
    },
    // 获取企业数
    async GETtree() {
      const res = await getSysOrganizationAuthTreeByRoleId();
      const treedata = res.data;
      const processedData = this.processTreeData(treedata);
      this.parentOpt = processedData;
      this.defaultdata = res.data[0];
      this.parentChange(this.defaultdata);
      // const firstLayer = this.findFirstFieldLayer(processedData);
      // if (firstLayer) {
      //   this.parentChange(  this.defaultdata);
      // }
    },
    //过滤数据
    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;
    },
    handleTreeData() {
      this.treeData = this.processTreeData(this.treeData);
    },
    parseCoordinates(input) {
      if (input && typeof input === "string") {
        return input.split(",").map(Number);
      }
      // debugger;
      return [];
    },
    parentChange(data) {
      //data为当前选中对象
      this.$refs.map.clearMarkers();
      this.maplist = data;
      this.maplistArr = data;
      console.log(data, "parentChange");
      if (data.codeType === "field") {
        if (this.parseCoordinates(data.longitudeAndLatitudeString).length > 0) {
          this.$refs.map.addMarker({
            point: this.parseCoordinates(data.longitudeAndLatitudeString),
            val: data.analysisState,
            ...data,
          });
          return;
        }
        this.$refs.map.clearMarkers();
      } else {
        const dataMapList = data.children;
        dataMapList.forEach((element) => {
          console.log(element);
          if (
            this.parseCoordinates(element.longitudeAndLatitudeString).length >
              0 &&
            element.codeType === "field"
          ) {
            this.$refs.map.addMarker({
              point: this.parseCoordinates(element.longitudeAndLatitudeString),
              val: element.analysisState,
              ...element,
            });
            return;
          }
          this.$refs.map.clearMarkers();
        });
      }
    },
    findFirstFieldLayer(data) {
      for (const item of data) {
        if (item.codeType === "field") {
          return item;
        }
        if (item.children && item.children.length > 0) {
          const childResult = this.findFirstFieldLayer(item.children);
          if (childResult) {
            return childResult;
          }
        }
      }
      return null;
    },
    featureClick(data) {
      console.log(data, "featureClick");
      const val = data.val;
      if (val === "-1" || val === -1 || val === 10) {
        this.$message.error("当前风场未完成分析");
      } else if (val === "0" || val === 0) {
        this.$message({
          message: "当前风场正在分析中",
          type: "warning",
        });
      } else if (val === "1" || val === 1 || val === "30" || val === 30) {
        console.log("打包成功");
        this.$router.push({
          path: "cockpitManage/electronic-map",
          query: {
            fieldCode: data.codeNumber,
            batchCode: data.batchCode,
          },
        });
      }
    },
    handleSwitchChange() {
      this.ShowRi = !this.ShowRi;
    },
  },
};
</script>

<style lang="scss" scoped>
.map-ditu {
  height: 93.3vh;
  display: flex;
  flex-direction: column;
}

// 动态计算 Tmap 组件高度
Tmap {
  height: calc(93.3vh - 230px);
  min-height: 0; // 防止 flex 项溢出
}

// 设置 bottom-data 组件高度为 230px
bottom-data {
  height: 230px;
  flex-shrink: 0; // 防止组件缩小
}

.zuobian{
  width: 180px;
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>