You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.7 KiB
Vue
69 lines
1.7 KiB
Vue
1 year ago
|
<!--
|
||
|
|
* @Author: donghao donghao@supervision.ltd
|
||
|
|
* @Date: 2024-02-23 10:14:31
|
||
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
||
|
|
* @LastEditTime: 2024-02-23 13:45:25
|
||
|
|
* @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>
|