|
|
|
@ -2,7 +2,7 @@
|
|
|
|
* @Author: donghao donghao@supervision.ltd
|
|
|
|
* @Author: donghao donghao@supervision.ltd
|
|
|
|
* @Date: 2024-08-02 10:52:32
|
|
|
|
* @Date: 2024-08-02 10:52:32
|
|
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
|
|
* @LastEditTime: 2024-08-14 17:10:19
|
|
|
|
* @LastEditTime: 2024-08-15 17:11:29
|
|
|
|
* @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\index.vue
|
|
|
|
* @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\index.vue
|
|
|
|
* @Description: 设备点位管理设置
|
|
|
|
* @Description: 设备点位管理设置
|
|
|
|
@ 交互说明
|
|
|
|
@ 交互说明
|
|
|
|
@ -19,7 +19,13 @@ import DeviceSettingAdd from "./components/add.vue";
|
|
|
|
import DeviceSelect from "./components/deviceSelect.vue";
|
|
|
|
import DeviceSelect from "./components/deviceSelect.vue";
|
|
|
|
import { IsDelete } from "@/components/Action";
|
|
|
|
import { IsDelete } from "@/components/Action";
|
|
|
|
import { usePointObject } from "./hooks/usePointObject";
|
|
|
|
import { usePointObject } from "./hooks/usePointObject";
|
|
|
|
import { getWorkshopsApi, deleteWorkshopsApi } from "@/api/workshops";
|
|
|
|
|
|
|
|
|
|
|
|
import {
|
|
|
|
|
|
|
|
getWorkshopsApi,
|
|
|
|
|
|
|
|
deleteWorkshopsApi,
|
|
|
|
|
|
|
|
addWorkshopDevicesApi,
|
|
|
|
|
|
|
|
getWorkshopDevicesApi
|
|
|
|
|
|
|
|
} from "@/api/workshops";
|
|
|
|
import { getLinkDevicesApi } from "@/api/device";
|
|
|
|
import { getLinkDevicesApi } from "@/api/device";
|
|
|
|
import { isSuccessApi } from "@/utils/forApi";
|
|
|
|
import { isSuccessApi } from "@/utils/forApi";
|
|
|
|
|
|
|
|
|
|
|
|
@ -68,30 +74,37 @@ const state = reactive({
|
|
|
|
* @设备点位
|
|
|
|
* @设备点位
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
const { getPointObject } = usePointObject();
|
|
|
|
const { getPointObject } = usePointObject();
|
|
|
|
|
|
|
|
|
|
|
|
const pointList = ref([]);
|
|
|
|
const pointList = ref([]);
|
|
|
|
const deviceSettingAddRef = ref("");
|
|
|
|
const deviceSettingAddRef = ref("");
|
|
|
|
|
|
|
|
const deviceSelectRef = ref("");
|
|
|
|
const activePointId = ref("");
|
|
|
|
const activePointId = ref("");
|
|
|
|
const activePoint = ref({
|
|
|
|
const activePoint = ref({
|
|
|
|
name: ""
|
|
|
|
name: ""
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const deviceList = ref([]);
|
|
|
|
const deviceList = ref([]); // 所有设备列表
|
|
|
|
|
|
|
|
const currDeviceList = ref([]); // 当前点位下设备列表
|
|
|
|
const isDeleteVisible = ref(false);
|
|
|
|
const isDeleteVisible = ref(false);
|
|
|
|
// 插入文件
|
|
|
|
// 插入文件绘制图
|
|
|
|
const initFile = () => {
|
|
|
|
const refreshCanvas = () => {
|
|
|
|
// console.log("canvasEditor");
|
|
|
|
const currWorkSpace = document.getElementById("workspace");
|
|
|
|
canvasEditor.insertSvgFile(getPointObject(toRaw(activePoint.value)));
|
|
|
|
canvasEditor.insertSvgFile(
|
|
|
|
|
|
|
|
getPointObject(toRaw(activePoint.value), {
|
|
|
|
|
|
|
|
width: currWorkSpace.clientWidth,
|
|
|
|
|
|
|
|
height: currWorkSpace.clientHeight
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
fetchDeviceByPoint();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log("插入文件");
|
|
|
|
};
|
|
|
|
};
|
|
|
|
// 初始化fabric&编辑器
|
|
|
|
// 初始化fabric&编辑器
|
|
|
|
const initFabric = () => {
|
|
|
|
const initFabric = () => {
|
|
|
|
const canvas = new fabric.Canvas("canvas", {
|
|
|
|
const canvas = new fabric.Canvas("canvas", {
|
|
|
|
fireRightClick: true, // 启用右键，button的数字为3
|
|
|
|
fireRightClick: false, // 启用右键，button的数字为3
|
|
|
|
stopContextMenu: true, // 禁止默认右键菜单
|
|
|
|
stopContextMenu: true, // 禁止默认右键菜单
|
|
|
|
controlsAboveOverlay: true // 超出clipPath后仍然展示控制条
|
|
|
|
controlsAboveOverlay: true // 超出clipPath后仍然展示控制条
|
|
|
|
});
|
|
|
|
});
|
|
|
|
canvas.loadFromJSON(
|
|
|
|
|
|
|
|
getPointObject(toRaw(activePoint.value)),
|
|
|
|
|
|
|
|
canvas.renderAll.bind(canvas)
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
// 初始化编辑器
|
|
|
|
// 初始化编辑器
|
|
|
|
canvasEditor.init(canvas);
|
|
|
|
canvasEditor.init(canvas);
|
|
|
|
canvasEditor.use(DringPlugin);
|
|
|
|
canvasEditor.use(DringPlugin);
|
|
|
|
@ -116,7 +129,7 @@ const initFabric = () => {
|
|
|
|
event.init(canvas);
|
|
|
|
event.init(canvas);
|
|
|
|
state.showFabric = true;
|
|
|
|
state.showFabric = true;
|
|
|
|
nextTick(() => {
|
|
|
|
nextTick(() => {
|
|
|
|
initFile();
|
|
|
|
refreshCanvas();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
@ -157,10 +170,12 @@ async function fetchPointList() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 获取设备列表
|
|
|
|
// 获取设备列表
|
|
|
|
async function fetchDeviceList() {
|
|
|
|
async function fetchDeviceList() {
|
|
|
|
const { data } = await getLinkDevicesApi();
|
|
|
|
const { data, ...resp } = await getLinkDevicesApi();
|
|
|
|
// TODO 未使用判空和loading效果
|
|
|
|
if (isSuccessApi(resp)) {
|
|
|
|
deviceList.value = data;
|
|
|
|
// TODO 未使用loading效果
|
|
|
|
console.log(deviceList.value, "fetchDeviceList_data", data);
|
|
|
|
deviceList.value = data;
|
|
|
|
|
|
|
|
console.log(deviceList.value, "fetchDeviceList_data", data);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 切换点位
|
|
|
|
// 切换点位
|
|
|
|
function tabPoint(tab) {
|
|
|
|
function tabPoint(tab) {
|
|
|
|
@ -168,7 +183,7 @@ function tabPoint(tab) {
|
|
|
|
activePoint.value = selectedTab;
|
|
|
|
activePoint.value = selectedTab;
|
|
|
|
console.log(tab.props.name, "tabPoint", activePoint.value);
|
|
|
|
console.log(tab.props.name, "tabPoint", activePoint.value);
|
|
|
|
nextTick(() => {
|
|
|
|
nextTick(() => {
|
|
|
|
initFile();
|
|
|
|
refreshCanvas();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -185,7 +200,7 @@ function afterFinishAdd(record) {
|
|
|
|
activePoint.value = record;
|
|
|
|
activePoint.value = record;
|
|
|
|
console.log("afterFinishAdd", record);
|
|
|
|
console.log("afterFinishAdd", record);
|
|
|
|
nextTick(() => {
|
|
|
|
nextTick(() => {
|
|
|
|
initFile();
|
|
|
|
refreshCanvas();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@ -193,11 +208,11 @@ function afterFinishAdd(record) {
|
|
|
|
function editPoint() {
|
|
|
|
function editPoint() {
|
|
|
|
deviceSettingAddRef.value?.openDialog();
|
|
|
|
deviceSettingAddRef.value?.openDialog();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 删除点位
|
|
|
|
// 开始删除点位
|
|
|
|
function beforeDeletePoint() {
|
|
|
|
function beforeDeletePoint() {
|
|
|
|
isDeleteVisible.value = true;
|
|
|
|
isDeleteVisible.value = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 完成删除点位
|
|
|
|
function afterFinishDelete() {
|
|
|
|
function afterFinishDelete() {
|
|
|
|
// 查找目标对象在 pointList 中的索引
|
|
|
|
// 查找目标对象在 pointList 中的索引
|
|
|
|
const currPointList = toRaw(pointList.value);
|
|
|
|
const currPointList = toRaw(pointList.value);
|
|
|
|
@ -220,10 +235,10 @@ function afterFinishDelete() {
|
|
|
|
activePointId.value = currPointList[0].id;
|
|
|
|
activePointId.value = currPointList[0].id;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
nextTick(() => {
|
|
|
|
nextTick(() => {
|
|
|
|
initFile();
|
|
|
|
refreshCanvas();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 删除点位
|
|
|
|
async function deletePoint() {
|
|
|
|
async function deletePoint() {
|
|
|
|
const resp = await deleteWorkshopsApi({
|
|
|
|
const resp = await deleteWorkshopsApi({
|
|
|
|
id: activePointId.value
|
|
|
|
id: activePointId.value
|
|
|
|
@ -235,6 +250,53 @@ async function deletePoint() {
|
|
|
|
// 执行删除操作
|
|
|
|
// 执行删除操作
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 获取点位下的已绑定设备
|
|
|
|
|
|
|
|
async function fetchDeviceByPoint() {
|
|
|
|
|
|
|
|
const resp = await getWorkshopDevicesApi({
|
|
|
|
|
|
|
|
workshop_id: activePointId.value,
|
|
|
|
|
|
|
|
is_binding: true
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
if (isSuccessApi(resp)) {
|
|
|
|
|
|
|
|
currDeviceList.value = resp.data.results;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log("fetchDeviceByPoint_resp", resp);
|
|
|
|
|
|
|
|
deviceSelectRef.value?.renderDeviceToCanvas(resp.data.results);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 新增设备
|
|
|
|
|
|
|
|
async function addDevice(record) {
|
|
|
|
|
|
|
|
const resp = await addWorkshopDevicesApi({
|
|
|
|
|
|
|
|
workshop_id: activePointId.value,
|
|
|
|
|
|
|
|
device_id: record.id,
|
|
|
|
|
|
|
|
x_ordinate: record?.x_ordinate || 0,
|
|
|
|
|
|
|
|
y_ordinate: record?.y_ordinate || 0,
|
|
|
|
|
|
|
|
icon: record?.type || 1
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
if (isSuccessApi(resp)) {
|
|
|
|
|
|
|
|
// isAddDeviceVisible.value = false;
|
|
|
|
|
|
|
|
// afterFinishAddDevice();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// //
|
|
|
|
|
|
|
|
// async function deleteDevice(record) {
|
|
|
|
|
|
|
|
// const resp = await deleteWorkshopDeviceApi({
|
|
|
|
|
|
|
|
// id: record.id
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// if (isSuccessApi(resp)) {
|
|
|
|
|
|
|
|
// isDeleteDeviceVisible.value = false;
|
|
|
|
|
|
|
|
// afterFinishDeleteDevice();
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// //
|
|
|
|
|
|
|
|
// async function updateDevice(record) {
|
|
|
|
|
|
|
|
// const resp = await updateWorkshopDeviceApi({
|
|
|
|
|
|
|
|
// id: record.id,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// 有点位了再初始化
|
|
|
|
// 有点位了再初始化
|
|
|
|
watch(
|
|
|
|
watch(
|
|
|
|
() => pointList.value,
|
|
|
|
() => pointList.value,
|
|
|
|
@ -254,7 +316,7 @@ watch(
|
|
|
|
// console.log("activePoint", activePoint);
|
|
|
|
// console.log("activePoint", activePoint);
|
|
|
|
// if (activePoint.value?.id) {
|
|
|
|
// if (activePoint.value?.id) {
|
|
|
|
// nextTick(() => {
|
|
|
|
// nextTick(() => {
|
|
|
|
// initFile();
|
|
|
|
// refreshCanvas();
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
@ -311,20 +373,20 @@ provide("canvasEditor", canvasEditor);
|
|
|
|
<div class="flex w-full h-full">
|
|
|
|
<div class="flex w-full h-full">
|
|
|
|
<!-- 左侧画布区域 -->
|
|
|
|
<!-- 左侧画布区域 -->
|
|
|
|
<div id="workspace" class="h-full deviceOfPoint_wrap">
|
|
|
|
<div id="workspace" class="h-full deviceOfPoint_wrap">
|
|
|
|
<div class="canvas-box">
|
|
|
|
<!-- <div class="inside-shadow"></div> -->
|
|
|
|
<!-- <div class="inside-shadow"></div> -->
|
|
|
|
<canvas id="canvas" />
|
|
|
|
<canvas
|
|
|
|
<!-- <dragMode v-if="state.showFabric"></dragMode>
|
|
|
|
id="canvas"
|
|
|
|
|
|
|
|
:class="state.ruler ? 'design-stage-grid' : ''"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<!-- <dragMode v-if="state.showFabric"></dragMode>
|
|
|
|
|
|
|
|
<zoom></zoom> -->
|
|
|
|
<zoom></zoom> -->
|
|
|
|
<!-- <mouseMenu></mouseMenu> -->
|
|
|
|
<!-- <mouseMenu></mouseMenu> -->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 右侧属性区域-->
|
|
|
|
<!-- 右侧属性区域-->
|
|
|
|
<div class="right-bar" v-if="state.showFabric">
|
|
|
|
<div class="right-bar" v-if="state.showFabric">
|
|
|
|
<DeviceSelect :deviceList="deviceList" />
|
|
|
|
<DeviceSelect
|
|
|
|
|
|
|
|
ref="deviceSelectRef"
|
|
|
|
|
|
|
|
:deviceList="deviceList"
|
|
|
|
|
|
|
|
@addDevice="addDevice"
|
|
|
|
|
|
|
|
:pointInfo="activePoint"
|
|
|
|
|
|
|
|
/>
|
|
|
|
<DeviceAttr />
|
|
|
|
<DeviceAttr />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@ -339,6 +401,7 @@ provide("canvasEditor", canvasEditor);
|
|
|
|
v-if="pointList.length"
|
|
|
|
v-if="pointList.length"
|
|
|
|
>删除位置</el-button
|
|
|
|
>删除位置</el-button
|
|
|
|
>
|
|
|
|
>
|
|
|
|
|
|
|
|
<!-- //TODO 完善删除交互效果 -->
|
|
|
|
<IsDelete
|
|
|
|
<IsDelete
|
|
|
|
v-model="isDeleteVisible"
|
|
|
|
v-model="isDeleteVisible"
|
|
|
|
@update:visible="val => (isDeleteVisible = val)"
|
|
|
|
@update:visible="val => (isDeleteVisible = val)"
|
|
|
|
|
