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>
    <div class="tabs-content">
      <div class="device-item" v-for="item in tabContentData" :key="item.id" @click="handleDevice(item)">
        <img class="device-icon" :src="require(`@screen/images/layer/${active}/${item.title}${item.status}.png`)" />
        <span>{{ item.title }}</span>
      </div>
    </div>
    <div class="cleared-btn" @click="handleCleared">
      <img src="@screen/images/icon/icon_006.png" />
      <span>清空图层</span>
    </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";

const cacheState = {};

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) {
      // console.log(item)
      const key = `${this.active}/${item.title}`;
      if (key in cacheState)
        cacheState[key] = cacheState[key] ? '' : "_close";
      else
        cacheState[key] = "";

      // item.status = item.status ? "" : "_fault";

      eventMap[key + cacheState[key]]?.call(this, item);

    }, 360),
    handleCleared() {
      const { mapIns } = this.getMap();

      if (!mapIns) return;

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

    // 摄像机 可控 不可控 弹窗 回调
    handleCameraChange() {
      this.cameraDialogConfig = {
        // 0 有 可控（球机）ControlCamera | 1 ⽆ 不可控（枪机）Camera
        component: null,
        data: null
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.RoadAndEvents {
  width: 100%;
  background: url("~@screen/images/bg/box_bg_002.png") no-repeat;
  background-size: 100% 100%;
  position: relative;

  .tabs-content {
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;

    .device-item {
      width: 70px;
      margin-bottom: 30px;
      cursor: pointer;

      .device-icon {
        display: block;
        margin: auto;
      }

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

  .tabs {
    display: flex;
    // justify-content: space-between;
    // align-items: center;
    padding: 25px 23px;
    width: 95%;
    overflow: hidden;

    .tabs-item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      flex-basis: 128px;
      width: 128px;
      height: 36px;
      margin-right: 14px;
      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;
    }

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

  .cleared-btn {
    position: absolute;
    cursor: pointer;
    right: 25px;
    bottom: 25px;
    width: 98px;
    height: 31px;
    border-radius: 20px 20px 20px 20px;
    opacity: 1;
    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>