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 }} 个
      </p>
      <p>
        <span class="SpText">已分析风场：</span>{{ totalList.analysisFinishNumber }} 个
      </p>
      <p>
        <span class="SpText">未分析风场：</span>{{ totalList.analysisUnFinishedNumber }} 个
      </p>
      <p>
        <span class="SpText">风机数量：</span>{{ totalList.engineGroupNumber }} 个
      </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" 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: [
        // 树列表数据，根据实际需求自行替换
        {
          id: 1,
          label: "Node 1",
          children: [
            {
              id: 2,
              label: "Node 1-1",
            },
          ],
        },
        {
          id: 3,
          label: "Node 2",
        },
      ],
      maplist: [
        // { point: [116.4074, 39.9042], val: "1" },
        // { point: [104.0657, 30.6595], val: "2" },
        // { point: [108.9402, 34.3416], val: "3" },
      ],
      totalList: [],
      parentOpt: [],
      companyCode: "",
    };
  },
  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;
    },

    //过滤数据
    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;
      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: 90px;
      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;
    }
  }
}

.Showtree {
  position: absolute;
  top: 55px;
  left: 10px;
  width: 280px;
}
</style>