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

<template>
  <div class="map-ditu">
    <Tmap ref="map" :maplist="maplist" @feature-click="featureClick"></Tmap>
    <div class="statistics">
      <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>
      <leftdata v-show="ShowRi" class="task"></leftdata>
    </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";
import Leftdata from "./component/leftdata.vue";

export default {
  name: "Index",
  components: {
    Tmap,
    Rightdata,
    selecttree,
    Leftdata,
  },
  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;
      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) => {
          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) {
      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) {
        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 {
  //  min-width: 86.9vw;
  //  max-width: 94.9vw;
  height: calc(100vh - 60px);
  // height: 100vh;
  position: relative;
}

.statistics {
  position: absolute;
  top: 20px; /* 距离页面顶部20px */
  left: 60px;
  display: grid;
  grid-template-rows: auto auto; /* 为 ledata 和 task 分配行 */
  grid-gap: 20px; /* 在 ledata 和 task 之间设置间距 */

  .ledata {
    font-size: 14px;
    width: 300px;
    background: rgba(0, 128, 128, 0.8);
    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;
      }
    }
  }

  .task {
    // background: #f4f4f4;
    // padding: 10px;
    color: #333;
    border-radius: 5px;
  }
}

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

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