General-AI-Platform-Web-Client/src/pages/dataScreen/views/device/deviceList.vue

<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-02-23 10:14:31
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-02-29 16:54:28
 * @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\views\device\deviceList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { fabric } from "fabric";
import { bgImageData } from "./testData/fabricImageSvg";
import { currJson, deviceListData } from "./testData/fabricDeviceList";

import { deviceTypeOptions } from "./testData/deviceListData";
import { DsBox2 } from "@/components/DsBox";
import DetailCard from "./modules/detailCard.vue";
import AlarmInfoList from "../../components/alarmInfoList.vue";

defineOptions({
  name: "DeviceList"
});

// state
const classOption = reactive({
  direction: "top"
});
const scroll = ref();

const deviceParams = ref<Record<string, any>>({
  type: "0"
});

const clipPathData = ref<{
  width: number;
  height: number;
}>({
  width: 1392, // 宽
  height: 742 // 高
});
const canvasRef = ref<any>(null);
const cvs = ref<any>(null);
const currentDetail = ref<Record<string, any>>(deviceListData[0]);

// 关闭选中的设备
function closeSelectedModel(targetCvs?: any) {
  let finalCvs = cvs;
  if (targetCvs) {
    finalCvs = targetCvs;
  }
  finalCvs.getObjects().forEach(item => {
    // if (changeId.includes(item?.userProperty?.id)) {
    const groupObject = item;
    // 选中组合对象
    // canvasObject.setActiveObject(groupObject); // 可以改变 selectable 值
    finalCvs.requestRenderAll();
    // 获取组合对象中的子对象
    // const objectsInGroup = groupObject.getObjects();
    groupObject.item(0).item(6).set({
      fill: ""
    });
    // groupObject.item(1).set({
    //   fill: "rgb(0,0,0)"
    // });
    finalCvs.renderAll();
  });
}

function initCanvas() {
  const canvasObject = new fabric.Canvas(canvasRef.value);
  canvasObject.setBackgroundImage(
    bgImageData.src,
    canvasObject.renderAll.bind(canvasObject),
    {
      width: clipPathData.value.width,
      height: clipPathData.value.height,
      originX: "left",
      originY: "top"
    }
  );
  canvasObject.loadFromJSON(JSON.stringify(currJson), () => {
    canvasObject.renderAll();
    console.log(canvasObject.getObjects(), "canvasObject");

    canvasObject.getObjects().forEach((item, index) => {
      // if (changeId.includes(item?.userProperty?.id)) {
      const groupObject = item;
      // 选中组合对象
      // canvasObject.setActiveObject(groupObject); // 可以改变 selectable 值
      canvasObject.requestRenderAll();
      // 获取组合对象中的子对象
      // const objectsInGroup = groupObject.getObjects();
      if (index === 0) {
        groupObject.item(0).item(6).set({
          fill: "#00F0FF"
        });
      }
      // groupObject.item(1).set({
      //   fill: "rgb(0,0,0)"
      // });
      canvasObject.renderAll();
    });
    // const groupObjectList = canvasObject.getObjects()

    // const groupObject = canvasObject.getObjects()[0];

    // 选中组合对象
    // console.log(groupObject, 'groupObject', canvasObject.getObjects());
    // 注册事件监听器
    // console.log(canvasObject, "targetObject");

    canvasObject.on("mouse:down", event => {
      // 获取事件的目标对象
      const targetObject = event.target;
      console.log(event, "targetObject");
      // set_category_fk_id_open(false);
      // 检查目标对象是否为组合对象
      if (targetObject && targetObject?.userProperty) {
        // setChangeId([targetObject?.userProperty?.id]);
        currentDetail.value = targetObject.userProperty;
        // setCurrentModelUserProperty(targetObject.userProperty);
        // set_category_fk_id_open(true);
      }
      // // 检查目标对象是否为组合对象
      if (targetObject) {
        // setCurrentTargetObject(targetObject);
        closeSelectedModel(canvasObject);
        canvasObject.bringToFront(targetObject);

        // console.log('mouse:down:', );
        // 改变边框选中效果
        targetObject.item(0).item(6).set({
          fill: "#00F0FF"
        });
        console.log(targetObject, "targetObject");
      }
      canvasObject.renderAll();
    });
  });
  cvs.value = canvasObject;
  console.log(canvasObject);
}

onMounted(() => {
  initCanvas();
});
</script>

<template>
  <div class="flex justify-between deviceList_wrap">
    <div class="left">
      <DsBox2
        title="设备列表"
        type="w2h1"
        bgClass="bg_device_left"
        bgTitleClass="bg_device_left_head"
      >
        <template #default>
          <div
            class="flex items-center justify-center w-full h-full device_left_box"
          >
            <!-- canvas 构图实现底部左右侧斜切 -->
            <canvas
              ref="canvasRef"
              :width="clipPathData.width"
              :height="clipPathData.height"
            />
            <div class="deviceList_params">
              <el-select
                v-model="deviceParams.type"
                placeholder="Select"
                style="width: 240px"
              >
                <el-option
                  v-for="item in deviceTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="deviceList_left_des_wrap">
              <div class="left_des" />
              <div class="bottom_des" />
            </div>
          </div>
        </template>
      </DsBox2>
    </div>
    <div class="right">
      <DsBox2 title="设备详情" type="w3h1" bgClass="bg_device_right">
        <template #default>
          <div class="w-full p-[24px]">
            <DetailCard :info="currentDetail" />

            <div class="device_alarm_info">
              <p>告警信息</p>
              <AlarmInfoList />
            </div>
          </div>
        </template>
      </DsBox2>
    </div>
  </div>
</template>

<style lang="scss">
@import "./deviceList.scss";
</style>