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

<template>
  <div 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)">
        <Transition name="fade">
          <img v-if="!item.status" class="device-icon" key="normal"
            :src="require(`@screen/images/layer/${active}/${item.title}.svg`)" />
          <img v-else class="device-icon" key="fault"
            :src="require(`@screen/images/layer/${active}/${item.title}${item.status}.svg`)" />
        </Transition>
        <span>{{ item.title }}</span>
      </div>
    </TransitionGroup>

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

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

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

import ControlCamera from "./../Dialogs/ControlCamera/index.vue"
import Camera from "./../Dialogs/Camera/index.vue";

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

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

    const layerData = getLayerData();
    this.layerData = layerData;
    this.tabContentData = layerData[defaultActive].children || [];
    this.active = layerData[defaultActive].title;
  },
  methods: {
    handleClick(item) {
      this.active = item.title;
      this.tabContentData = item.children;
    },
    handleDevice: debounce(function (item) {
      const key = `${this.active}/${item.title}`;

      eventMap[`${key}${item.status ? "_close" : ""}`]?.call(this, item);

      item.status = item.status ? "" : "_active";
    }, 360),
    handleCleared() {
      const { mapIns } = this.getMap();

      if (!mapIns) return;

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

    // 摄像机 可控 不可控 弹窗 回调
    handleCameraChange() {
      this.cameraDialogConfig = {
        // 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 .36s;
}

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

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

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

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

.RoadAndEvents {
  width: 100%;
  background: url("~@screen/images/bg/box_bg_002.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 18px;
  padding-bottom: 15px;
  overflow: hidden;

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

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

      .device-icon {
        display: block;
        position: absolute;
        top: 0;
        height: 24px;
      }

      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>