web_sh_audit/src/views/ComprehensiveAnalysis.vue

<template>
  <div class="comprehensive-analysis">
    <div class="comprehensive-analysis-backbtn" @click="backEvent">
      <div class="left-arrow"></div>
      <div class="title">返回上级</div>
    </div>
    <!-- 右上角工具栏 -->
    <div class="comprehensive-analysis-toolbar">
      <div class="selected-icon" @click="showLayers"></div>
      <div class="layers-control-icon" @click="selectLayers"></div>
      <div class="searchbox">
        <el-input
          placeholder="请输入地址、地块名称等"
          v-model="analysis.searchInput"
        ></el-input>
      </div>
    </div>
    <!-- 图例 -->
    <MenuCard
      class="comprehensive-analysis-legendbox"
      :menuData="{
        type: 'chart',
        title: '图例',
        boxWidth: '200',
        boxHeight: '200',
      }"
    >
    </MenuCard>
    <div class="comprehensive-analysis-left">
      <div class="collapse-btn" @click="collapsePanelEvent"></div>
      <div class="close-btn"></div>
    </div>
    <div class="comprehensive-analysis-right">
      <div class="control-container"><div class="control-btn"></div></div>
      <div class="contant-container"></div>
    </div>
  </div>
</template>
<script>
// 综合分析
import MenuCard from "@/components/layout/MenuCard.vue";
export default {
  name: "ComprehensiveAnalysis",
  components: {
    MenuCard,
  },
  data() {
    return {
      analysis: {
        searchInput: "",
      },
    };
  },
  mounted() {},
  methods: {
    // 回退事件
    backEvent() {
      console.log("综合分析回退事件");
    },
    // 控制图层的显示与隐藏
    showLayers() {},
    // 选择图层
    selectLayers() {},
    // 折叠
    collapsePanelEvent() {},
    // 关闭面板
    closeEvent() {},
  },
};
</script>
<style lang="less" scoped>
@commonBorderColor: #00aaff;
.comprehensive-analysis {
  &-backbtn {
    width: 120px;
    height: 35px;
    background: @commonBorderColor;
    color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 30px;
    top: 15px;
    pointer-events: auto;
    cursor: pointer;
    .left-arrow {
      width: 7px;
      height: 7px;
      border-top: 3px solid #ffffff;
      border-right: 3px solid #ffffff;
      transform: translate(-50%, -50%) rotate(224deg);
      position: absolute;
      top: 16px;
      left: 25px;
    }
    .title {
      width: 80px;
      height: 35px;
      line-height: 35px;
      position: absolute;
      left: 34px;
    }
  }
  &-toolbar {
    width: 340px;
    height: 50px;
    line-height: 28px;
    color: #fff;
    border-radius: 3px;
    position: absolute;
    right: 60px;
    top: 8px;
    pointer-events: auto;

    .selected-icon {
      width: 40px;
      height: 40px;
      background: url("../assets/map/display.png") no-repeat center;
      position: absolute;
      bottom: 0;
      left: 0;
      cursor: pointer;
    }
    .layers-control-icon {
      width: 44px;
      height: 32px;
      background: url("../assets/map/layer_default.png") no-repeat center;
      position: absolute;
      bottom: 4px;
      left: 40px;
      cursor: pointer;
    }
    .searchbox {
      width: 245px;
      height: 40px;
      position: absolute;
      bottom: 2px;
      right: 0;
    }
  }
  &-legendbox {
    position: absolute;
    right: 30px;
    bottom: 30px;
  }

  &-left {
    width: 300px;
    height: 85%;
    position: absolute;
    top: 60px;
    left: 0;
    border-right: 2px solid @commonBorderColor;
    border-top: 2px solid @commonBorderColor;
    border-bottom: 2px solid @commonBorderColor;
    background: rgba(0, 170, 255, 0.2);
    pointer-events: auto;
    .collapse-btn {
      width: 30px;
      height: 40px;
      position: absolute;
      top: 5px;
      right: 50px;
      background: @commonBorderColor;
      cursor: pointer;
    }
    .close-btn {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 5px;
      right: 5px;
      background: url("../assets/image/close.png") no-repeat center;
      cursor: pointer;
    }
  }
  &-right {
    width: 300px;
    height: 85%;
    position: absolute;
    top: 60px;
    right: 0;
    border-left: 2px solid @commonBorderColor;
    border-top: 2px solid @commonBorderColor;
    border-bottom: 2px solid @commonBorderColor;
    background: rgba(0, 170, 255, 0.2);
    pointer-events: auto;
    display: flex;
    .control-container {
      width: 12%;
      height: 100%;
      background: red;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      .control-btn {
        width: 50px;
        height: 50px;
        background: purple;
        position: absolute;
        left: -25px;
      }
    }
    .contant-container {
      width: 88%;
      height: 100%;
      background: yellow;
    }
  }
}
</style>