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

<template>
  <div class="map-ditu">
    <Tmap ref="map" :maplist="maplist" @feature-click="featureClick"></Tmap>
    <div class="ledata">
      <selecttree placeholder="请选择上级单位" :list="parentOpt" type="1" v-model="companyCode" @change="parentChange"
        :defaultParentProps="{
          children: 'children',
          label: 'companyName',
          value: 'codeNumber',
        }">
      </selecttree>

      <p>
        <span class="SpText">登录人风场总数：</span>
        {{ totalList?.fieldSumNumber ? totalList.fieldSumNumber : 0 }}
        个
      </p>
      <p>
        <span class="SpText">已完成分析风场：</span>
        {{
          totalList?.analysisFinishNumber ? totalList.analysisFinishNumber : 0
        }}
        个
      </p>
      <p>
        <span class="SpText">未完成分析风场：</span>
        {{
          totalList?.analysisUnFinishedNumber
            ? totalList.analysisUnFinishedNumber
            : 0
        }}
        个
      </p>
      <p>
        <span class="SpText">风机数量：</span>
        {{ totalList?.engineGroupNumber ? totalList.engineGroupNumber : 0 }}
        个
      </p>
      <p>
        <span class="SpText">风场状态：</span>
        <span class="red"></span>
        <span class="yellow"></span>
        <span class="green"></span>
      </p>
      <el-switch v-model="value1" active-text="显示" inactive-text="隐藏" @change="handleSwitchChange">
      </el-switch>
    </div>
    <Rightdata v-show="ShowRi" ref="childRef" :maplistArr="maplistArr" :defaultdata="defaultdata" class="ridata">
    </Rightdata>
    <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 Rightdata from "./component/rightdata.vue";
export default {
  name: "Index",
  components: {
    Tmap,
    Rightdata,
    selecttree,
  },
  data() {
    return {
      ShowRi: true,
      treeval: "",
      value1: true,
      treeval: "", // 绑定的输入框值
      showTree: false, // 控制树列表显示
      treeData: [],
      maplist: [],
      maplistArr: {},
      totalList: [],
      parentOpt: [],
      companyCode: "",
      defaultdata: {},
    };
  },
  created() {
    this.GETtree();
    this.GETtotal();

    // 页面初始化时手动触发一次赋值操作
    this.$watch("defaultdata", (newValue) => {
      this.maplistArr = newValue; // 将defaultdata的值赋给maplistArr
    });
    this.maplistArr = this.defaultdata;
  },
  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];
    },

    //过滤数据
    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;
    },


    parseCoordinates(input) {
      if (input && typeof input === "string") {
        return input.split(",").map(Number);
      }
      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();
        });
      }
    },

    featureClick(data) {
      console.log(data, "featureClick");
      const val = data.val;
      if (val === "-1" || val === -1) {
        this.$message.error("当前风场未进行分析");
      } else if (val === "0" || val === 0) {
        this.$message({
          message: "当前风场正在分析中",
          type: "warning",
        });
      } else if (val === "1" || val === 1) {
        this.$router.push({
          path: "cockpitManage/electronic-map",
          query: {
            fieldCode: data.codeNumber,
          },
        });
      }
    },
    handleSwitchChange() {
      this.ShowRi = !this.ShowRi;
    },
  },
};
</script>

<style lang="scss" scoped>
.map-ditu {
  // min-width: 86.9vw;
  // max-width: 94.9vw;
  height: 93vh;
  position: relative;
}

.ridata {
  position: absolute;
  top: 20px;
  right: 20px;
}

.ledata {
  font-size: 14px;
  width: 300px;
  position: absolute;
  top: 20px;
  left: 60px;
  background: #008080;
  padding: 10px;
  color: #fff;
  border-radius: 5px;

  p {
    line-height: 24px;

    .SpText {
      display: inline-block;
      width: 120px;
      text-align: right;
    }

    .red,
    .yellow,
    .green {
      display: inline-block;
      width: 30px;
      height: 12px;
      margin-right: 5px;
    }

    .red {
      background-color: #e16757;
    }

    .yellow {
      background-color: #eecb5f;
    }

    .green {
      background-color: #7ecf51;
    }
  }
}

::v-deep .el-switch__label.is-active {
  color: #fff;
}
</style>