jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue

<template>
  <Bg1 class='RoadAndEvents'>
    <div class="tabs">
      <div class="tabs-item" :class="layer.title === active ? 'tabs-active' : ''" v-for="layer in layerData"
        :key="layer.title" @click="handleClick(layer)">
        {{ layer.title }}
      </div>
    </div>

    <!-- group -->
    <TransitionGroup name="fade-group" tag="div" class="tabs-content">
      <div class="device-item" v-for="(item, index) in tabContentData" :key="item.id" @click="handleDevice(item)"
        :style="getStart(index)">
        <div class="device-icon"
          :style="{ backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.title}${item.status}.svg`)})`, '--bgColor': `rgba(0, 209, 255, ${item.status ? 0.3 : 0})` }" />
        <span>{{ item.title }}</span>
      </div>
    </TransitionGroup>

    <div class="bottom">
      <div class="cleared-btn" @click="handleCleared">
        <img src="@screen/images/clearLayer.svg" />
        <span>清空图层</span>
      </div>
    </div>

    <!-- 摄像机设备 控制 弹窗  球机 可打开-->
    <!-- <ControlCamera :data="dialogConfig.data" :visible="dialogConfig.visibleType === 0" /> -->
    <!-- 摄像机 G35 K094+079 下行（可控） 枪机 可打开-->
    <!-- <Camera :data="dialogConfig.data" :visible="dialogConfig.visibleType === 1" /> -->
    <component :dialogData="dialogConfig.data" visible :device="dialogConfig.data" :is="dialogConfig.component"
      @change="handleCameraChange" />
  </Bg1>
</template>

<script>
import { getLayerData } from "./utils/layerImages";
import { debounce } from "lodash";
import { eventMap, cacheRemoveFunc } from "./utils/buttonEvent";

import Bg1 from "@screen/components/Decorations/bg-1.vue"
import ControlCamera from "./../Dialogs/ControlCamera/index.vue"
import DrivingGuidance from "./../Dialogs/DrivingGuidance/index.vue"
import Camera from "./../Dialogs/Camera/index.vue";
import InfoBoard from "./../InfoBoard"

export default {
  name: 'RoadAndEvents',
  components: {
    ControlCamera,
    Camera,
    DrivingGuidance,
    InfoBoard,
    Bg1
  },
  data() {
    return {
      layerData: [],
      active: "事件专题",
      tabContentData: [],

      // 路测设备-摄像机
      dialogConfig: {
        // 0 有 可控（球机） ControlCamera | 1 ⽆ 不可控（枪机） Camera
        component: void 0,
        data: void 0,
        // component: ControlCamera,
        // data: {
        //   camId: "57937",
        // }
      }
    }
  },
  inject: ['getMap'],
  created() {
    const defaultActive = 0;

    const layerData = getLayerData();
    this.layerData = layerData;
    this.tabContentData = layerData[defaultActive].children || [];
    this.active = layerData[defaultActive].title;

    this.minLayers = 3;
  },
  mounted() {
    // 获取原始 Layer
    const getMinMapLayers = (time = 0) => {
      setTimeout(() => {
        const { mapIns } = this.getMap();

        if (!mapIns) return getMinMapLayers(150);

        this.minLayers = mapIns.getLayers().length - 1;
      }, time);
    }

    getMinMapLayers();
  },
  methods: {
    handleClick(item) {
      this.active = item.title;
      this.tabContentData = item.children;
    },
    handleDevice: debounce(function (item) {
      const key = `${this.active}/${item.title}`;

      const status = item.status;

      item.status = item.status ? "" : "_active";

      console.log("%c [ key ]-102-「index.vue」", "font-size:15px; background:#9d63e9; color:#e1a7ff;", key);

      if (!eventMap[`${key}${status ? "_close" : ""}`]) return this.$emit("onClickItem", item);

      eventMap[`${key}${status ? "_close" : ""}`]?.call(this, item);
    }, 360),
    handleCleared() {
      const { mapIns } = this.getMap();

      this.layerData.forEach(({ children }) => {
        children.forEach(item => item.status = "")
      });

      if (!mapIns) return;

      for (const key in cacheRemoveFunc) {
        cacheRemoveFunc[key]?.();
      }

      // mapIns.clearMap();
      mapIns.getLayers().forEach((layer, index) => index > this.minLayers && mapIns.remove(layer))
    },

    // 摄像机 可控 不可控 弹窗 回调
    handleCameraChange() {
      this.dialogConfig = {
        // 0 有 可控（球机）ControlCamera | 1 ⽆ 不可控（枪机）Camera
        component: null,
        data: null
      }
    },
    getStart(index) {
      const columns = 5;

      return {
        gridRowStart: Math.floor(index / columns) + 1,
        gridColumnStart: (index % columns) + 1,
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity .24s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-group-enter-active,
.fade-group-leave-active {
  transition: all 0.24s ease;
}

.fade-group-enter-from,
.fade-group-leave-to {
  opacity: 0;
}

.fade-group-leave-active {
  // transform: translateY(24px);
  position: absolute !important;
  overflow: hidden;
}

.RoadAndEvents {
  width: 100%;
  // background: url("~@screen/images/bg/box_bg_002.png") no-repeat;
  // clip-path: polygon(13% 0, 87% 0, 100% 14%, 100% 85%, 85% 100%, 11% 100%, 0 87%, 0 15%);
  // background-size: 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 18px;
  padding-bottom: 15px;
  overflow: hidden;
  max-height: min-content;

  .tabs-content {
    margin-top: 15px;
    margin-bottom: 6px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    // grid-template-rows: repeat(3, 1fr);
    flex: 1;
    max-height: 100%;
    overflow: auto;
    position: relative;
    gap: 6px;

    .device-item {
      // position: absolute;
      position: relative;
      width: 70px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      --height-svg: 24px;
      --gap: 12px;
      padding-top: calc(var(--height-svg) + var(--gap));

      .device-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        height: 33px;
        width: 100%;
        background-repeat: no-repeat;
        background-size: auto;
        background-position: center;
        transition: all .18s linear;

        &::before {
          content: "";
          position: absolute;
          width: 33px;
          height: 33px;
          border: 1px solid rgba(0, 209, 255, .5);
          background-color: var(--bgColor);
          border-radius: 50%;
          z-index: -1;
        }
      }

      span {
        display: block;
        text-align: center;
        font-size: 13px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 15px;
        min-height: 27px;
      }
    }
  }

  .tabs {
    display: flex;
    overflow: hidden;
    gap: 24px;

    .tabs-item {
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      // width: 128px;
      flex: 1;
      height: 36px;
      background: url("~@screen/images/bg/box_bg_005.png") no-repeat;
      background-size: 100% 100%;
      font-size: 15px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      transition: all .3s linear;
    }

    .tabs-active {
      color: #00d1ff;
      background: url("~@screen/images/bg/box_bg_005_active.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  .bottom {
    display: flex;
    justify-content: end;

    .cleared-btn {
      // position: absolute;
      cursor: pointer;
      width: 98px;
      height: 31px;
      border-radius: 20px;
      border: 1px solid #25d8ff;
      font-size: 12px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      display: flex;
      align-items: center;

      img {
        width: 16px;
        height: 16px;
        display: inline-block;
        margin: 0 10px;
      }
    }
  }
}
</style>