|
|
|
|
@ -2,29 +2,31 @@
|
|
|
|
|
* @Description: 设备选择
|
|
|
|
|
-->
|
|
|
|
|
<script setup name="CanvasSize" lang="ts">
|
|
|
|
|
// import { Modal } from "view-ui-plus";
|
|
|
|
|
import useSelect from "@/hooks/select";
|
|
|
|
|
// import { cloneDeep } from "lodash-es";
|
|
|
|
|
// import { useI18n } from "vue-i18n";
|
|
|
|
|
import { useDeviceObject } from "../hooks/useDeviceObject";
|
|
|
|
|
|
|
|
|
|
// import watchOnlineSelected from "../../../assets/modelSetting/watchOnlineSelected.svg";
|
|
|
|
|
// const testSrc =
|
|
|
|
|
// "https://img.cgmodel.com/image/2020/1010/big/1537169-1390622992.jpg";
|
|
|
|
|
|
|
|
|
|
import { IsAction } from "@/components/Action";
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
deviceList: {
|
|
|
|
|
type: Array as Record<string, any>[]
|
|
|
|
|
},
|
|
|
|
|
currDeviceList: {
|
|
|
|
|
type: Array as Record<string, any>[]
|
|
|
|
|
},
|
|
|
|
|
pointInfo: {
|
|
|
|
|
type: Object as Record<string, any>
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits(["addDevice"]);
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits(["addDevice", "editDevice"]);
|
|
|
|
|
const { fabric, mixinState, canvasEditor } = useSelect();
|
|
|
|
|
const { initDeviceGroupObjects } = useDeviceObject();
|
|
|
|
|
const {
|
|
|
|
|
initDeviceGroupObjects,
|
|
|
|
|
isInViewBoundaries,
|
|
|
|
|
getDragDeviceObjectOrdinate
|
|
|
|
|
} = useDeviceObject();
|
|
|
|
|
|
|
|
|
|
// const { t } = useI18n();
|
|
|
|
|
const defaultPosition = {
|
|
|
|
|
left: 100,
|
|
|
|
|
@ -46,11 +48,7 @@ interface materialItemI {
|
|
|
|
|
src: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// const allType: materialTypeI = {
|
|
|
|
|
// value: "",
|
|
|
|
|
// label: "全部"
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
const allDeviceList = ref([]);
|
|
|
|
|
const state = reactive({
|
|
|
|
|
search: "",
|
|
|
|
|
// placeholder: <undefined | string>"",
|
|
|
|
|
@ -59,58 +57,86 @@ const state = reactive({
|
|
|
|
|
materialTypelist: [], // 分类列表
|
|
|
|
|
materialist: [] // 列表内容
|
|
|
|
|
});
|
|
|
|
|
const detailInfo = ref({});
|
|
|
|
|
const currDetailInfo = ref({
|
|
|
|
|
name: "设备",
|
|
|
|
|
workshop_name: "点位"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const isUpdateVisible = ref<boolean>(false);
|
|
|
|
|
const isAllowUpdate = ref<boolean>(false);
|
|
|
|
|
const currDetailInfo = ref({});
|
|
|
|
|
const isUpdateBindVisible = ref<boolean>(false);
|
|
|
|
|
const bindDeviceData = ref<Record<string, any>>({});
|
|
|
|
|
|
|
|
|
|
const updateMessage = computed(() => {
|
|
|
|
|
return `“${currDetailInfo.value.name}”已绑定至“${currDetailInfo.value.workshop_name}”，确定解除绑定并重新配置吗？`;
|
|
|
|
|
});
|
|
|
|
|
// 获取素材分类
|
|
|
|
|
canvasEditor.getMaterialType("svg").then((list: materialTypeI[]) => {
|
|
|
|
|
state.materialTypelist = [...list];
|
|
|
|
|
state.materialist = list;
|
|
|
|
|
return `“${currDetailInfo.value?.name}”已绑定至“${currDetailInfo.value?.workshop_name}”，确定解除绑定并重新配置吗？`;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 切换素材类型
|
|
|
|
|
// const handleChange = (e, item) => {
|
|
|
|
|
// // 搜索框文字设置
|
|
|
|
|
|
|
|
|
|
// 获取素材分类
|
|
|
|
|
canvasEditor.getMaterialType("svg").then((list: materialTypeI[]) => {
|
|
|
|
|
state.materialTypelist = [...list];
|
|
|
|
|
state.materialist = list;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function fetchDetail(record, callback) {
|
|
|
|
|
detailInfo.value = record;
|
|
|
|
|
console.log(detailInfo.value, "fetchDetail");
|
|
|
|
|
emit("addDevice", { record, callback });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 校验是否允许添加设备
|
|
|
|
|
* @param record 选中的素材
|
|
|
|
|
* 处理添加设备&重复添加设备【同点位，不同点位】
|
|
|
|
|
*/
|
|
|
|
|
function isValidAdd(event, record) {
|
|
|
|
|
console.log(props.currDeviceList, "isValidAdd_record", event, record);
|
|
|
|
|
// 同一点位重复新增禁用
|
|
|
|
|
if (record.is_binding) {
|
|
|
|
|
return false;
|
|
|
|
|
function deviceSelected(callback, options) {
|
|
|
|
|
const { targetDeviceItem } = options;
|
|
|
|
|
console.log(targetDeviceItem, "deviceSelected", props.currDeviceList);
|
|
|
|
|
currDetailInfo.value = targetDeviceItem;
|
|
|
|
|
if (targetDeviceItem.is_binding) {
|
|
|
|
|
let isSeemPoint = false;
|
|
|
|
|
toRaw(props.currDeviceList).forEach(item => {
|
|
|
|
|
if (item.device_id === targetDeviceItem.id) {
|
|
|
|
|
isSeemPoint = true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (!isSeemPoint) {
|
|
|
|
|
// 不同点位新增 接口会处理删除之前的绑定，并绑定到目标节点下
|
|
|
|
|
isUpdateBindVisible.value = true;
|
|
|
|
|
bindDeviceData.value = options;
|
|
|
|
|
} else {
|
|
|
|
|
// 同一点位重复新增
|
|
|
|
|
emit("editDevice", {
|
|
|
|
|
editParams: {
|
|
|
|
|
// id: currDeviceInfo.id,
|
|
|
|
|
// device_id: currDeviceInfo.device_id,
|
|
|
|
|
id: targetDeviceItem.wd_id,
|
|
|
|
|
device_id: targetDeviceItem.id,
|
|
|
|
|
workshop_id: props.pointInfo?.id,
|
|
|
|
|
x_ordinate: targetDeviceItem.x_ordinate,
|
|
|
|
|
y_ordinate: targetDeviceItem.y_ordinate
|
|
|
|
|
},
|
|
|
|
|
callback: () => {
|
|
|
|
|
// 实现在画布中的移动效果
|
|
|
|
|
console.log(
|
|
|
|
|
canvasEditor.canvas.getObjects(),
|
|
|
|
|
"canvasEditor_callback"
|
|
|
|
|
);
|
|
|
|
|
canvasEditor.canvas.getObjects().forEach(v => {
|
|
|
|
|
if (v?.deviceInfo?.device_id === targetDeviceItem.id) {
|
|
|
|
|
v.set({
|
|
|
|
|
left: targetDeviceItem.x_ordinate,
|
|
|
|
|
top: targetDeviceItem.y_ordinate
|
|
|
|
|
});
|
|
|
|
|
canvasEditor.canvas.renderAll();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
// 点位新增
|
|
|
|
|
emit("addDevice", { record: targetDeviceItem, callback });
|
|
|
|
|
}
|
|
|
|
|
// 确认在当前点位下重复添加已绑定的设备
|
|
|
|
|
function updateConfirmBind() {
|
|
|
|
|
const { event, item, targetDeviceItem } = toRaw(bindDeviceData.value);
|
|
|
|
|
console.log(event, item, targetDeviceItem, "updateConfirmBind");
|
|
|
|
|
emit("addDevice", {
|
|
|
|
|
record: targetDeviceItem,
|
|
|
|
|
callback: () => {
|
|
|
|
|
canvasEditor.dragAddItem(event, item); // 新增完成处理
|
|
|
|
|
bindDeviceData.value = {}; // 清空数据
|
|
|
|
|
isUpdateBindVisible.value = false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const dragItem = (event, deviceItem) => {
|
|
|
|
|
console.log(event, deviceItem, "dragItem");
|
|
|
|
|
if (!isValidAdd(event, deviceItem)) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
fabric.util.enlivenObjects(
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
@ -121,32 +147,47 @@ const dragItem = (event, deviceItem) => {
|
|
|
|
|
...initDeviceGroupObjects(deviceItem)
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
function (objects) {
|
|
|
|
|
// objects 包含从JSON还原的对象，这里我们期望是一个Group对象
|
|
|
|
|
// TODO 判断是否在边界内
|
|
|
|
|
const item = objects[0];
|
|
|
|
|
console.log(event, item, "dragItem");
|
|
|
|
|
const { x_ordinate, y_ordinate } = getDragDeviceObjectOrdinate(
|
|
|
|
|
event,
|
|
|
|
|
canvasEditor.canvas,
|
|
|
|
|
item
|
|
|
|
|
);
|
|
|
|
|
// 判断是否在边界内
|
|
|
|
|
if (
|
|
|
|
|
!isInViewBoundaries(
|
|
|
|
|
{ ...item, x_ordinate, y_ordinate },
|
|
|
|
|
canvasEditor.canvas
|
|
|
|
|
)
|
|
|
|
|
) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const targetDeviceItem = {
|
|
|
|
|
...deviceItem,
|
|
|
|
|
x_ordinate,
|
|
|
|
|
y_ordinate
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
fetchDetail(
|
|
|
|
|
{
|
|
|
|
|
...deviceItem,
|
|
|
|
|
x_ordinate: item.left,
|
|
|
|
|
y_ordinate: item.top
|
|
|
|
|
},
|
|
|
|
|
() => {
|
|
|
|
|
// canvasEditor.dragAddItem(event, item);
|
|
|
|
|
deviceSelected(
|
|
|
|
|
resData => {
|
|
|
|
|
// 新增完成处理
|
|
|
|
|
item.set({
|
|
|
|
|
deviceInfo: resData
|
|
|
|
|
}); // 作为无刷新时的标识
|
|
|
|
|
canvasEditor.dragAddItem(event, item);
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
targetDeviceItem,
|
|
|
|
|
event,
|
|
|
|
|
item
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function updateConfirm() {
|
|
|
|
|
isAllowUpdate.value = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 按照类型渲染
|
|
|
|
|
// const addItem = deviceItem => {
|
|
|
|
|
// if (isValidAdd(deviceItem)) {
|
|
|
|
|
@ -163,10 +204,11 @@ function updateConfirm() {
|
|
|
|
|
// ],
|
|
|
|
|
// function (objects) {
|
|
|
|
|
// const item = objects[0];
|
|
|
|
|
// canvasEditor.canvas.add(item);
|
|
|
|
|
// canvasEditor.canvas.setActiveObject(item);
|
|
|
|
|
// canvasEditor.canvas.requestRenderAll();
|
|
|
|
|
// fetchDetail(deviceItem);
|
|
|
|
|
// deviceSelected(() => {
|
|
|
|
|
// canvasEditor.canvas.add(item);
|
|
|
|
|
// canvasEditor.canvas.setActiveObject(item);
|
|
|
|
|
// canvasEditor.canvas.requestRenderAll();
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
// );
|
|
|
|
|
// };
|
|
|
|
|
@ -174,7 +216,6 @@ function updateConfirm() {
|
|
|
|
|
// 渲染设备到点位图上
|
|
|
|
|
function renderDeviceToCanvas(record) {
|
|
|
|
|
const startArr = record;
|
|
|
|
|
|
|
|
|
|
const finalArr = [];
|
|
|
|
|
startArr.map(deviceItem => {
|
|
|
|
|
const fullDeviceItem = {
|
|
|
|
|
@ -196,97 +237,26 @@ function renderDeviceToCanvas(record) {
|
|
|
|
|
canvasEditor.canvas.add(groupObject);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// objects 包含从JSON还原的对象，这里我们期望是一个Group对象
|
|
|
|
|
// const item = enlivenedObjects[0];
|
|
|
|
|
// canvasEditor.canvas.setActiveObject(item);
|
|
|
|
|
canvasEditor.canvas.requestRenderAll();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// const DefaultSize = {
|
|
|
|
|
// width: 1200,
|
|
|
|
|
// height: 900
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// const modalData = reactive({
|
|
|
|
|
// width: DefaultSize.width,
|
|
|
|
|
// height: DefaultSize.height
|
|
|
|
|
// });
|
|
|
|
|
// let width = ref(DefaultSize.width);
|
|
|
|
|
// let height = ref(DefaultSize.height);
|
|
|
|
|
// let presetSize = reactive([
|
|
|
|
|
// {
|
|
|
|
|
// label: t("red_book_vertical"),
|
|
|
|
|
// width: 900,
|
|
|
|
|
// height: 1200
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// label: t("red_book_horizontal"),
|
|
|
|
|
// width: 1200,
|
|
|
|
|
// height: 900
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// label: t("phone_wallpaper"),
|
|
|
|
|
// width: 1080,
|
|
|
|
|
// height: 1920
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// label: "kindle",
|
|
|
|
|
// width: 1200,
|
|
|
|
|
// height: 860
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// label: "kindle-resize",
|
|
|
|
|
// width: 860,
|
|
|
|
|
// height: 1200
|
|
|
|
|
// }
|
|
|
|
|
// ]);
|
|
|
|
|
// const DefaultSize = {
|
|
|
|
|
// width: 977,
|
|
|
|
|
// height: 670
|
|
|
|
|
// };
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
// canvasEditor.setSize(DefaultSize.width, DefaultSize.height);
|
|
|
|
|
// canvasEditor.on("sizeChange", (width, height) => {
|
|
|
|
|
// width.value = width;
|
|
|
|
|
// height.value = height;
|
|
|
|
|
// });
|
|
|
|
|
// canvas.editor.editorWorkspace.setSize(width.value, height.value);
|
|
|
|
|
// canvas.editor.editorWorkspace = new EditorWorkspace(canvas.c, {
|
|
|
|
|
// width: width.value,
|
|
|
|
|
// height: height.value,
|
|
|
|
|
// });
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// const setSizeBy = (w, h) => {
|
|
|
|
|
// modalData.width = w;
|
|
|
|
|
// modalData.height = h;
|
|
|
|
|
// };
|
|
|
|
|
// const setSize = () => {
|
|
|
|
|
// canvasEditor.setSize(width.value, height.value);
|
|
|
|
|
// // canvas.editor.editorWorkspace.setSize(width.value, height.value);
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// const handleClose = () => {
|
|
|
|
|
// showModal.value = false;
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// const handleConfirm = () => {
|
|
|
|
|
// width.value = modalData.width;
|
|
|
|
|
// height.value = modalData.height;
|
|
|
|
|
// setSize();
|
|
|
|
|
// handleClose();
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// watch(
|
|
|
|
|
// () => props.deviceList,
|
|
|
|
|
// () => {
|
|
|
|
|
// console.log(props.deviceList, "watch_deviceList");
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// immediate: true,
|
|
|
|
|
// deep: true
|
|
|
|
|
// }
|
|
|
|
|
// );
|
|
|
|
|
watch(
|
|
|
|
|
() => props.deviceList,
|
|
|
|
|
() => {
|
|
|
|
|
allDeviceList.value = toRaw(props.deviceList).filter(item => {
|
|
|
|
|
// item.workshop_id = item?.wd_id;
|
|
|
|
|
return item;
|
|
|
|
|
});
|
|
|
|
|
console.log(allDeviceList.value, "allDeviceList", props.deviceList);
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// immediate: true
|
|
|
|
|
// },
|
|
|
|
|
{
|
|
|
|
|
deep: true
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
defineExpose({ renderDeviceToCanvas });
|
|
|
|
|
</script>
|
|
|
|
|
<template>
|
|
|
|
|
@ -300,8 +270,8 @@ defineExpose({ renderDeviceToCanvas });
|
|
|
|
|
<ul class="mt-[8px] deviceSelect_list">
|
|
|
|
|
<li
|
|
|
|
|
class="flex items-center px-[16px] mb-[12px]"
|
|
|
|
|
:class="detailInfo?.id === info.id ? 'active' : ''"
|
|
|
|
|
v-for="(info, i) in props.deviceList"
|
|
|
|
|
:class="currDetailInfo?.id === info.id ? 'active' : ''"
|
|
|
|
|
v-for="(info, i) in allDeviceList"
|
|
|
|
|
:key="`${i}-logo1-button`"
|
|
|
|
|
:draggable="true"
|
|
|
|
|
@dragend="event => dragItem(event, info)"
|
|
|
|
|
@ -315,11 +285,11 @@ defineExpose({ renderDeviceToCanvas });
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<IsAction
|
|
|
|
|
v-model="isUpdateVisible"
|
|
|
|
|
@update:visible="val => (isUpdateVisible = val)"
|
|
|
|
|
v-model="isUpdateBindVisible"
|
|
|
|
|
@update:visible="val => (isUpdateBindVisible = val)"
|
|
|
|
|
title="确定重新绑定吗？"
|
|
|
|
|
:message="updateMessage"
|
|
|
|
|
@confirm="updateConfirm"
|
|
|
|
|
@confirm="updateConfirmBind"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -339,9 +309,6 @@ defineExpose({ renderDeviceToCanvas });
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
padding: 6px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
// width: 135px;
|
|
|
|
|
// cursor: pointer;
|
|
|
|
|
// margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-wrap {
|
|
|
|
|
|
