visualization-design/src/views/EnvArea/Graphics.vue

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from "vue";
import { deepClone } from "@meta2d/core";
import { monitorRoomData } from "./pens/monitorRoom";
import { monitorNoRoomData } from "./pens/monitorNoRoom";
import { monitorPointData } from "./pens/monitorPoint";

type AssetsType = "space" | "monitor";

const activeAssets = ref<AssetsType>("space");
const monitorPoints = ref([
  { name: "3F-R1", disabled: true },
  { name: "3F-R2", data: monitorPointData },
]);

const roomList = [
  {
    id: 1,
    name: "有监测点房间",
    cssClass: "space-item-has-monitor",
    data: monitorRoomData,
  },
  {
    id: 2,
    name: "无监测点房间",
    cssClass: "space-item-no-monitor",
    data: monitorNoRoomData,
  },
];

const isSpacePanel = computed(() => {
  return activeAssets.value === "space";
});

const isMonitorPanel = computed(() => {
  return activeAssets.value === "monitor";
});

onMounted(() => {
  document.addEventListener("dragstart", dragstart, false);
  document.addEventListener("dragend", dragend, false);
});

onUnmounted(() => {
  document.removeEventListener("dragstart", dragstart);
  document.removeEventListener("dragend", dragend);
});

const dragstart = (event: any) => {
  event.target.style.opacity = 0.5;
};

const dragend = (event: any) => {
  event.target.style.opacity = 1;
};

const handleDragStart = async (item: any) => {
  if (!item) {
    return;
  }

  let { data } = item;

  if (!Array.isArray(data)) {
    data = deepClone([data]);
  }

  meta2d.canvas.addCaches = data;
};

const assetsChange = () => {
  return;
};
</script>

<template>
  <div class="graphics">
    <div class="group-asset">
      <t-radio-group
        v-model="activeAssets"
        @change="assetsChange"
        variant="primary-filled"
      >
        <t-radio-button value="space">{{ $t("空间组件") }}</t-radio-button>
        <t-radio-button value="monitor">{{ $t("监测点") }}</t-radio-button>
      </t-radio-group>
    </div>
    <div :class="['groups-panel', { 'groups-panel-monitor': isMonitorPanel }]">
      <div v-show="isSpacePanel">
        <div class="space-item" v-for="item in roomList" :key="item.id">
          <div class="space-item-title">{{ $t(item.name) }}</div>
          <div
            :class="item.cssClass"
            :draggable="true"
            @dragstart="handleDragStart(item)"
            @click.stop="handleDragStart(item)"
            @touchstart.passive="handleDragStart(item)"
          ></div>
        </div>
      </div>
      <div v-show="isMonitorPanel">
        <div
          :class="['monitor-item', { 'monitor-item-disabled': item.disabled }]"
          v-for="(item, index) in monitorPoints"
          :key="index"
          :draggable="!item.disabled"
          @dragstart="handleDragStart(item)"
          @click.stop="handleDragStart(item)"
          @touchstart.passive="handleDragStart(item)"
        >
          <div class="monitor-item-circle"></div>
          <div class="monitor-item-title">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="postcss" scoped>
.graphics {
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;

  .group-asset {
    height: 48px;
    align-items: center;
    display: flex;
    padding: 8px 16px;
    background-color: #fff;
    border-bottom: 1px solid #e4e7ed;

    .t-radio-group.t-radio-group--filled {
      padding: 0px;
      height: 32px;
      background-color: #fff;

      .t-radio-button::before {
        content: none;
      }
    }

    :deep(.t-radio-button__label) {
      margin: auto;
    }

    .t-radio-button {
      width: 88px;
      height: 32px;
      border-radius: 4px;
      padding: 0px;
      color: #000;

      &:hover {
        color: var(--color-primary);
      }

      &.t-is-checked {
        background-color: var(--color-primary) !important;
        color: #fff !important;
      }
    }
  }

  .groups-panel {
    flex: 1;
    overflow-y: auto;
    padding: 24px 16px;

    .space-item {
      .space-item-title {
        font-weight: 500;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
        margin-bottom: 8px;
      }

      .space-item-has-monitor {
        height: 140px;
        background: #fff;
        border-radius: 12px;
        cursor: pointer;
      }

      .space-item-no-monitor {
        height: 140px;
        background: repeating-linear-gradient(
          -60deg,
          #f1f1f1,
          #f1f1f1 7px,
          #d4d8d7 7px,
          #d4d8d7 14px
        );
        border-radius: 12px;
        cursor: pointer;
      }

      & + .space-item {
        margin-top: 24px;
      }
    }

    .monitor-item {
      height: 56px;
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
      display: flex;
      align-items: center;
      cursor: pointer;

      .monitor-item-circle {
        position: relative;
        width: 24px;
        height: 24px;
        background-color: rgba(103, 194, 58, 0.3);
        border-radius: 50%;
        margin-right: 12px;

        &::before {
          position: absolute;
          top: 6px;
          left: 6px;
          display: block;
          content: "";
          width: 12px;
          height: 12px;
          background-color: rgba(103, 194, 58, 0.6);
          border-radius: 50%;
        }

        &::after {
          position: absolute;
          top: 9px;
          left: 9px;
          display: block;
          content: "";
          width: 6px;
          height: 6px;
          background-color: rgba(103, 194, 58, 1);
          border-radius: 50%;
        }
      }

      .monitor-item-title {
        font-weight: 500;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
        user-select: none;
      }

      & + .monitor-item {
        margin-top: 8px;
      }
    }

    .monitor-item-disabled {
      background-color: initial;
      cursor: not-allowed;

      .monitor-item-title {
        color: rgba(0, 0, 0, 0.25);
      }
    }
  }

  .groups-panel-monitor {
    padding: 8px;
  }
}
</style>