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

<template>
  <div class="map-ditu">
    <Tmap ref="map" @feature-click="featureClick"></Tmap>
    <div class="ledata">
      <el-input v-model="treeval" @focus="showTree = true"></el-input>
      <div class="Showtree">
        <el-tree
          v-if="showTree"
          :data="treeData"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>

      <p><span class="SpText">风场总数：</span>20 个</p>
      <p><span class="SpText">已分析风场：</span>10 个</p>
      <p><span class="SpText">未分析风场：</span>10个</p>
      <p><span class="SpText">风机数量：</span>10 个</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 Tmap from "@/components/map";
import Rightdata from "./component/rightdata.vue";
export default {
  name: "Index",
  components: {
    Tmap,
    Rightdata,
  },
  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",
        },
      ],
    };
  },

  mounted() {
    //模拟地图上的点位
    const data = [{ point: [120.2, 30.35] }];
    data.forEach((element) => {
      console.log(element);
      this.$refs.map.addMarker(element);
    });
  },

  methods: {
    clickEvent(data) {
      console.log(data);
      this.$router.push({ name: "about" });
    },

    handleSwitchChange() {
      this.ShowRi = !this.ShowRi;
    },
    handleNodeClick(data) {
      // 将点击的节点值赋给输入框
      this.treeval = data.label;
      // 隐藏树列表
      this.showTree = false;
    },
    featureClick() {
      this.$router.push("cockpitManage/electronic-map");
      //点击事件  跳转B页面
    },
  },
};
</script>

<style lang="scss" scoped>
.map-ditu {
  min-width: 86.9vw;
  max-width: 94.9vw;
  height: 93.4vh;
  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>