foster-pc-vue/src/views/regionalInformation/index.vue

<template>
  <Bg></Bg>
  <Header>
    <template v-slot:right-slot>
      <div class="slot-right">
        <div class="switch yse-events">
          <span>果园级信息</span>
          <el-switch @change="handleSwitch('Garden')" v-model="switchValue" />
        </div>
        <div class="switch yse-events">
          <span>果树级信息</span>
          <el-switch @change="handleSwitch('tree')" v-model="switchValue1" />
        </div>
      </div>
    </template>
  </Header>
  <div class="container2">
    <div class="mainDiv">
      <div class="leftBox">
        <div class="name">{{btnName}}</div>
        <div class="btn" :style="{borderColor:subName.length>0?'#309195':'transparent'}">{{subName}}</div>
        <div class="map" ref="mapRef"></div>
      </div>

      <div class="rightBox">
        <div class="box-content">
          <Title :title="switchValue ? '果园级信息' : '果树级信息'"></Title>
          <div class="box-body">
            <div class="btn-row">
              <div
                :class="['btn-col', 'yse-events', { active: active === index }]"
                v-for="(item, index) in btnList"
                :key="index"
                @click="handleAct(index,item)"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="card">
              <div class="card-btn" v-if="btnItemList.length > 0">
                <div
                  :class="[
                    'btn-item',
                    'yse-events',
                    { active: activeItem === index },
                  ]"
                  v-for="(item, index) in btnItemList"
                  :key="index"
                  @click="handleItemAct(index,item)"
                >
                  {{ item.name }}
                </div>
              </div>
              <div class="list-border">
                <div
                  class="list-item"
                  v-for="(item, index) in listItem"
                  :key="index"
                >
                  <template v-if="btnItemList.length > 0">
                    <div
                      v-if="btnItemList[activeItem].style !== 'star'"
                      :class="btnItemList[activeItem].style"
                      :style="iconStyle(btnItemList[activeItem].style, index, item)"
                    ></div>
                    <el-icon v-else size="18px" class="star" color="#d63f3c"
                      ><StarFilled
                    /></el-icon>
                  </template>
                  <template v-else>
                    <div
                      v-if="btnList[active].style !== 'star'"
                      :class="btnList[active].style"
                      :style="iconStyle(btnList[active].style, index, item)"
                    ></div>
                    <el-icon v-else size="18px" class="star" color="#d63f3c"
                      ><StarFilled
                    /></el-icon>
                  </template>
                  <!-- <span v-if="item.type=='1'" class="item-txt">{{ item.maxVal }}</span> -->
                  <!-- <span v-else class="item-txt">{{ item.minVal }}-{{ item.maxVal }}</span> -->
                  <span class="item-txt">{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from "@/views/components/Header.vue";
import Bg from "../Bg";
import Title from "../components/title";
import { useRouter } from "vue-router";
import { reactive, toRefs, ref, onMounted } from "vue";
import { useStore } from "vuex";
import RegionalInformationMap from "./RegionalInformationMap";
const router = useRouter();
const store = useStore();
const state = reactive({
  btnList: [],
  btnItemList: [],
  baseData: [],
  listItem: [],
  btnName:'基本信息',
  subName:''
});

const { btnList, btnItemList, listItem,btnName ,subName} = toRefs(state);

const iconStyle = (type, index, item) => {
  if (type === "triangle") {
    return { borderBottomColor: item.color };
  }
  if (type === "bar") {
    return { background: item.color };
  }
  if (type === "circular") {
    return { background: item.color };
  }
};

const active = ref(0);
const handleAct = (e, v) => {
  activeType.value = v.type
  // 果园级 & type为字段值
  if (v.type == 1 && switchValue.value) {
    kmap.handleLayerColor(v, v.key)
  }
  if (switchValue.value) {
    kmap.switchType(activeType.value)
  }
  active.value = e;
  btnName.value = v.name
  updateData(e);
};

const activeItem = ref(0);
const activeType = ref(null);
const handleItemAct = (e, v) => {
  activeItem.value = e;
  subName.value = v.name
  if (v.type == 1) {
    kmap.switchTreeLegend(curGardenId.value, v)
  }else if(v.type == 2){
    kmap.addGargendImg(curGardenId.value, state.baseData[active.value].children[e])
  }
  if (state.baseData[active.value].children.length > 0) {
    state.listItem = state.baseData[active.value].children[e].items;
  }
};

const initData = async () => {
  let url = "aPictureGarden";
  if (!switchValue.value) {
    url = "aPictureTree";
  }
  const { code, data } = await VE_API.regionalInformation[url]({
    gardenId: curGardenId.value,
  });
  const dataValue = data.data;
  state.baseData = dataValue;
  state.btnList = dataValue;
  btnName.value = dataValue[active.value].name
  updateData(active.value);
};

const updateData = (index) => {
  state.btnItemList = state.baseData[index].children;
  if (state.baseData[index].children.length > 0) {
    subName.value = state.baseData[index].children[activeItem.value].name
    state.listItem = state.baseData[index].children[activeItem.value].items;
  } else {
    subName.value = ''
    state.listItem = state.baseData[index].items;
  }
  const legend = state.baseData[index].type
  // 果园级图片
  if (switchValue.value && legend === 0) {
    kmap.addGargendImg(curGardenId.value, state.baseData[index].children[activeItem.value])
  }
  if (switchValue1.value) {
    if (legend === 0) {
      // 0一级菜单 1字段值 2 图层
      kmap.switchTreeLegend(curGardenId.value, state.baseData[index].children[activeItem.value])
    } else if (legend === 1) {
      kmap.switchTreeLegend(curGardenId.value, state.baseData[index])
    }
  }
};

const switchValue = ref(true);
const switchValue1 = ref(false);

const handleSwitch = (type) => {
  if (type === "Garden") {
    switchValue1.value = !switchValue1.value;
  } else {
    switchValue.value = !switchValue.value;
  }
  if (!switchValue.value) {
    // 果园级为false时隐藏果园级的图层
    kmap.switchType(0)
    kmap.clearImgLayer()
  } else {
    kmap.clearCluster()
  }
  activeItem.value = 0;
  active.value = 0;
  initData();
};

// 地图初始化
const mapRef = ref(null);
const kmap = new RegionalInformationMap();
const location = store.getters.userinfo.location;
const curGardenId = ref(store.getters.userinfo.curGardenId);

onMounted(() => {
  initData();
  kmap.initMap(location, mapRef.value);
    // kmap.initArea(curGardenId.value)
    kmap.initSubArea(curGardenId.value)
  //   kmap.addSingleSelect(selectTree)
});
</script>

<style lang="scss" scoped>
@import "../../styles/index.scss";
.slot-right {
  display: flex;
  .switch {
    margin-right: 55px;
    display: flex;
    align-items: center;
    span {
      margin-right: 19px;
    }
  }
}
.container2 {
  height: 100%;
  width: 100%;
  z-index: 2;
  position: absolute;
  .mainDiv {
    position: absolute;
    top: 100px;
    bottom: 65px;
    left: 20px;
    right: 20px;
    .leftBox {
      float: left;
      width: calc(100% - 500px - 12px);
      height: 100%;
      border-radius: 4px;
      box-sizing: border-box;
      background: url("@/assets/img/regionalInformation/map_border_bg.png")
        no-repeat center center / 100% 100%;
      padding: 10px 20px;
      .name {
        font-size: 23px;
        color: #ffffff;
        font-style: italic;
        font-weight: normal;
      }
      .btn {
        margin-top: 18px;
        font-weight: 500;
        font-size: 21px;
        color: #ffffff;
        width: 130px;
        height: 45px;
        border: 1px solid #309195;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
      }
      .map {
        margin-top: 15px;
        @include wh(calc(100%), calc(100% - 20px - 18px - 45px - 40px));
      }
    }
    .rightBox {
      float: right;
      width: 500px;
      height: calc(100%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .box-content {
        height: 49%;
        border: 1px solid rgba(81, 233, 240, 0.6);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        box-sizing: border-box;
        .box-body {
          width: 100%;
          height: calc(100% - 44px);
          box-sizing: border-box;
          padding: 10px 8px;
          .btn-row {
            width: 100%;
            height: 46px;
            color: #fff;
            font-weight: 500;
            font-size: 19px;
            display: flex;

            .btn-col {
              width: 103px;
              height: 100%;
              background: url("@/assets/img/regionalInformation/btn_bg.png")
                no-repeat center center / 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              &.active {
                background: url("@/assets/img/regionalInformation/btn_bg_act.png")
                  no-repeat center center / 100% 100%;
                position: relative;
                &::before {
                  content: "";
                  background: url("@/assets/img/regionalInformation/arrow_top.png")
                    no-repeat center center / 100% 100%;
                  position: absolute;
                  width: 35px;
                  height: 18px;
                  bottom: -20px;
                }
              }
            }
          }
          .card {
            width: 100%;
            height: calc(100% - 46px - 19px);
            background: rgba(14, 76, 93, 0.5);
            box-sizing: border-box;
            margin-top: 19px;
            border-radius: 4px;
            padding: 15px 8px;
            .card-btn {
              color: #fff;
              width: 100%;
              height: 38px;
              display: flex;
              .btn-item {
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 94px;
                height: 100%;
                margin-right: 9px;
                background: url("@/assets/img/regionalInformation/btn_item_bg.png")
                  no-repeat center center / 100% 100%;
                &.active {
                  background: url("@/assets/img/regionalInformation/btn_item_bg_act.png")
                    no-repeat center center / 100% 100%;
                }
              }
            }
            .list-border {
              width: 100%;
              box-sizing: border-box;
              margin-top: 15px;
              max-height: calc(100% - 38px);
              overflow: hidden;
              background: url("@/assets/img/regionalInformation/list_bg.png")
                no-repeat center center / 100% 100%;
              display: flex;
              flex-wrap: wrap;
              padding-bottom: 15px;
              .list-item {
                color: #fff;
                display: flex;
                align-items: center;
                padding: 22px 0 0 18px;
                width: 35%;
                .bar {
                  width: 44px;
                  height: 15px;
                  background: #b0e000;
                  border-radius: 20px;
                  //   border: 1px solid #d2ff6d;
                  margin-right: 8px;
                }
                .circular {
                  width: 15px;
                  height: 15px;
                  border-radius: 50px;
                  margin-right: 8px;
                  background: #b0e000;
                }
                .triangle {
                  width: 0;
                  height: 0;
                  margin-right: 8px;
                  border-left: 7px solid transparent; /* 左边框设置为透明 */
                  border-right: 7px solid transparent; /* 右边框设置为透明 */
                  border-bottom: 14px solid #d63f3c; /* 下边框设置为你想要的颜色和大小，这将形成三角形的底部 */
                }
                .star {
                  margin-right: 8px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>