industry-database/src/views/c-views/visualizationPart/projectManagement/projectManagement.vue

<template>
  <div id="projectManagement">
    <VisualizationHeader />
    <service-tree :serviceData="serviceGLLayer" :defaultCheckedKeys=defaultLayer  />
    <Map type="project"/>
    <div class="right">
      <div class="top">
        图例
      </div>
      <div class="tuli-content">
        <div class="single-item">
          <div class="single-color-1"></div>
          <span>项目信息</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from "@/views/c-cpns/Map.vue";
import VisualizationHeader from "@/views/c-cpns/VisualizationHeader.vue";
import ServiceTree from "@/components/ServiceTree.vue";
import {serviceGLLayer} from "@/data/all-layers.js";
export default {
  name: "projectManagement",
  components: { ServiceTree,VisualizationHeader, Map},
  setup(){
    let defaultLayer = ['D9999990320240701'];
    return{
      serviceGLLayer,
      defaultLayer
    }
  }
}
</script>

<style scoped lang="scss">
#projectManagement {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  .right{
    background: rgba(29, 93, 160, 0.7);
    position: absolute;
    right: 80px;
    bottom:100px;
    z-index: 2;
    width:300px;
    padding: 8px;
    .top{
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      padding-bottom: 8px;
    }
    .tuli-content{
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .single-item{
        width: 100%;
        display: flex;
        padding: 4px;
        span{
          padding-left: 4px;
          font-size: 16px;
          color: #FFF;
        }
        .single-color-1{
          width: 40px;
          height: 20px;
          background-color: #f57a7a;
        }
      }
    }

  }
}
</style>