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-26 10:59:16
 * @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 } from "vue";
import { bgImageData } from "./testData/fabricImageSvg";
import { DsBox1 } from "@/components/DsBox";

defineOptions({
  name: "DeviceList"
});

// state
const clipPathData = ref<{
  width: number;
  height: number;
}>({
  width: 1200, // 宽
  height: 900 // 高
});
const canvasRef = ref<any>(null);
const cvs = ref<any>(null);
const currentDetail = ref<Record<string, any>>({});

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"
    }
  );
  cvs.value = canvasObject;
  console.log(canvasObject);
}

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

<template>
  <div class="flex justify-between deviceList_wrap">
    <canvas
      ref="canvasRef"
      :width="clipPathData.width"
      :height="clipPathData.height"
    />
    <div class="right_info">
      <DsBox1 title="设备详情">
        <template #default>
          <div class="w-full h-full">1234546376</div>
        </template>
      </DsBox1>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>